Vanilla JavaScript: Progressive Web Applications

Create app-like experiences for the mobile web. Learn how to create progressive web apps with nothing more than Vanilla JavaScript.

Introduction

• Leverage your web skills for mobile development
• What you should know
• Using the exercise files

1. What Is a Progressive Web App?

• A little history
• Introduction to Progressive Web Apps
• Choosing an editor

2. Getting Started

• Creating a web app in NetBeans
• Demo of the web app
• Creating the app icon
• Using the Android Emulator

3. The Web App Manifest

• What is the web app manifest?
• Set a Start URL and basic styling
• Test the PWA in the Android Emulator
• Test the PWA in the iOS Simulator

4. Getting Ready for Service Workers

• Moving away from emulators
• Intro to service workers
• Service worker lifecycle
• Getting started with ES6 promises
• PWAs and Chrome DevTools

5. Service Workers

• Registering a service worker
• The install event and caches
• Activating the service worker
• Intercepting requests using Fetch
• Install banner behavior
• Designing the install banner
• Implementing the install banner
• Debugging with Chrome DevTools
• More Chrome DevTools
• Debugging with Safari and the iOS Simulator

6. Cleaning Up iOS Limitations

• What's missing in the iOS implementaton
• Web app install banner: HTML and CSS
• Web app install banner: Update the cache
• Web app install banner: The window.onload event
• Demonstrating the web app install banner
• Launch images and splash screens
• Demonstrating launch images

7. Notifications and Push APIs

• Introduction to notifications
• Requesting permission to show notifications
• Displaying a notification
• Adding data to a notification
• Closing a notification
• Handling the notification click event
• Push messaging overview
• Adding Firebase Cloud Messaging to the project
• Subscribing to push messaging
• Handling push notifications
• Sending a tickle using cURL
• Sending data in a push message
• Installing Mozilla's Web Push library
• Modifying the push event handler
• Modifying the notification click event
• Creating the web push script
• Testing the hosted app

8. Resources

• What's left?
• Browser and device support
• PWA tools and resources

Conclusion

• Next steps