PWA

README.md

@@ -2,10 +2,12 @@
 
 [![Deploy to GitHub Pages](https://github.com/FS-Frost/sql-playground/actions/workflows/main.yml/badge.svg)](https://github.com/FS-Frost/sql-playground/actions/workflows/main.yml)
 
-SQL playground to test queries using [SQLite](https://www.sqlite.org/index.html) on the browser through [WASM](https://webassembly.org/).
+SQL playground to test queries using [SQLite](https://www.sqlite.org/index.html) on the browser through [WASM](https://webassembly.org/), installable as [PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
 
 https://fs-frost.github.io/sql-playground
 
+<img src="public/img/preview.png" alt="Preview" />
+
 ## Built with
 
 -   [Svelte](https://svelte.dev/)

public/index.html

@@ -9,6 +9,7 @@
 
     <base href="/" />
     <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="manifest" href="manifest.json" />
     <link rel="stylesheet" href="global.css" />
     <link rel="stylesheet" href="build/bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
@@ -40,6 +41,26 @@
             link: "https://github.com/FS-Frost/sql-playground",
             sticky: false,
         });
+
+        if ("serviceWorker" in navigator) {
+            window.addEventListener("load", function () {
+                navigator.serviceWorker
+                    .register("js/worker.js")
+                    .then(
+                        function (registration) {
+                            console.log("Worker registration successful", registration.scope);
+                        },
+                        function (err) {
+                            console.log("Worker registration failed", err);
+                        }
+                    )
+                    .catch(function (err) {
+                        console.log(err);
+                    });
+            });
+        } else {
+            console.log("Service Worker is not supported by browser.");
+        }
     </script>
 
     <style>

public/js/worker.js

@@ -0,0 +1,51 @@
+// Flag for enabling cache in production
+var doCache = false;
+
+var CACHE_NAME = "pwa-app-cache";
+
+// Delete old caches
+self.addEventListener("activate", (event) => {
+    const currentCachelist = [CACHE_NAME];
+    event.waitUntil(
+        caches.keys().then((keyList) =>
+            Promise.all(
+                keyList.map((key) => {
+                    if (!currentCachelist.includes(key)) {
+                        return caches.delete(key);
+                    }
+                })
+            )
+        )
+    );
+});
+
+// This triggers when user starts the app
+self.addEventListener("install", function (event) {
+    if (doCache) {
+        event.waitUntil(
+            caches.open(CACHE_NAME).then(function (cache) {
+                fetch("asset-manifest.json")
+                    .then((response) => {
+                        response.json();
+                    })
+                    .then((assets) => {
+                        // We will cache initial page and the main.js
+                        // We could also cache assets like CSS and images
+                        const urlsToCache = ["/", assets["main.js"]];
+                        cache.addAll(urlsToCache);
+                    });
+            })
+        );
+    }
+});
+
+// Here we intercept request and serve up the matching files
+self.addEventListener("fetch", function (event) {
+    if (doCache) {
+        event.respondWith(
+            caches.match(event.request).then(function (response) {
+                return response || fetch(event.request);
+            })
+        );
+    }
+});

public/manifest.json

@@ -0,0 +1,15 @@
+{
+    "short_name": "SQL Playground",
+    "name": "SQL Playground",
+    "icons": [
+        {
+            "src": "favicon.png",
+            "sizes": "512x512 64x64 32x32 24x24 16x16",
+            "type": "image/png"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#003eb3",
+    "background_color": "#ffffff"
+}