Make PWA work offline

frontend/babel-precompile.chunk.js

@@ -0,0 +1 @@
+node_modules/starboard-notebook/dist/babel-precompile.chunk.js

frontend/js/notebook.js

@@ -1,5 +1,5 @@
 // vim: set ts=4 sw=4:
-/* jshint esversion: 8 */
+/* jshint esversion: 11 */
 
 import { ProbeAPI } from './probeapi.js';
 
@@ -111,12 +111,11 @@ async function setupNotebook(host, name) {
         window.initialNotebookContent = await response.text();			
 
         /* Async module load to ensure we have loaded the initial notebook markdown above */
-        import('../node_modules/starboard-notebook/dist/starboard-notebook.js').then(() => {
-                registerStarboardShellCellType();
+        await import('../node_modules/starboard-notebook/dist/starboard-notebook.js');
+        registerStarboardShellCellType();
 
-                $('#notebook-name').on('change', reloadNotebook);
-                $('#notebook-host').on('change', reloadNotebook);
-        });
+        $('#notebook-name').on('change', reloadNotebook);
+        $('#notebook-host').on('change', reloadNotebook);
 }
 
 export { setupNotebook };

frontend/notebooks/arp.md

@@ -3,7 +3,7 @@
 
 ### Kernel Settings
 
-Check wether ARP ignoring is active. If you want ARP resolving the `arp_ignore` value should be 1
+Check whether ARP resolving is enabled: the `arp_ignore` setting should be 0
 # %% [shell]
 sysctl net.ipv4.conf.all.arp_ignore
 # %% [markdown]
@@ -22,20 +22,10 @@ While you can query settings per network interface via `sysctl` too it’s easie
 # %% [shell]
 ip ntable show 
 # %% [markdown]
-### Clear Cache
-
-To clear the complete cache run
-# %% [shell]
-ip -s -s neigh flush all
-# %% [markdown]
-You can also run `arp -d `. To delete individual items run:
-# %% [shell]
-arp -d <ip>
-# %% [markdown]
 
 ### Show Cache
 
-Print ARP cache with `ip neigh`
+Print with
 # %% [shell]
 ip neigh
 # %% [markdown]
@@ -46,6 +36,17 @@ Or if ARP tools are installed print ARP cache with `arp -a` or `arp -n` for tabl
 # %% [shell]
 arp -a
 # %% [markdown]
+
+### Clear Cache
+
+To clear the complete cache run
+# %% [shell]
+ip -s -s neigh flush all
+# %% [markdown]
+You can also run `arp -d `. To delete individual items run:
+# %% [shell]
+arp -d <ip>
+# %% [markdown]
 ### Further Reading
 
 * <https://www.baeldung.com/linux/arp-settings>

frontend/notebooks/systemd.md

@@ -5,4 +5,8 @@
 Failed systemd units
 
 # %% [shell]
-systemctl --failed
+systemctl --failed
+# %% [markdown]
+Status for a specific unit
+# %% [shell]
+systemctl status dbus

frontend/package.json

@@ -18,6 +18,6 @@
     },
     "scripts": {
         "test": "jshint worker.js js/*.js js/renderer/*.js",
-        "start": "python3 -m http.server"
+        "start": "npx serve -S"
     }
 }

frontend/worker.js

@@ -1,18 +1,35 @@
+// vim: set ts=4 sw=4:
+/* jshint esversion: 6 */
 
 var cacheName = 'wurmterm';
 var filesToCache = [
+  '/node_modules/jquery/dist/jquery.min.js',
+  '/node_modules/mermaid/dist/mermaid.min.js',
+  '/node_modules/starboard-notebook/dist/starboard-notebook.js',
+  '/node_modules/starboard-notebook/dist/starboard-notebook.css',
+  '/node_modules/starboard-notebook/dist/bootstrap-icons.woff2',
+  '/node_modules/starboard-notebook/dist/inter.var.woff2',
+
+  // additional starboard stuff that cannot be served from subpath
+  '/babel-precompile.chunk.js',
+  '/codemirrorEditor.chunk.js',
+  '/codemirrorHighlight.chunk.js',
+  '/console-output.chunk.js',
+
   '/',
   '/index.html',
-  '/css/styles.css',
-  'starboard-notebook.css',
+  '/css/styles.css',  
   '/js/app.js',
   '/js/notebook.js',
   '/js/probeapi.js',
   '/js/settings.js',
   '/js/renderer/netmap.js',
   '/js/renderer/perf-flamegraph.js',
-  '/js/lib/jquery.min.js',
-  '/js/lib/mermaid.min.js'
+
+  '/notebooks/default.md',
+  '/notebooks/arp.md',
+  '/notebooks/systemd.md',
+  'default.json'
 ];
 
 /* Start the service worker and cache all of the app's content */
@@ -26,9 +43,27 @@ self.addEventListener('install', function(e) {
 
 /* Serve cached content when offline */
 self.addEventListener('fetch', function(e) {
-  if(e.request.url.match(/\.(html|js|css)$/)) {
+
+  // https://stackoverflow.com/questions/35809653/ignore-query-params-in-service-worker-requests
+  const url = new URL(e.request.url);
+  url.search = '';
+  url.fragment = '';
+
+  let cleanRequest = new Request(url, {
+    method: e.request.method,
+    headers: e.request.headers,
+    credentials: e.request.credentials,
+    cache: e.request.cache,
+    redirect: e.request.redirect,
+    referrer: e.request.referrer,
+    integrity: e.request.integrity,
+  });
+
+  console.log(cleanRequest);
+
+  if(url.pathname.match(/(^\/$|\.(html|js|css|png|woff2|json|md)$)/)) {
     e.respondWith(
-      caches.match(e.request).then(function(response) {
+      caches.match(cleanRequest).then(function(response) {
         return response || fetch(e.request);
       })
     );