From 394e60ee956063cf1a61fcb21455b94b4400b06a Mon Sep 17 00:00:00 2001
From: Tobias Berger <tobi.berger13@gmail.com>
Date: Tue, 5 Oct 2021 12:53:14 +0200
Subject: [PATCH] PWA

---
 .gitignore                |   3 +-
 package.json              |   7 ++--
 public/index.html         |  17 ++++++++++
 public/manifest.json      |  26 +++++++++++++++
 public/maskable_icon.png  | Bin 0 -> 505 bytes
 pwa.rollup.config.mjs     |  20 ++++++++++++
 rollup.config.mjs         |   2 ++
 src/pwa/service-worker.ts |  65 ++++++++++++++++++++++++++++++++++++++
 src/pwa/tsconfig.json     |   7 ++++
 tsconfig.json             |   8 ++---
 10 files changed, 146 insertions(+), 9 deletions(-)
 create mode 100644 public/manifest.json
 create mode 100644 public/maskable_icon.png
 create mode 100644 pwa.rollup.config.mjs
 create mode 100644 src/pwa/service-worker.ts
 create mode 100644 src/pwa/tsconfig.json

diff --git a/.gitignore b/.gitignore
index da93220..affbdc8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
 /node_modules/
 /public/build/
-
-.DS_Store
+/public/service-worker.js
diff --git a/package.json b/package.json
index 978b090..be5bc0c 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,11 @@
   "homepage": "https://shark.tobot.dev/",
   "scripts": {
     "postinstall": "yarn simple-git-hooks",
-    "build": "rollup -c rollup.config.mjs",
-    "dev": "yarn build -w",
+    "build": "yarn build:game && yarn build:pwa",
+    "build:game": "rollup -c rollup.config.mjs",
+    "build:pwa": "rollup -c pwa.rollup.config.mjs",
+    "dev": "yarn build:game -w",
+    "dev:pwa": "yarn build:pwa -w",
     "start": "sirv public --no-clear",
     "preview": "yarn build && yarn start",
     "check": "svelte-check --tsconfig ./tsconfig.json",
diff --git a/public/index.html b/public/index.html
index f709553..200714e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,6 +36,7 @@
     <link rel="image_src" href="https://rewrite.shark.tobot.dev/sharkgame.png" />
     <link rel="apple-touch-icon" href="https://rewrite.shark.tobot.dev/sharkgame.png" />
 
+    <link rel="manifest" href="/manifest.json" />
     <link rel="alternate" type="application/json+oembed" href="/oEmbed.json" />
 
     <!-- This loads the actual game -->
@@ -81,5 +82,21 @@
                             '-'`                 </pre
       >
     </noscript>
+    <script>
+      if ("serviceWorker" in navigator) {
+        window.addEventListener("load", () => {
+          navigator.serviceWorker
+            .register("service-worker.js")
+            .then((registration) => {
+              console.debug("Registered ServiceWorker");
+            })
+            .catch((err) => {
+              console.error("ServiceWorker registration failed", err);
+            });
+        });
+      } else {
+        console.warn("ServiceWorker not supported.");
+      }
+    </script>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..e3e53a8
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,26 @@
+{
+  "name": "Shark Game",
+  "short_name": "Sharg",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "sharkgame.png",
+      "sizes": "200x200",
+      "type": "image/png"
+    },
+    {
+      "purpose": "maskable",
+      "src": "maskable_icon.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#536892",
+  "theme_color": "#2e4372"
+}
diff --git a/public/maskable_icon.png b/public/maskable_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..098c76ae154197681ad5b585e31a7d05123c7ab9
GIT binary patch
literal 505
zcmV<V0S5kwP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$vq?ljR9Hu2bm{v4pJ4z2<ER5hLtr!nhD`|UE@fbF?IyiIA-WvEXTd7or3_)8
zqZwc{Db66;0fY?2W_j`|H-@=kyYOly%K;$E1T&)X206&`XZP+fY_GUSeFs$CC}c1&
zHGw+<J$hi4-+lLv;a1lN>No)8YZ%x$cOiqgo;KJKptwf|Fb8aU_nd*X>pSHRfLVUw
z^cjZp8#aOsGz{>Ehr$X|Hxx@iK~IeDL7Iq410WxPeEjm#Rj@@M3qT;TwHX`@?`JG!
zm|tBB7L!s^0n>-ioFW+fL_5H<LkVs$%&Q<rfE<7fV2%KZ5fl7GJ3y^WfI(SE2*nYg
z5CH*DI)H(i%xo|dq?W1<02zwxh=|j>81^R@qWIo%Za+9%{x0KW&}Lu<JAzOaBsv5@
z3PA}GmI!NqykwZGWsTy1<ZDM6tQx+8#Xyem6Osh82|0qOL<q7Rl=WbV55;CA4k%54
zvLz{@K+plmmcx7lvH%;%FtKHDPmV`%1jPjrsMG`HeL_JAau6uDfXat9jedAkP^BQk
v739<qCm03PumqnOqYfAifzc2c@DKn19Jvdyg^2Ht00000NkvXXu0mjf_#4Gy

literal 0
HcmV?d00001

diff --git a/pwa.rollup.config.mjs b/pwa.rollup.config.mjs
new file mode 100644
index 0000000..27ba2a0
--- /dev/null
+++ b/pwa.rollup.config.mjs
@@ -0,0 +1,20 @@
+import typescript from "@rollup/plugin-typescript";
+import { terser } from "rollup-plugin-terser";
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+  input: "src/pwa/service-worker.ts",
+  output: {
+    file: "public/service-worker.js",
+    preferConst: true,
+    strict: true,
+  },
+  plugins: [
+    typescript({ sourceMap: false, include: "**/service-worker.ts", lib: ["WebWorker"] }),
+    production && terser({ output: { comments: false } }),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 78ae1c8..47523be 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -42,6 +42,7 @@ export default {
     externalLiveBindings: false,
     preferConst: true,
     strict: true,
+    compact: production,
   },
   plugins: [
     // Svelte adds "stdin" to the sourceMap
@@ -79,6 +80,7 @@ export default {
     typescript({
       sourceMap: true,
       inlineSources: true,
+      exclude: ["node_modules/*", "public/*", "**/service-worker.ts"],
     }),
 
     // In dev mode, call `yarn start` once
diff --git a/src/pwa/service-worker.ts b/src/pwa/service-worker.ts
new file mode 100644
index 0000000..42c7353
--- /dev/null
+++ b/src/pwa/service-worker.ts
@@ -0,0 +1,65 @@
+const CACHE_NAME = "sharg-static-cache";
+const CACHE_VERSION = "v0.0.1";
+const STATIC_CACHE_NAME = CACHE_NAME + "-" + CACHE_VERSION;
+
+const FILES_TO_CACHE = ["/", "/index.html", "/build/bundle.js", "/build/bundle.css", "/favicon.png"];
+
+const globalScope = self as WorkerGlobalScope as ServiceWorkerGlobalScope;
+
+globalScope.addEventListener("install", (event) => {
+  console.debug("[ServiceWorker] Install");
+
+  event.waitUntil(
+    caches.open(STATIC_CACHE_NAME).then((cache) => {
+      console.debug("[ServiceWorker] Pre-caching offline page");
+      return cache.addAll(FILES_TO_CACHE);
+    })
+  );
+});
+
+globalScope.addEventListener("activate", (evt) => {
+  console.log("[ServiceWorker] Activate");
+  // Remove previous cached data from disk.
+  evt.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(
+        keyList.map((key) => {
+          if (key.startsWith(CACHE_NAME) && key !== STATIC_CACHE_NAME) {
+            console.log("[ServiceWorker] Removing old cache", key);
+            return caches.delete(key);
+          }
+        })
+      );
+    })
+  );
+
+  globalScope.clients.claim();
+});
+
+globalScope.addEventListener("fetch", (event) => {
+  console.debug("[ServiceWorker] Fetch", event.request.url);
+
+  function getFromFetch(cache: Cache) {
+    console.debug("getFromFetch");
+    return fetch(event.request).then((response) => {
+      cache.put(event.request.url, response.clone());
+      return response;
+    });
+  }
+
+  async function getFromCache() {
+    const cache = await caches.open(STATIC_CACHE_NAME);
+    const cached = await cache.match(event.request);
+    if (cached !== undefined) {
+      return cached;
+    }
+    try {
+      return await getFromFetch(cache);
+    } catch (e) {
+      console.error(e);
+      return Response.error();
+    }
+  }
+
+  event.respondWith(getFromCache());
+});
diff --git a/src/pwa/tsconfig.json b/src/pwa/tsconfig.json
new file mode 100644
index 0000000..db1fd96
--- /dev/null
+++ b/src/pwa/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "target": "es2021",
+  "include": ["service-worker.ts"],
+  "compilerOptions": {
+    "lib": ["WebWorker"]
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index f9eac3a..4e10601 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,10 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
-
   "target": "es2021",
-
   "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
-
+  "exclude": ["src/service-worker.ts"],
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "isolatedModules": false
   }
 }