Offline cache

backend/routes.js

@@ -716,6 +716,7 @@ route.GET('/assets/{subpath*}', {
   // Files like `main.js` or `main.css` should be revalidated before use. Se we use the default headers.
   // This should also be suitable for serving unversioned fonts and images.
   return h.file(subpath)
+    .header('Cache-Control', 'public,max-age=604800,stale-while-revalidate=86400')
 })
 
 route.GET(staticServeConfig.routePath, {}, {

frontend/controller/app/identity.js

@@ -388,7 +388,9 @@ export default (sbp('sbp/selectors/register', {
             })
           } else {
             try {
-              await sbp('chelonia/contract/sync', identityContractID)
+              if (navigator.onLine !== false) {
+                await sbp('chelonia/contract/sync', identityContractID)
+              }
             } catch (e) {
               // Since we're throwing or returning, the `await` below will not
               // be used. In either case, login won't complete after this point,

frontend/controller/serviceworkers/cache.js

@@ -0,0 +1,131 @@
+import sbp from '@sbp/sbp'
+import { NOTIFICATION_TYPE } from '~/shared/pubsub.js'
+
+const CACHE_VERSION = '1.0.0'
+const CURRENT_CACHES = {
+  assets: `assets-cache_v${CACHE_VERSION}`
+}
+
+if (
+  typeof Cache === 'function' &&
+  typeof CacheStorage === 'function' &&
+  typeof caches === 'object' &&
+  (caches instanceof CacheStorage)
+) {
+  sbp('okTurtles.events/on', NOTIFICATION_TYPE.VERSION_INFO, (data) => {
+    if (data.GI_VERSION !== process.env.GI_VERSION) {
+      caches.delete(CURRENT_CACHES.assets).catch(e => {
+        console.error('Error trying to delete cache', CURRENT_CACHES.assets)
+      })
+    }
+  })
+
+  const locationUrl = new URL(self.location)
+  const routerBase = locationUrl.searchParams.get('routerBase') ?? '/app'
+
+  self.addEventListener('install', (event) => {
+    event.waitUntil(
+      caches
+        .open(CURRENT_CACHES.assets)
+        .then((cache) =>
+          cache.addAll([
+            `${routerBase}/`
+          ]).catch(e => {
+            console.error('Error adding initial entries to cache')
+          })
+        )
+    )
+  })
+
+  // Taken from the MDN example:
+  // <https://developer.mozilla.org/en-US/docs/Web/API/Cache>
+  self.addEventListener('activate', (event) => {
+    const expectedCacheNamesSet = new Set(Object.values(CURRENT_CACHES))
+
+    event.waitUntil(
+      caches.keys().then((cacheNames) =>
+        Promise.allSettled(
+          cacheNames.map((cacheName) => {
+            if (!expectedCacheNamesSet.has(cacheName)) {
+              // If this cache name isn't present in the set of
+              // "expected" cache names, then delete it.
+              console.log('Deleting out of date cache:', cacheName)
+              return caches.delete(cacheName)
+            }
+
+            return undefined
+          })
+        )
+      )
+    )
+  })
+
+  self.addEventListener('fetch', function (event) {
+    console.debug(`[sw] fetch : ${event.request.method} - ${event.request.url}`)
+
+    if (!['GET', 'HEAD', 'OPTIONS'].includes(event.request.method)) {
+      return
+    }
+
+    let request = event.request
+
+    try {
+      const url = new URL(request.url)
+      if (url.pathname.startsWith('/file')) {
+        return
+      }
+
+      // If the route starts with `${routerBase}/`, use `${routerBase}/` as the
+      // URL, since the HTML content is presumed to be the same.
+      if (url.pathname.startsWith(`${routerBase}/`)) {
+        request = new Request(`${routerBase}/`, request)
+      }
+    } catch (e) {
+      return
+    }
+
+    event.respondWith(
+      caches.open(CURRENT_CACHES.assets).then((cache) => {
+        return cache
+          .match(request)
+          .then((cachedResponse) => {
+            if (cachedResponse) {
+              // If we're offline, return the cached response, if it exists
+              if (navigator.onLine === false) {
+                return cachedResponse
+              }
+            }
+
+            return fetch(request.clone()).then(async (response) => {
+              if (
+                // Save successful reponses
+                response.status >= 200 &&
+                response.status < 400 &&
+                response.status !== 206 && // Partial response
+                response.status !== 304 && // Not modified
+                // Which don't have a 'no-store' directive
+                !response.headers.get('cache-control')?.split(',').some(x => x.trim() === 'no-store')
+              ) {
+                await cache.put(request, response.clone()).catch(e => {
+                  console.error('Error adding request to cache')
+                })
+              } else {
+                await cache.delete(request)
+              }
+
+              return response
+            }).catch(e => {
+              if (cachedResponse) {
+                console.warn('Error while fetching', request.url, e)
+                // If there was a network error fetching, return the cached
+                // response, if it exists
+                return cachedResponse
+              }
+
+              throw e
+            })
+          })
+      })
+    )
+  })
+}

frontend/controller/serviceworkers/sw-primary.js

@@ -29,6 +29,7 @@ import {
   NEW_UNREAD_MESSAGES, NOTIFICATION_EMITTED, NOTIFICATION_REMOVED,
   NOTIFICATION_STATUS_LOADED, OFFLINE, ONLINE, SERIOUS_ERROR, SWITCH_GROUP
 } from '../../utils/events.js'
+import './cache.js'
 import './push.js'
 import './sw-namespace.js'
 
@@ -256,10 +257,6 @@ self.addEventListener('activate', function (event) {
   event.waitUntil(setupPromise.then(() => self.clients.claim()))
 })
 
-self.addEventListener('fetch', function (event) {
-  console.debug(`[sw] fetch : ${event.request.method} - ${event.request.url}`)
-})
-
 // TODO: this doesn't persist data across browser restarts, so try to use
 // the cache instead, or just localstorage. Investigate whether the service worker
 // has the ability to access and clear the localstorage periodically.