Create app-like experiences for the mobile web. Learn how to create progressive web apps with nothing more than Vanilla JavaScript.
Overview
Syllabus
Introduction
- Leverage your web skills for mobile development
- What you should know
- Using the exercise files
- A little history
- Introduction to Progressive Web Apps
- Choosing an editor
- Creating a web app in NetBeans
- Demo of the web app
- Creating the app icon
- Using the Android Emulator
- 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
- Moving away from emulators
- Intro to service workers
- Service worker lifecycle
- Getting started with ES6 promises
- PWAs and Chrome DevTools
- 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
- 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
- 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
- What's left?
- Browser and device support
- PWA tools and resources
- Next steps
Taught by
Tom Duffy
