Add basic PWA offline page

- Remove feed_icons cache because it's causing more problems that it solve.
- Add basic offline mode when using the service worker.
- Starting in Chrome 93, offline mode is going to be a requirement to install the PWA.

https://developer.chrome.com/blog/improved-pwa-offline-detection/#enforcement-starting-chrome-93-august-2021

ui/middleware.go

@@ -142,7 +142,8 @@ func (m *middleware) isPublicRoute(r *http.Request) bool {
 		"webManifest",
 		"robots",
 		"sharedEntry",
-		"healthcheck":
+		"healthcheck",
+		"offline":
 		return true
 	default:
 		return false

ui/offline.go

@@ -0,0 +1,20 @@
+// Copyright 2021 Frédéric Guillot. All rights reserved.
+// Use of this source code is governed by the Apache 2.0
+// license that can be found in the LICENSE file.
+
+package ui // import "miniflux.app/ui"
+
+import (
+	"net/http"
+
+	"miniflux.app/http/request"
+	"miniflux.app/http/response/html"
+	"miniflux.app/ui/session"
+	"miniflux.app/ui/view"
+)
+
+func (h *handler) showOfflinePage(w http.ResponseWriter, r *http.Request) {
+	sess := session.New(h.store, request.SessionID(r))
+	view := view.New(h.tpl, r, sess)
+	html.OK(w, r, view.Render("offline"))
+}

ui/static/js/.jshintrc

@@ -1,3 +1,3 @@
 {
-  "esversion": 6
+  "esversion": 8
 }

ui/static/js/service_worker.js

@@ -1,14 +1,44 @@
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+
+self.addEventListener("install", (event) => {
+    event.waitUntil(
+        (async () => {
+            const cache = await caches.open(CACHE_NAME);
+
+            // Setting {cache: 'reload'} in the new request will ensure that the
+            // response isn't fulfilled from the HTTP cache; i.e., it will be from
+            // the network.
+            await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+        })()
+    );
+
+    // Force the waiting service worker to become the active service worker.
+    self.skipWaiting();
+});
+
 self.addEventListener("fetch", (event) => {
-    if (event.request.url.includes("/feed/icon/")) {
+    // We proxify requests through fetch() only if we are offline because it's slower.
+    if (navigator.onLine === false && event.request.mode === "navigate") {
         event.respondWith(
-            caches.open("feed_icons").then((cache) => {
-                return cache.match(event.request).then((response) => {
-                    return response || fetch(event.request).then((response) => {
-                        cache.put(event.request, response.clone());
-                        return response;
-                    });
-                });
-            })
+            (async () => {
+                try {
+                    // Always try the network first.
+                    const networkResponse = await fetch(event.request);
+                    return networkResponse;
+                } catch (error) {
+                    // catch is only triggered if an exception is thrown, which is likely
+                    // due to a network error.
+                    // If fetch() returns a valid HTTP response with a response code in
+                    // the 4xx or 5xx range, the catch() will NOT be called.
+                    const cache = await caches.open(CACHE_NAME);
+                    const cachedResponse = await cache.match(OFFLINE_URL);
+                    return cachedResponse;
+                }
+            })()
         );
     }
 });

ui/static/static.go

@@ -127,8 +127,7 @@ func GenerateJavascriptBundles() error {
 	}
 
 	var prefixes = map[string]string{
-		"app":            "(function(){'use strict';",
-		"service-worker": "'use strict';",
+		"app": "(function(){'use strict';",
 	}
 
 	var suffixes = map[string]string{

ui/static_javascript.go

@@ -5,12 +5,14 @@
 package ui // import "miniflux.app/ui"
 
 import (
+	"fmt"
 	"net/http"
 	"time"
 
 	"miniflux.app/http/request"
 	"miniflux.app/http/response"
 	"miniflux.app/http/response/html"
+	"miniflux.app/http/route"
 	"miniflux.app/ui/static"
 )
 
@@ -23,8 +25,15 @@ func (h *handler) showJavascript(w http.ResponseWriter, r *http.Request) {
 	}
 
 	response.New(w, r).WithCaching(etag, 48*time.Hour, func(b *response.Builder) {
+		contents := static.JavascriptBundles[filename]
+
+		if filename == "service-worker" {
+			variables := fmt.Sprintf(`const OFFLINE_URL="%s";`, route.Path(h.router, "offline"))
+			contents = append([]byte(variables)[:], contents[:]...)
+		}
+
 		b.WithHeader("Content-Type", "text/javascript; charset=utf-8")
-		b.WithBody(static.JavascriptBundles[filename])
+		b.WithBody(contents)
 		b.Write()
 	})
 }

ui/ui.go

@@ -145,6 +145,9 @@ func Serve(router *mux.Router, store *storage.Storage, pool *worker.Pool) {
 	uiRouter.HandleFunc("/oauth2/{provider}/redirect", handler.oauth2Redirect).Name("oauth2Redirect").Methods(http.MethodGet)
 	uiRouter.HandleFunc("/oauth2/{provider}/callback", handler.oauth2Callback).Name("oauth2Callback").Methods(http.MethodGet)
 
+	// Offline page
+	uiRouter.HandleFunc("/offline", handler.showOfflinePage).Name("offline").Methods(http.MethodGet)
+
 	// Authentication pages.
 	uiRouter.HandleFunc("/login", handler.checkLogin).Name("checkLogin").Methods(http.MethodPost)
 	uiRouter.HandleFunc("/logout", handler.logout).Name("logout").Methods(http.MethodGet)