Vanilla JavaScript: Progressive Web Applications
Overview
Create app-like experiences for the mobile web. Learn how to create progressive web apps with nothing more than Vanilla JavaScript.
Users now expect app-like experiences from mobile sites. But how do developers make their web-based projects behave like native apps? Progressive web apps (PWAs) are the answer. They fit any form factor, can function offline, and feel like native appsâwithout the difficulty or expense of native app development. This course shows how to turn an existing website into a progressive web app using nothing more than Vanilla JavaScript. Instructor Tom Duffy explains how to build in offline capabilities, automated installation prompts, and notificationsâfeatures that will delight and engage your users. Plus, learn how to implement push notifications and provide features that even advanced platforms like iOS are missing.
Users now expect app-like experiences from mobile sites. But how do developers make their web-based projects behave like native apps? Progressive web apps (PWAs) are the answer. They fit any form factor, can function offline, and feel like native appsâwithout the difficulty or expense of native app development. This course shows how to turn an existing website into a progressive web app using nothing more than Vanilla JavaScript. Instructor Tom Duffy explains how to build in offline capabilities, automated installation prompts, and notificationsâfeatures that will delight and engage your users. Plus, learn how to implement push notifications and provide features that even advanced platforms like iOS are missing.
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
Never Stop Learning!
