add service-worder and fixed few issues

assets/script/script.js

@@ -0,0 +1,9 @@
+import params from '@params'
+
+if (params.environment === 'production') {
+  document.addEventListener('DOMContentLoaded', () => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/service-worker.js')
+    }
+  })
+}

data/socials.yml

@@ -13,7 +13,3 @@
 - item:
     link: http://stackoverflow.com/users/3085470/batbayar
     name: stack-overflow
-
-- item:
-    link: https://facebook.com/baagiidev
-    name: facebook

layouts/partials/head.html

@@ -11,6 +11,7 @@
     content="width=device-width, initial-scale=1, maximum-scale=2" />
 
   <title>{{ $.Site.Title }}</title>
+  <link rel="manifest" href="/manifest.json" />
   <link rel="icon" type="image/png" href="/assets/images/favicon.png" />
   <link
     href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800"

layouts/partials/script.html

@@ -2,5 +2,12 @@
 {{ $bootstrap := resources.GetRemote "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" }}
 {{ $libJS := slice $jquery $bootstrap | resources.Concat "script/libraries.js" | resources.Minify | resources.Fingerprint }}
 <script src="{{ $libJS.Permalink }}"></script>
-{{ $script := resources.Get "script/script.js" | resources.Minify | resources.Fingerprint }}
+
+{{ $script := resources.Get "script/script.js" }}
+{{- $opts := dict
+  "params" (dict "environment" hugo.Environment)
+  "minify" true
+  "fingerprint" true
+-}}
+{{- $script = $script | js.Build $opts -}}
 <script src="{{ $script.Permalink }}"></script>

static/manifest.json

@@ -1,31 +1,42 @@
 {
   "name": "Batbayar Sukhbaatar",
-  "short_name": "Batbayar",
+  "short_name": "Bagi",
   "icons": [
     {
-      "src": "/assets/images/avatar.jpg",
-      "sizes": "128x128",
-      "type": "image/jpeg"
+      "src": "/assets/images/icons/48.png",
+      "sizes": "48x48"
     },
     {
-      "src": "/assets/images/avatar.jpg",
-      "sizes": "144x144",
-      "type": "image/jpeg"
+      "src": "/assets/images/icons/72.png",
+      "sizes": "72x72"
     },
     {
-      "src": "/assets/images/avatar.jpg",
-      "sizes": "152x152",
-      "type": "image/jpeg"
+      "src": "/assets/images/icons/96.png",
+      "sizes": "96x96"
     },
     {
-      "src": "/assets/images/avatar.jpg",
-      "sizes": "192x192",
-      "type": "image/jpeg"
+      "src": "/assets/images/icons/128.png",
+      "sizes": "128x128"
     },
     {
-      "src": "/assets/images/avatar.jpg",
-      "sizes": "256x256",
-      "type": "image/jpeg"
+      "src": "/assets/images/icons/144.png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "/assets/images/icons/152.png",
+      "sizes": "152x152"
+    },
+    {
+      "src": "/assets/images/icons/192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/assets/images/icons/256.png",
+      "sizes": "256x256"
+    },
+    {
+      "src": "/assets/images/icons/512.png",
+      "sizes": "512x512"
     }
   ],
   "start_url": "/",

static/service-worker.js

@@ -0,0 +1,62 @@
+// Set cache version
+const version = '1.0.0'
+const cacheName = `precache-${version}`
+const currentCaches = [cacheName, 'runtime']
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches
+      .open(cacheName)
+      .then((cache) => {
+        return cache.addAll(['./', './index.html'])
+      })
+      .then(self.skipWaiting()),
+  )
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) => {
+        return Promise.all(
+          keys
+            .filter((key) => !currentCaches.includes(cacheName))
+            .map((key) => caches.delete(key)),
+        )
+      })
+      .then(() => self.clients.claim()),
+  )
+})
+
+self.addEventListener('fetch', (event) => {
+  console.log(event.request.url)
+  if (event.request.url.startsWith(self.location.origin)) {
+    event.respondWith(
+      caches.match(event.request).then((cachedResponse) => {
+        if (cachedResponse) {
+          return cachedResponse
+        }
+        return caches.open('runtime').then((cache) => {
+          return fetch(event.request)
+            .then((response) => {
+              return cache.put(event.request, response.clone()).then(() => {
+                return response
+              })
+            })
+            .catch(() => {
+              return caches.open(cacheName).then((cache) => {
+                return cache.match('/offline/')
+              })
+            })
+            .catch(() => {
+              return new Response('Network error', {
+                status: 408,
+                headers: { 'Content-Type': 'text/plain' },
+              })
+            })
+        })
+      }),
+    )
+  }
+})