4.33 (3 reviews)
☑ 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.
DEVELOPER TO DEVELOPER FAST TRACK APPROACH
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.
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
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