Progressive Web Apps - Offline first! FAST TRACK cookbook.

Learn to build regular websites with offline and near instant web pages with Progressive Web Apps.

4.33 (3 reviews)


4.5 hours


Aug 2020

Last Update
Regular Price

Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses

What you will learn

What is Progressive Web App

Build a PWA with offline capability.

Create a Native APP UI.

Learn and create Service Workers.

Create offline and 'instant' pages with the Cache API and IndexedDB.

Learn how to save form data when offline and automatically send to the server when back online.

Communication to and from Service Worker and Web Page.



Learn how to:

  • Create the Native App UI and Add to Homescreen facility.

  • Use Service Workers, Cache API and caching strategies.

  • Use IndexedDB to store data and create template files to render data stored in the browser's own database - IndexedDB.

  • Access BackgroundSync so that form data is stored when offline and posted automatically when back online, even if the browser is closed.

  • Send Notifications using the Notifications API.

  • Send messages to and from the Service Worker and web page.

  • Access the Web Storage API

This course is DEVELOPER to DEVELOPER, with links to invaluable resources so that you can further develop your understanding of PWAs.

With the download of all lessons from the start, you will have you own PWA that you can customise. The functionality is very powerful yet the projects itself is kept basic so that you have an easy to modify boiler plate.

There is also an online version of the project so that you can see it deployed in the wild.


Progressive Web Apps - Offline first! FAST TRACK cookbook.
Progressive Web Apps - Offline first! FAST TRACK cookbook.
Progressive Web Apps - Offline first! FAST TRACK cookbook.
Progressive Web Apps - Offline first! FAST TRACK cookbook.



The goal...

Demo of PWA supplied right at start

Why no code along but source files at start?

My teaching style - developer to developer

Course set up - overview of downloaded files

Online version of each lesson's app

UI - Creating the Native App look

10 - Our starting point

10 - Run Lighthouse test

11 - Manifest.json file introduction

11 - Tools to build manifest.json file

!!!13 - Add a Service Worker

13- Run Lighthouse test

14 - Adding cross browser images and meta tags

14 - Run Lighthouse test

15 - Capture the Add to Home Screen event UX ause

Service Workers and CACHE API - our devices local Web Server

20-1 A look at great resources on the web

20-2 What is a Service Worker?

20-3 A look at Service Workers in action

20-4 A look at the FETCH event in our Service Worker

20-5 Summary of Installation, Activation and Fetch in our service worker.

21 Introducing the CACHE API

21-1 CACHE API: Creating caches

21-2 A look at using cache.addAll() to store assets in our caches

22-1 Using the FETCH event to implement CACHE THEN NETWORK strategy.

23-1 Adapting our Service Worker to create a DYNAMIC CACHE

24-1 Rendering FALLBACK_PAGE when offfline

25-1 Managing our dynamic caches - latest version only

25-2 Limit number of entries in dynamic cache

Importing scripts into Service Workers

An overview of caching strategies

Save for later...using the Cache API in a web page

Summary of 20s lessons

IndexedDB the browser's own asynchronous database - our device's local database

Introduction to this section

What is IndexedDB?

Key notes on IndexedDB

Using idb.js and idb-fn.js

30 Our first use of IndexedDB

OFFLINE styling

A look at what version 31 contains - articles and contacts

31-1 Using IndexedDB and Dexie.js to load data in theindex page

31-2 The articles.html and article.html pages

31-4 The contacts.html page

Summary of this IndexedDB section

BackgroundSync and Messaging

Introduction to section

What is BackgroundSync?

40 Setting up the form

41-1 Saving form data and setting up BackgroundSync

42-1 Process saved form data

42-2 Diagram showing the postMessage API between page and SW

42-2 Code display for the lesson messaging

42-2 Send message from SW to form page

An introduction to Notifications

42-3 Notifications - getting permission to send them

Examples of Notification customisation

42-4 Send notifications and clear saved data

42-5 Send a message from page to Service Worker example

42-6 Storage API

Summary of BackgroundSync, Notifications and messaging

Wrap Up



Udemy ID


Course created date


Course Indexed date
Course Submitted by