Merge pull request #107 from xwp/fix/offline-routing

Fix offline routing experience.
GoogleChrome · Mar 23, 2021 · c6013bd · c6013bd
2 parents 1cda702 + 53951ce
commit c6013bd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/index.js b/src/index.js
@@ -103,6 +103,6 @@ router.route('.*', VideoPage);
  */
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-    navigator.serviceWorker.register('sw.js');
+    navigator.serviceWorker.register('/sw.js');
   });
 }
diff --git a/src/js/constants.js b/src/js/constants.js
@@ -7,9 +7,14 @@
  * There may be adjacent caches used for other purposes and we
  * want to let the SW know which caches it should purge on upgrade.
  */
-export const SW_CACHE_NAME = 'static-assets-v1.0.0-alpha';
+export const SW_CACHE_NAME = 'static-assets-v1.0.0-alpha1';
 export const SW_CACHE_FORMAT = /^static-assets-v[a-z0-9.-]+$/;
 
+/**
+ * App Shell URL
+ */
+export const APP_SHELL_URL = '/';
+
 /**
  * Media Server Hostname
  */

diff --git a/src/js/sw/sw.js b/src/js/sw/sw.js
@@ -3,6 +3,7 @@
 import {
   SW_CACHE_NAME,
   SW_CACHE_FORMAT,
+  APP_SHELL_URL,
   STORAGE_SCHEMA,
   IDB_CHUNK_INDEX,
   MEDIA_SERVER_ORIGIN,
@@ -184,9 +185,10 @@ const clearOldCaches = (event) => {
  */
 const fetchHandler = async (event) => {
   const getResponse = async () => {
+    const request = event.request.destination === 'document' ? APP_SHELL_URL : event.request;
     const openedCache = await caches.open(SW_CACHE_NAME);
+    const cacheResponse = await openedCache.match(request);
 
-    const cacheResponse = await openedCache.match(event.request);
     if (cacheResponse) return cacheResponse;
 
     if (event.request.url.indexOf(MEDIA_SERVER_ORIGIN) === 0) {