Add PWA support

aykutkardas · Oct 10, 2021 · de0d80e · de0d80e
1 parent 5a09f2b
commit de0d80e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 32 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,49 +5,31 @@
   <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#338152">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#338152">
   <meta name="description" content="Web site created using create-react-app" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZNDXNCMG6E"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag() { dataLayer.push(arguments); }
     gtag('js', new Date());
-
     gtag('config', 'G-ZNDXNCMG6E');
   </script>
-  <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
   <title>Regex Learn</title>
   <meta name="description" content="Learn ReGex, step by step, zero to advanced. Test and Share RegEx">
 </head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
-  <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('./sw.js');
+    };
+  </script>
 </body>
 
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,9 +1,14 @@
 {
   "short_name": "Regex Learn",
   "name": "Regex Learn",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "theme_color": "#338152",
+  "background_color": "#282c34",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.svg",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
@@ -17,9 +22,5 @@
       "type": "image/png",
       "sizes": "512x512"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#5ff59b",
-  "background_color": "#282c34"
+  ]
 }
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,36 @@
+/* eslint-disable no-restricted-globals */
+
+// Files to cache
+const cacheName = "regexlearn-pwa-v1";
+const appShellFiles = ["/", "/static/"];
+
+const contentToCache = appShellFiles;
+
+// Installing Service Worker
+self.addEventListener("install", (e) => {
+  console.log("[Service Worker] Install");
+  e.waitUntil(
+    (async () => {
+      const cache = await caches.open(cacheName);
+      console.log("[Service Worker] Caching all: app shell and content");
+      await cache.addAll(contentToCache);
+    })()
+  );
+});
+
+// Fetching content using Service Worker
+self.addEventListener("fetch", (e) => {
+  e.respondWith(
+    (async () => {
+      const r = await caches.match(e.request);
+      console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
+      if (r) return r;
+      const response = await fetch(e.request);
+      const cache = await caches.open(cacheName);
+      console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
+      if (!/^https?:$/i.test(new URL(e.request.url).protocol)) return null;
+      cache.put(e.request, response.clone());
+      return response;
+    })()
+  );
+});