Offline Web Page Access with Service Worker
If you are not familiar with Service Worker, you can check Introduction to the Service Worker first before continue reading this article.
When user want to access our web page, sometimes there is a problem with their connection, they close the tab/browser, and usually forgot to return to our web page after the connection is back to online.
To avoid this, we can handle our web page offline access using Service Worker Caching feature.
Offline Page Handle Types
Keep in mind that all of this type needs user to access the web page with internet connection first to store the assets to browser cache.
Caching specific assets
When we are access the web page for the first time, we can caching the assets that we want in our browser. Next time, when we come back without internet connection, the specific assets will still available.
- Define the cache name and assets location.
- In Install event, cache all assets that already defined in step 1. Before caching, call self.skipWaiting() to force the waiting service worker to become the active service worker immediately.
- In Activate event, remove unwanted caches. Check if there are caches with different cache name that already defined. This step is important for us to always get fresh caches when activate the service worker.
- In Fetch event, check every fetch request URL. If the fetch event is failed and the URL matches with the assets that already defined, respond the request with the assets from browser’s cache. We can modify the sequence based on our needs: cache first, network first, or hybrid. This example is using network fist approach.
Caching all assets
We can cache all assets from web page that we already accessed before. In this type, we do not need to defined the assets because all the assets in the web page will be cached.
- Define the cache name.
- In Install event, call self.skipWaiting() to force the waiting service worker to become the active service worker immediately.
- In Activate event, remove unwanted caches same as previous type.
- In Fetch event, when fetch event is succeed, cache the response to the browser. The response is stream type so it only can be consumed once. Do not forget to make a copy/clone the response first to cache it. When fetch event is failed, intercept the response with the cache that already saved in browser.
Show offline page
If we want to show specific information to user when they access our web page with no internet connection, we can create a specific offline page that will be shown to users when they access our page offline.
- Define the cache name and offline page location.
- In Install event, call self.skipWaiting() to force the waiting service worker to become the active service worker immediately. Then, cache the offline assets that already defined in step 1.
- In Activate event, remove unwanted caches same as previous type.
- In Fetch event, if the fetch event is failed and the URL matches with the assets that already defined, check if the request mode is “navigate” to check if it is an HTTP request. If it is an HTTP request, respond the request with the offline assets that already been cached in step 2.
