Key Points

References

Reference_description_with_linked_URLs_______________________	Notes__________________________________________________________





Service Worker pattern
https://www.sitepoint.com/premium/books/going-offline?utm_source=email&utm_medium=new-publisher-announcement&utm_campaign=a-book-apart	Jeremy Keith introduces you to service workers (and the code behind them) to show you the latest strategies in offline pages.

https://developers.google.com/web/ilt/pwa/introduction-to-service-worker	Google intro service worker pattern

Key Concepts

Google PWA Codelabs - Build PWA in mutliple labs

https://codelabs.developers.google.com/dev-pwa-training/

This course shows you how to convert web pages to Progressive Web Apps (PWAs). PWAs use a web-development approach that combines tools and technologies to create targeted, ideal user experiences on mobile devices. PWAs use service workers, modern browser APIs, and an application shell architecture to give users meaningful offline experiences, fast first load, and easy re-engagement on repeat visits to the app.

Google Service Worker introduction

https://developers.google.com/web/ilt/pwa/introduction-to-service-worker

What is a service worker?

A service worker is a type of web worker. It's essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.

Because workers run separately from the main thread, service workers are independent of the application they are associated with.

This has several consequences:

Because the service worker is not blocking (it's designed to be fully asynchronous) synchronous XHR and localStorage cannot be used in a service worker.
The service worker can receive push messages from a server when the app is not active. This lets your app show push notifications to the user, even when it is not open in the browser.
The service worker can't access the DOM directly. To communicate with the page, the service worker uses the postMessage() method to send data and a "message" event listener to receive data.

Note: Whether notifications are received when the browser itself is not running depends on how the browser is integrated with the OS. For instance on desktop OS's, Chrome and Firefox only receive notifications when the browser is running. However, Android is designed to wake up any browser when a push message is received and will always receive push messages regardless of browser state. See the FAQ in Matt Gaunt's Web Push Book for more information.

Things to note about Service Worker:

A service worker is a programmable network proxy that lets you control how network requests from your page are handled.
Service workers only run over HTTPS. Because service workers can intercept network requests and modify responses, "man-in-the-middle" attacks could be very bad.

Note: Services like https://letsencrypt.org/ let you procure SSL certificates for free to install on your server.

The service worker becomes idle when not in use and restarts when it's next needed. You cannot rely on a global state persisting between events. If there is information that you need to persist and reuse across restarts, you can use IndexedDB databases.
Service workers make extensive use of promises, so if you're new to promises, then you should stop reading this and check out Promises, an introduction.

Scripting a service worker in a progressive web app - PWA

https://codelabs.developers.google.com/codelabs/pwa-scripting-the-service-worker/index.html?index=..%2F..dev-pwa-training#0

Potential Value Opportunities

Potential Challenges

Candidate Solutions

Step-by-step guide for Example

sample code block

sample code block

Recommended Next Steps

Related articles

Browser not supported