fix workbox

adnanfajlur · Apr 9, 2018 · ef6a384 · ef6a384
1 parent 9d2e467
commit ef6a384
Show file tree

Hide file tree

Showing 9 changed files with 798 additions and 45 deletions.
diff --git a/firebase.json b/firebase.json
@@ -11,6 +11,24 @@
         "source": "**",
         "destination": "/index.html"
       }
+    ],
+    "headers": [
+      {
+        "source" : "**/*.@(jpg|jpeg|gif|png|ico)",
+        "headers" : [ {
+          "key" : "Cache-Control",
+          "value" : "max-age=7200"
+        }]
+      },
+      {
+        "source" : "sw.js",
+        "headers" : [
+          {
+            "key" : "Cache-Control",
+            "value" : "max-age=0, no-cache, no-store, must-revalidate"
+          }
+        ]
+      }
     ]
   }
 }
diff --git a/package.json b/package.json
@@ -6,9 +6,15 @@
   "dependencies": {
   },
   "devDependencies": {
-    "workbox-cli": "^3.0.1"
+    "workbox-cli": "^3.0.1",
+    "workbox-build": "3.0.1",
+    "superstatic": "5.0.1"
   },
   "scripts": {
+    "dev": "superstatic",
+    "build": "workbox generateSW ./workbox-config.js",
+    "serve": "yarn build && superstatic",
+    "deploy": "yarn build && firebase deploy",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

diff --git a/src-sw.js b/src-sw.js
diff --git a/src/img/icon/coffe-512.png b/src/img/icon/coffe-512.png
diff --git a/src/index.html b/src/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>PVHNPWA</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
     <link rel='shortcut icon' type='image/x-icon' href='./img/icon/favicon.ico' />
+    <meta name="description" content="HNPWA with pure js, es7, and workbox"/>
+    <link rel="manifest" href="./other/manifest.json" />
+    <meta name="theme-color" content="#12498C" />
     <style>
       body {
         margin: 0;
@@ -16,7 +19,7 @@
         color: #000;
       }
       .wrapAppbar {
-        background: #F9690E;
+        background: #1E824C;
         min-height: 45px;
         position: fixed;
         width: 100vw;
@@ -100,22 +103,24 @@
     </style>
   </head>
   <body>
-    <div class="wrapAppbar">
-      <div class="appbar">
-        <img src="./img/icon/coffe-32.png">
-        <div class="linkMenu">
-          <p id="link" onclick="changeUrl('/?page=1')">Top</p>
-          <p id="linknews" onclick="changeUrl('/news?page=1')">News</p>
-          <p id="linkshow" onclick="changeUrl('/show?page=1')">Show</p>
-          <p id="linkask" onclick="changeUrl('/ask?page=1')">Ask</p>
-          <p id="linkjobs" onclick="changeUrl('/jobs?page=1')">Jobs</p>
+    <main>
+      <div class="wrapAppbar">
+        <div class="appbar">
+          <img src="./img/icon/coffe-32.png" alt="coffe">
+          <div class="linkMenu">
+            <p id="link" onclick="changeUrl('/?page=1')">Top</p>
+            <p id="linknews" onclick="changeUrl('/news?page=1')">News</p>
+            <p id="linkshow" onclick="changeUrl('/show?page=1')">Show</p>
+            <p id="linkask" onclick="changeUrl('/ask?page=1')">Ask</p>
+            <p id="linkjobs" onclick="changeUrl('/jobs?page=1')">Jobs</p>
+          </div>
+        </div>
+        <div id="pagination" class="pagination">
         </div>
       </div>
-      <div id="pagination" class="pagination">
+      <div id="content">
       </div>
-    </div>
-    <div id="content">
-    </div>
+    </main>
     <script src="/js/renderDom.js" type="module"></script>
     <script src="/js/app.js" type="text/javascript"></script>
   </body>

diff --git a/src/other/manifest.json b/src/other/manifest.json
@@ -0,0 +1,16 @@
+{
+  "name": "PVHNPWA",
+  "short_name": "PVHNPWA",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "../icon/coffe-512",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#F5F5F5",
+  "theme_color": "#12498C"
+}
diff --git a/src/sw.js b/src/sw.js
@@ -1,20 +1,39 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
 
-importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.0.1/workbox-sw.js");
 
-console.log('this is my custom service worker');
-
-workbox.precaching.precacheAndRoute([
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [
   {
     "url": "img/icon/coffe-32.png",
     "revision": "3e0951a9fdde86a8172867a189eb404c"
   },
+  {
+    "url": "img/icon/coffe-512.png",
+    "revision": "4cd3b5a1f286b552d4c219d705bd749d"
+  },
   {
     "url": "img/icon/favicon.ico",
     "revision": "811544eeac820d3eca1f54448e79fee9"
   },
   {
     "url": "index.html",
-    "revision": "1d2d4ce99fd817d0abd2db3e569a702e"
+    "revision": "a2584d0dacd0d6f76ee03fbe6cbb506f"
   },
   {
     "url": "js/app.js",
@@ -27,5 +46,17 @@ workbox.precaching.precacheAndRoute([
   {
     "url": "js/renderDom.js",
     "revision": "8bc43853925caacc59f7f3fab634fee4"
+  },
+  {
+    "url": "other/manifest.json",
+    "revision": "c95966b16d7f270c22908636d6fc3268"
+  },
+  {
+    "url": "/",
+    "revision": "cf4972201659ebad22fd7f7871bd5225"
   }
-]);
+].concat(self.__precacheManifest || []);
+workbox.precaching.suppressWarnings();
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute("/");
diff --git a/workbox-config.js b/workbox-config.js
@@ -1,8 +1,12 @@
 module.exports = {
-  "globDirectory": "src/",
+  globDirectory: './src',
   "globPatterns": [
-    "**/*.{png,xml,ico,svg,webmanifest,html,js}"
+    "**/*.{png,ico,html,js,json}"
   ],
-  "swDest": "src/sw.js",
-  "swSrc": "src-sw.js"
+  globIgnores: ['**/sw.js'],
+  swDest: './src/sw.js',
+  navigateFallback: '/',
+  templatedUrls: {
+    '/': ['index.html']
+  },
 };