Merge pull request #2807 from pixelfed/staging

Staging

public/mix-manifest.json

@@ -4,7 +4,7 @@
     "/js/ace.js": "/js/ace.js?id=11e5550a450fece75c33",
     "/js/activity.js": "/js/activity.js?id=f0812b1955bb467b43dd",
     "/js/admin.js": "/js/admin.js?id=8d48022b71fa67e40d80",
-    "/js/app.js": "/js/app.js?id=9744a4c74374dfb54916",
+    "/js/app.js": "/js/app.js?id=21e5dee579887e5192ab",
     "/css/app.css": "/css/app.css?id=b8654ac6bc3bc7bdc2b0",
     "/css/appdark.css": "/css/appdark.css?id=896508476c4e64509930",
     "/css/admin.css": "/css/admin.css?id=409b537774a11ce7fab1",

public/sw.js

@@ -0,0 +1,45 @@
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+const OFFLINE_URL = "/offline.html";
+
+self.addEventListener("install", (event) => {
+	event.waitUntil(
+		(async () => {
+			const cache = await caches.open(CACHE_NAME);
+			await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+		})()
+	);
+	self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+	event.waitUntil(
+		(async () => {
+			if ("navigationPreload" in self.registration) {
+				await self.registration.navigationPreload.enable();
+			}
+		})()
+	);
+	self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+	if (event.request.mode === "navigate") {
+		event.respondWith(
+			(async () => {
+				try {
+					const preloadResponse = await event.preloadResponse;
+					if (preloadResponse) {
+						return preloadResponse;
+					}
+					const networkResponse = await fetch(event.request);
+					return networkResponse;
+				} catch (error) {
+					const cache = await caches.open(CACHE_NAME);
+					const cachedResponse = await cache.match(OFFLINE_URL);
+					return cachedResponse;
+				}
+			})()
+		);
+	}
+});

resources/assets/js/app.js

@@ -34,6 +34,12 @@ window.App.boot = function() {
 	new Vue({ el: '#content'});
 }
 
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/sw.js");
+  }
+});
+
 window.App.util = {
 	compose: {
 		post: (function() {
@@ -230,4 +236,4 @@ window.App.util = {
 			.attr('width', 34).attr('height', 34);
 	})
 
-};
+};