m Service Workers
- jim mason
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
localStoragecannot 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
Potential Value Opportunities
Potential Challenges
Candidate Solutions
Step-by-step guide for Example
sample code block