Adding offline support notification

When all offline files are cached, hnpwa displays a status icon

app/javascript/controllers/service_worker_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["pageSavedNotice", "savingPageNotice"];
+
+  initialize() {
+    if (navigator.serviceWorker) {
+      if (navigator.serviceWorker.controller) {
+        this.stateChange();
+      } else {
+        navigator.serviceWorker
+          .register("/service-worker.js", { scope: "./" })
+          .then(function (reg) {
+            console.log("[Companion]", "Service worker registered!");
+            console.log(reg);
+          });
+        navigator.serviceWorker.addEventListener(
+          "controllerchange",
+          this.controllerChange.bind(this)
+        );
+      }
+    }
+  }
+
+  controllerChange(event) {
+    console.log(
+      '[controllerchange] A "controllerchange" event has happened ' +
+        "within navigator.serviceWorker: ",
+      event
+    );
+    navigator.serviceWorker.controller.addEventListener(
+      "statechange",
+      this.stateChange.bind(this)
+    );
+  }
+
+  stateChange() {
+    let state = navigator.serviceWorker.controller.state;
+    console.log(
+      "[controllerchange][statechange] " + 'A "statechange" has occured: ',
+      navigator.serviceWorker.controller.state,
+      " state: ",
+      state
+    );
+
+    if (state === "activated" || state === "redundant") {
+      this.savingPageNoticeTarget.classList.add("is-hidden");
+      this.pageSavedNoticeTarget.classList.remove("is-hidden");
+    }
+  }
+}

app/javascript/packs/application.js

@@ -7,20 +7,12 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
-require("@rails/ujs").start()
-require("turbolinks").start()
-require("@rails/activestorage").start()
-require("channels")
+require("@rails/ujs").start();
+require("turbolinks").start();
+require("@rails/activestorage").start();
+require("channels");
 
-import "controllers"
+import "controllers";
 
-import LocalTime from "local-time"
-LocalTime.start()
-
-if (navigator.serviceWorker) {
-  navigator.serviceWorker.register('/service-worker.js', { scope: './' })
-    .then(function(reg) {
-      console.log('[Companion]', 'Service worker registered!');
-      console.log(reg);
-    });
-}
+import LocalTime from "local-time";
+LocalTime.start();

app/views/layouts/application.html.erb

@@ -19,6 +19,10 @@
         <a class="navbar-item" href="/">
           <%= image_tag "train_48.png", width: "23px", alt: "Home Page"%>
         </a>
+        <div class="navbar-item" data-controller="service-worker">
+          <%= image_tag "cloud-check.svg", width: "23px", alt: "Webpage saved for offline use", data: { target:"service-worker.pageSavedNotice" }, class: "is-hidden" %>
+          <%= image_tag "cloud-download.svg", width: "23px", alt: "Saving webpage for offline use", data: { target:"service-worker.savingPageNotice" }, class: "" %>
+        </div>
         <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="bulma-navbar.burger" data-action="bulma-navbar#toggle">
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>

app/views/service_worker/service_worker.js.erb

@@ -1,15 +1,33 @@
 var CACHE_VERSION = 'v1';
 var CACHE_NAME = CACHE_VERSION + ':sw-cache-';
+var REQUIRED_FILES = [
+  '<%= asset_pack_path 'application.js' %>',
+  '<%= stylesheet_path 'application.css' %>',
+  '/',
+  '/top',
+  '/new',
+  '/show',
+  '/ask',
+  '/job',
+  '/offline.html',
+  '<%= asset_path 'cloud-check.svg' %>',
+  '<%= asset_path 'cloud-download.svg' %>',
+  '<%= asset_path 'train_48.png' %>',
+  '<%= asset_path 'train_192.png' %>',
+  '<%= asset_path 'train_512.png' %>',
+];
 
 function onInstall(event) {
   console.log('[Serviceworker]', "Installing!", event);
   event.waitUntil(
-    caches.open(CACHE_NAME).then(function prefill(cache) {
-      return cache.addAll([
-        '<%= asset_pack_path 'application.js' %>',
-        '<%= stylesheet_path 'application.css' %>',
-        '/offline.html',
-      ]);
+    caches.open(CACHE_NAME)
+    .then(function prefill(cache) {
+      console.log('[install] Caches opened');
+      return cache.addAll(REQUIRED_FILES);
+    })
+    .then(function() {
+      console.log('[install] All required resources have been cached');
+      return self.skipWaiting();
     })
   );
 }
@@ -30,6 +48,8 @@ function onActivate(event) {
       );
     })
   );
+  console.log('[activate] Claiming ServiceWorker');
+  event.waitUntil(self.clients.claim());
 }
 
 // Borrowed from https://github.com/TalAter/UpUp