Progressive Web Apps: The Concise PWA Masterclass

The first look at what the role of the Service Worker is, and what requirements must be met.

This lesson will help you better understand where the Service Worker works.

An introduction to understanding & using Promises.

This relatively short tutorial will give you a starting point for using Promises with Service Workers and explain the challenges Promises help solve.

An introduction to understanding & using the new Fetch API.

This is a practical-use tutorial covering the basics of using Fetch over traditional XMLHttpRequest.

A walkthrough of the various stages of a Service Workers lifecycle.
This includes:

• Registration
• Installation
• Waiting
• Activated

Learn to intercept and manipulate network requests using the Service Worker's Fetch event.

Understand how the Service Worker location affects it's permissions scope and how to define a custom scope

Learn to use the ServiceWorkerRegistration object to monitor and respond to Service Worker updates and state changes.

Learn to use the HTML5 Messaging API to send messages between the main application context ( window ) and the service worker context.

A quick demonstration of listening for server push events on a Service Worker.

See how to request permission and show native notifications, using the HTML5 Notifications API.

An overview of the push notification process.

This lesson will show you how to:

1. Create a basic Node.js push server
2. Subscribe to a push service
3. Receive push notifications on the service worker

A brief overview of the different storage options available for Progressive Web Apps and why we'll use the Cache API.

Learn to use the CacheStorage interface for creating, opening and deleting caches.

Learn the basic workings of the Cache API, including:

• Adding entries
• Deleting entries
• Using the Put method
• Listing cache keys

Integrate the Cache API into the Service Worker to intercept browser requests and serve cached responses.

An example lesson of identifying and implementing suitable caching strategies for specific resources. Including:

• Cache Only
• Cache with Network Fallback
• Network with Cache Fallback
• Cache with Network Update
• Cache & Network Race
• Alternative Offline Content

A short tutorial on using Chrome remote debugging. - Devtools on a real device.

Understand the basic format and workings of the Web App Manifest file.

This includes specifying:

• App Icon
• Launch Screen
• App Name
• App Description
• Native Display Mode

Understand the trigger requirements for the "Add to Home Screen" dialog and learn to invoke it manually via Chrome Devtools.

Learn to provide Web App Manifest fallback for Safari mobile on iOS.

• App Icons
• Launch Screen
• Standalone Display Mode

An overview of the web app to be made progressive, including complete coverage of the app's code and goals of this project.

Add the first Progressive Web App features to the project app.

• Adding a Service Worker
• Caching the application shell (static assets)
• Creating a caching strategy for serving the app assets from the cache

Learn to implement customised caching strategies based on specific content types.

This lesson show how to cache API requests with the network as a priority and cache images that persist across Service Worker Updates.

Manage cached content with an undetermined expiration.

This lesson will teach practical messaging between the main context and the service worker.

Deploy a PWA to GitHub Pages as a free SSL enabled static app hosting solution.

This lesson includes:

• Creating the Web App Manifest
• Initialising the PWA as a Git repo
• Deploying via GitHub Pages

Learn to use Google's web app auditing tool, Lighthouse, to improve a PWA.

A brief overview of the project goals and the initial implementation of the HTTP Push Server & Client App.

Implementation of the Push Server's HTTP Endpoints - or Routes.
These include:

• Subscription
• Public Key request
• Push Notification
• 404

Create Vapid keys and implement the Public Key server endpoint.

Implement the client-side subscribe & unsubscribe logic for the push service, and the subscription registration logic for the push server's subscribe endpoint.

Add a simple storage module to persist client subscriptions between server restarts.

Implement the push endpoint, enabling the push server to send push notifications to all subscribed clients.

This lesson also covers sending and displaying a custom push notification message.

Manage push server subscriptions by removing redundant subscriptions from the storage.

Project overview:

• App function

• File structure

• Major dependencies

Create the App Shell. ( User Interface HTML )

Connect the App Shell (User Interface)

• Check app support

• Initialise the application

• Connect user interface elements to app events

Add Camera functionality:

• Launching the device camera stream

• Taking a photo

• Closing the camera stream

Render application messages with a photo in the app UI.

Add a Web Socket server to sync app data in real-time and persist data on the server.

An overview of Google's Workbox toolkit.

Workbox Service Worker:

• Create a service worker build script and automate service worker generation and updating.

• Configure app caching

A collection of useful resources to explore Progressive Web App development beyond this course.

Note: See attached links and PDF.

An outro consisting of:

• Expected course updates & additions

• Course Feedback & Suggestions

• Links to more Stackacademy.tv Courses