Cache dynamically generated static files

chawes13 · May 9, 2020 · 73ac3a5 · 73ac3a5
1 parent b8ac061
commit 73ac3a5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
-    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="icon" type="image/png" href="/favicon.png">
 
     <!-- PWA -->
     <link rel="manifest" href="/manifest.json">
-    <link rel="apple-touch-icon" href="lpl-192.png">
+    <link rel="apple-touch-icon" href="/lpl-192.png">
     <meta name="theme-color" content="#000000">
 
     <title>The Village People</title>

diff --git a/public/sw.js b/public/sw.js
@@ -1,8 +1,7 @@
-const CACHE_NAME = 'village-people-static-cache-v1'
-const STATIC_FILES_TO_CACHE = [
+const STATIC_CACHE_NAME = 'village-people-static-cache-v1'
+const STATIC_REQUESTS_TO_CACHE = [
   'index.html',
   'env',
-  'main.js',
   'manifest.json',
   'favicon.png',
   'lpl-192.png',
@@ -19,10 +18,14 @@ function validResponse (response) {
   return /^(2|3)\d{2}$/.test(response.status)
 }
 
+function staticAssetRequest (request) {
+  return request.url.includes('/static/')
+}
+
 self.addEventListener('install', (event) => {
   event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => {
-      return cache.addAll(STATIC_FILES_TO_CACHE)
+    caches.open(STATIC_CACHE_NAME).then((cache) => {
+      return cache.addAll(STATIC_REQUESTS_TO_CACHE)
     })
   )
 
@@ -32,7 +35,7 @@ self.addEventListener('install', (event) => {
 self.addEventListener('activate', (event) => {
   event.waitUntil(caches.keys().then((keyList) => {
     return Promise.all(keyList.map((key) => {
-      if (key === CACHE_NAME || key === DATA_CACHE_NAME) return
+      if (key === STATIC_CACHE_NAME || key === DATA_CACHE_NAME) return
       return caches.delete(key)
     }))
   }))
@@ -57,15 +60,21 @@ self.addEventListener('fetch', (event) => {
     )
   } else {
     event.respondWith(
-      caches.open(CACHE_NAME)
+      caches.open(STATIC_CACHE_NAME)
         .then((cache) => {
           // Return cached file or attempt to fetch it over the network
-          // "Pages" that are not cached should return the index (since it's a SPA)
+          // "Pages" that are not cached should return index.html (since it's a SPA)
           return cache.match(event.request)
             .then((response) => {
-              return response || fetch(event.request).catch(() => {
-                return cache.match('index.html')
-              })
+              return response || fetch(event.request)
+                .then((response) => {
+                  // cache dynamically generated _static_ files (e.g., main.1579e961.js)
+                  if (staticAssetRequest(event.request) && validResponse(response)) cache.put(event.request.url, response.clone())
+                  return response
+                })
+                .catch(() => {
+                  return cache.match('index.html')
+                })
             })
         })
     )

diff --git a/server/index.js b/server/index.js
@@ -25,9 +25,7 @@ if (NODE_ENV === 'production') {
   app.use(enforceSSL())
   // Enable gzip compression to decrease response body size to increase speed
   app.use(compression())
-}
-
-if (NODE_ENV === 'development') {
+} else {
   app.use('/api', cors())
 }