Add a service worker, manifest and logo

06028668 · Nayeem Rahman · Nayeem Rahman · a905e305 · 06028668 · 06028668
Commit 06028668 authored 5 years ago by Nayeem Rahman Committed by Nayeem Rahman 5 years ago
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,22 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <link rel="manifest" href="manifest.json">
+    <link rel="shortcut icon" href="logo.png">
+    <script>
+      if (navigator.serviceWorker) {
+        navigator.serviceWorker
+          .register("service-worker.js")
+          .then(
+            (registration) =>
+              console.log(
+                `Service worker registered on scope ${registration.scope}`,
+              ),
+            (reason) =>
+              console.log(`Service worker failed to register ~ ${reason}`),
+          )
+      }
+    </script>
  </head>
  <body>
    <div>

--- a/public/logo.png
+++ b/public/logo.png
--- a/public/manifest.json
+++ b/public/manifest.json
+{
+  "short_name": "Drawing App",
+  "name": "Drawing App",
+  "icons": [
+    {
+      "src": "/logo.png",
+      "type": "image/png",
+      "sizes": "144x144"
+    }
+  ],
+  "display": "standalone",
+  "start_url": "/index.html"
+}
--- a/public/service-worker.js
+++ b/public/service-worker.js
+self.addEventListener("install", (event) => {
+  console.info("Service worker installed.", event)
+})
+
+self.addEventListener("activate", (event) => {
+  console.info("Service worker activated.", event)
+})
+
+const CACHE_NAME = "APP-V0"
+const FILES_TO_CACHE = [
+  "/index.html",
+  "/js/app.js",
+  "/manifest.json",
+]
+const FILE_ALIASES = new Map([
+  ["/", "/index.html"]
+])
+
+const normalizeUrl = (url) => {
+  const url_ = new URL(url)
+  url_.pathname = url_.pathname.replace(/\/+/g, "/").replace(/\/$/, "")
+  if (FILE_ALIASES.has(url_.pathname)) {
+    url_.pathname = FILE_ALIASES.get(url_.pathname)
+  }
+  return url_.href
+}
+
+self.addEventListener("install", async (event) => {
+  const cache = await caches.open(CACHE_NAME)
+  const additions = cache.addAll(FILES_TO_CACHE)
+  await additions
+  console.info(`Files cached: [\n  ${FILES_TO_CACHE.join(`,\n  `)}\n]`)
+})
+
+self.addEventListener("activate", async (event) => {
+  const oldCacheKeys = (await caches.keys()).filter((key) => key != CACHE_NAME)
+  oldCacheKeys.forEach((key) => caches.delete(key))
+})
+
+
+self.addEventListener("fetch", (event) => {
+  const normalizedUrl = normalizeUrl(event.request.url)
+  let response = fetch(event.request)
+  if (FILES_TO_CACHE.includes(normalizedUrl)) {
+    response = response
+      .then(async (response) => {
+        const cache = await caches.open(CACHE_NAME)
+        await cache.put(normalizedUrl, response.clone())
+        return response
+      })
+      .catch(() => caches.match(normalizedUrl))
+      .catch(e => null)
+  }
+  event.respondWith(
+    fetch(event.request)
+      .then(async (response) => {
+        if (FILES_TO_CACHE.includes(new URL(normalizedUrl).pathname)) {
+          const cache = await caches.open(CACHE_NAME)
+          await cache.put(normalizedUrl, response.clone())
+        }
+        return response
+      })
+      .catch(() => caches.match(normalizedUrl))
+      .catch(e => null)
+  )
+})