Progressive Webapps are Webapps that give you a richer offline experience and facilitate background fetching and push notifications Here you see a checklist of what it means to have a webapp that is considered "progressive".
This is a LabDay Test Project for a first implementation of a Service Worker. The Project/Implementation is looseley based upon this Tutorial
- There are 2 important prerequisites for service workers:
- The file of the worker must be in the root of the application
- You must use HTTPS Especially because of the necessity for https i have chosen to deploy the demo site on github pages (see Demo)
Attention be aware that this Code is not to be used for production purposes for the following Reasons:
-
Cache depends on updating the cache key for every change For example this caching method requires you to update the cache key every time content is changed, otherwise, the cache will not be updated, and the old content will be served. So be sure to change the cache key with every change as you're working on your project!
-
Requires everything to be redownloaded for every change Another downside is that the entire cache is invalidated and needs to be re-downloaded every time a file changes. That means fixing a simple single character spelling mistake will invalidate the cache and require everything to be downloaded again. Not exactly efficient.
-
Browser cache may prevent the service worker cache from updating There's another important caveat here. It's crucial that the HTTPS request made during the install handler goes directly to the network and doesn't return a response from the browser's cache. Otherwise the browser may return the old, cached version, resulting in the service worker cache never actually updating!
-
Beware of cache-first strategies in production Our app uses a cache-first strategy, which results in a copy of any cached content being returned without consulting the network. While a cache-first strategy is easy to implement, it can cause challenges in the future. Once the copy of the host page and service worker registration is cached, it can be extremely difficult to change the configuration of the service worker (since the configuration depends on where it was defined), and you could find yourself deploying sites that are extremely difficult to update!
- How do I avoid these edge cases? So how do we avoid these edge cases? Use a library like sw-precache, which provides fine control over what gets expired, ensures requests go directly to the network and handles all of the hard work for you.
The Source is exposed in a GitHub-Pages Site for a short demo https://quasarchimaere.github.io/progressivewebapp_serviceworker_test/
Supported Browsers
- Chrome
- Firefox
- Opera
- Edge(shows public support for future implementation)
- NO SUPPORT for Safari