Prefetch on demand

assets/package.json

@@ -25,6 +25,13 @@
                 "webpackMode": "eager",
                 "fetch": "eager",
                 "enabled": true
+            },
+            "prefetch-on-demand": {
+                "main": "src/prefetch-on-demand_controller.js",
+                "name": "pwa/prefetch-on-demand",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true
             }
         },
         "importmap": {

assets/src/prefetch-on-demand_controller.js

@@ -0,0 +1,24 @@
+'use strict';
+
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static values = {
+        urls: { type: Array, default: []}
+    };
+
+    connect = () => {
+        const workbox = window.workbox;
+        if (!workbox) {
+            return;
+        }
+
+        workbox.messageSW({
+            "type": "PREFETCH",
+            "payload": {
+                "urls": this.urlsValue
+            }
+        });
+    }
+}