Move all caching to the install phase of the service worker

README.md

@@ -26,7 +26,7 @@ An in-depth comparison of all rendering methods can be found on this project's _
   - [Splitting Async Vendors](#splitting-async-vendors)
   - [Preloading Data](#preloading-data)
   - [Precaching Async Pages](#precaching-async-pages)
-  - [Dynamic Source Inlining](#dynamic-source-inlining)
+  - [Adaptive Source Inlining](#adaptive-source-inlining)
   - [Tweaking Further](#tweaking-further)
     - [Transitioning Async Pages](#transitioning-async-pages)
     - [Preloading Other Pages Data](#preloading-other-pages-data)
@@ -686,7 +686,7 @@ Before going on to the next major change, here is the backup branch containing e
 <br>
 https://github.com/theninthsky/client-side-rendering/tree/before-dynamic-source-inlining
 
-## Dynamic Source Inlining
+## Adaptive Source Inlining
 
 When inspecting our 43kb `react-dom.js` file, we can see that the time it took for the request to return was 60ms while the time it took to download the file was 3ms:
 

public/precache-service-worker.js

@@ -2,6 +2,9 @@ const CACHE_NAME = 'my-csr-app'
 
 const allAssets = self.__WB_MANIFEST.map(({ url }) => url)
 
+let cacheAssetsPromiseResolve
+const cacheAssetsPromise = new Promise(resolve => (cacheAssetsPromiseResolve = resolve))
+
 const getCache = () => caches.open(CACHE_NAME)
 
 const getCachedAssets = async cache => {
@@ -33,8 +36,8 @@ const precacheAssets = async ({ ignoreAssets }) => {
   const assetsToPrecache = allAssets.filter(asset => !cachedAssets.includes(asset) && !ignoreAssets.includes(asset))
 
   await cache.addAll(assetsToPrecache)
-
-  fetchDocument('/')
+  await removeUnusedAssets()
+  await fetchDocument('/')
 }
 
 const removeUnusedAssets = async () => {
@@ -74,16 +77,20 @@ const handleFetch = async request => {
   return cachedResponse || fetch(request)
 }
 
-self.addEventListener('install', () => self.skipWaiting())
+self.addEventListener('install', event => {
+  event.waitUntil(cacheAssetsPromise)
+  self.skipWaiting()
+})
 
-self.addEventListener('message', event => {
+self.addEventListener('message', async event => {
   const { type, inlineAssets } = event.data
 
-  if (type === 'cache-assets') return cacheInlineAssets(inlineAssets)
-  if (type === 'precache-assets') {
-    precacheAssets({ ignoreAssets: inlineAssets.map(({ url }) => url) })
-    removeUnusedAssets()
-  }
+  if (type !== 'cache-assets') return
+
+  await cacheInlineAssets(inlineAssets)
+  await precacheAssets({ ignoreAssets: inlineAssets.map(({ url }) => url) })
+
+  cacheAssetsPromiseResolve()
 })
 
 self.addEventListener('fetch', async event => {

src/utils/service-worker-registration.ts

@@ -20,20 +20,8 @@ const register = () => {
 
       console.log('Service worker registered!')
 
-      const inlineAssets = extractInlineScripts()
-
-      if (inlineAssets.length) {
-        navigator.serviceWorker.ready.then(registration => {
-          registration.active?.postMessage({ type: 'cache-assets', inlineAssets })
-        })
-      }
-
       registration.addEventListener('updatefound', () => {
-        registration.installing!.onstatechange = (event: Event) => {
-          const serviceWorker = event.target as ServiceWorker
-
-          if (serviceWorker.state === 'activated') serviceWorker.postMessage({ type: 'precache-assets', inlineAssets })
-        }
+        registration.installing?.postMessage({ type: 'cache-assets', inlineAssets: extractInlineScripts() })
       })
 
       setInterval(() => registration.update(), ACTIVE_REVALIDATION_INTERVAL * 1000)