Update workbox, add expiration on cache (#9020)

package.json

@@ -138,10 +138,12 @@
     "vue": "^2.6.11",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
-    "workbox-core": "^5.1.3",
-    "workbox-precaching": "^5.1.3",
-    "workbox-routing": "^5.1.3",
-    "workbox-strategies": "^5.1.3",
+    "workbox-cacheable-response": "^6.1.5",
+    "workbox-core": "^6.1.5",
+    "workbox-expiration": "^6.1.5",
+    "workbox-precaching": "^6.1.5",
+    "workbox-routing": "^6.1.5",
+    "workbox-strategies": "^6.1.5",
     "xss": "^1.0.6"
   },
   "devDependencies": {
@@ -166,7 +168,6 @@
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^5.0.11",
     "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/codemirror": "^0.0.97",
     "@types/js-yaml": "^3.12.1",
     "@types/leaflet": "^1.4.3",
     "@types/leaflet-draw": "^1.0.1",
@@ -233,7 +234,7 @@
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-manifest-plugin": "^3.0.0",
-    "workbox-build": "^5.1.3"
+    "workbox-build": "^6.1.5"
   },
   "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
   "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",

src/entrypoints/service_worker.ts

@@ -10,9 +10,11 @@ import {
   NetworkOnly,
   StaleWhileRevalidate,
 } from "workbox-strategies";
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
+import { ExpirationPlugin } from "workbox-expiration";
 
 const noFallBackRegEx = new RegExp(
-  `${location.host}/(api|static|auth|frontend_latest|frontend_es5|local)/.*`
+  "/(api|static|auth|frontend_latest|frontend_es5|local)/.*"
 );
 
 // Clean up caches from older workboxes and old service workers.
@@ -31,27 +33,22 @@ function initRouting() {
 
   // Cache static content (including translations) on first access.
   registerRoute(
-    new RegExp(`${location.host}/(static|frontend_latest|frontend_es5)/.+`),
+    new RegExp("/(static|frontend_latest|frontend_es5)/.+"),
     new CacheFirst({ matchOptions: { ignoreSearch: true } })
   );
 
   // Get api from network.
-  registerRoute(
-    new RegExp(`${location.host}/(api|auth)/.*`),
-    new NetworkOnly()
-  );
+  registerRoute(new RegExp("/(api|auth)/.*"), new NetworkOnly());
 
   // Get manifest, service worker, onboarding from network.
   registerRoute(
-    new RegExp(
-      `${location.host}/(service_worker.js|manifest.json|onboarding.html)`
-    ),
+    new RegExp("/(service_worker.js|manifest.json|onboarding.html)"),
     new NetworkOnly()
   );
 
   // For the root "/" we ignore search
   registerRoute(
-    new RegExp(`^${location.host}/(\\?.*)?$`),
+    new RegExp(/\/(\?.*)?$/),
     new StaleWhileRevalidate({ matchOptions: { ignoreSearch: true } })
   );
 
@@ -59,7 +56,20 @@ function initRouting() {
   // This includes "/states" response and user files from "/local".
   // First access might bring stale data from cache, but a single refresh will bring updated
   // file.
-  registerRoute(new RegExp(`${location.host}/.*`), new StaleWhileRevalidate());
+  registerRoute(
+    new RegExp(/\/.*/),
+    new StaleWhileRevalidate({
+      cacheName: "file-cache",
+      plugins: [
+        new CacheableResponsePlugin({
+          statuses: [0, 200],
+        }),
+        new ExpirationPlugin({
+          maxAgeSeconds: 60 * 60 * 24,
+        }),
+      ],
+    })
+  );
 }
 
 function initPushNotifications() {