Merge pull request #2515 from thelounge/xpaw/transparent-sw-cache

Network-first service worker caches

client/css/bootstrap.css

@@ -44,7 +44,7 @@ audio:not([controls]) {
 }
 [hidden],
 template {
-  display: none;
+  display: none !important;
 }
 a {
   background: transparent;

client/js/loading-error-handlers.js

@@ -60,4 +60,9 @@
 	};
 
 	window.addEventListener("error", window.g_LoungeErrorHandler);
+
+	// Trigger early service worker registration
+	if ("serviceWorker" in navigator) {
+		navigator.serviceWorker.register("service-worker.js");
+	}
 })();

client/js/socket-events/configuration.js

@@ -8,6 +8,18 @@ const webpush = require("../webpush");
 const connect = $("#connect");
 const utils = require("../utils");
 
+window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
+	$("#webapp-install-button")
+		.on("click", function() {
+			if (installPromptEvent && installPromptEvent.prompt) {
+				installPromptEvent.prompt();
+			}
+
+			$(this).prop("hidden", true);
+		})
+		.prop("hidden", false);
+});
+
 socket.on("configuration", function(data) {
 	if (options.initialized) {
 		// Likely a reconnect, request sync for possibly missed settings.

client/service-worker.js

@@ -2,6 +2,62 @@
 /* global clients */
 "use strict";
 
+const excludedPathsFromCache = /^(?:socket\.io|storage|uploads|cdn-cgi)\//;
+
+self.addEventListener("install", function() {
+	self.skipWaiting();
+});
+
+self.addEventListener("activate", function(event) {
+	event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", function(event) {
+	if (event.request.method !== "GET") {
+		return;
+	}
+
+	const url = event.request.url;
+	const scope = self.registration.scope;
+
+	// Skip cross-origin requests
+	if (!url.startsWith(scope)) {
+		return;
+	}
+
+	const path = url.substring(scope.length);
+
+	// Skip ignored paths
+	if (excludedPathsFromCache.test(path)) {
+		return;
+	}
+
+	const uri = new URL(url);
+	uri.hash = "";
+	uri.search = "";
+
+	event.respondWith(networkOrCache(uri));
+});
+
+function networkOrCache(uri) {
+	return caches.open("thelounge").then(function(cache) {
+		// Despite the "no-cache" name, it is a conditional request if proper headers are set
+		return fetch(uri, {cache: "no-cache"})
+			.then(function(response) {
+				if (response.ok) {
+					return cache.put(uri, response.clone()).then(function() {
+						return response;
+					});
+				}
+			})
+			.catch(function() {
+				return cache.match(uri).then(function(matching) {
+					return matching || Promise.reject("request-not-in-cache");
+				});
+			});
+	});
+}
+
 self.addEventListener("message", function(event) {
 	showNotification(event, event.data);
 });

client/views/windows/settings.tpl

@@ -15,6 +15,8 @@
 
 	<div class="row">
 		<div class="col-sm-12">
+			<h2>Native app</h2>
+			<button type="button" class="btn" id="webapp-install-button" hidden>Add The Lounge to Home screen</button>
 			<button type="button" class="btn" id="make-default-client">Open irc:// URLs with The Lounge</button>
 		</div>
 

src/server.js

@@ -39,15 +39,17 @@ module.exports = function() {
 (Node.js ${colors.green(process.versions.node)} on ${colors.green(process.platform)} ${process.arch})`);
 	log.info(`Configuration file: ${colors.green(Helper.getConfigPath())}`);
 
+	const staticOptions = {
+		redirect: false,
+		maxAge: 86400 * 1000,
+	};
+
 	const app = express()
 		.disable("x-powered-by")
 		.use(allRequests)
 		.use(index)
-		.use(express.static("public"))
-		.use("/storage/", express.static(Helper.getStoragePath(), {
-			redirect: false,
-			maxAge: 86400 * 1000,
-		}));
+		.use(express.static(path.join(__dirname, "..", "public"), staticOptions))
+		.use("/storage/", express.static(Helper.getStoragePath(), staticOptions));
 
 	// This route serves *installed themes only*. Local themes are served directly
 	// from the `public/themes/` folder as static assets, without entering this