feat: inject service worker for PWA ✨ #24

nicejade · May 5, 2018 · 44cbd65 · 44cbd65
1 parent ea2ef91
commit 44cbd65
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 164 deletions.
diff --git a/build/load-minified.js b/build/load-minified.js
@@ -0,0 +1,11 @@
+'use strict'
+
+const fs = require('fs')
+const UglifyJS = require('uglify-es')
+
+module.exports = function(filePath) {
+  const code = fs.readFileSync(filePath, 'utf-8')
+  const result = UglifyJS.minify(code)
+  if (result.error) return ''
+  return result.code
+}
diff --git a/build/service-worker-prod.js b/build/service-worker-prod.js
@@ -5,18 +5,18 @@
   // and that the current page is accessed from a secure origin. Using a
   // service worker from an insecure origin will trigger JS console errors.
   const isLocalhost = Boolean(window.location.hostname === 'localhost' ||
-      // [::1] is the IPv6 localhost address.
-      window.location.hostname === '[::1]' ||
-      // 127.0.0.1/8 is considered localhost for IPv4.
-      window.location.hostname.match(
-        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-      )
-    );
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+  );
 
   window.addEventListener('load', function() {
-      if ('serviceWorker' in navigator &&
-          (window.location.protocol === 'https:' || isLocalhost)) {
-        navigator.serviceWorker.register('service-worker.js')
+    if ('serviceWorker' in navigator &&
+      (window.location.protocol === 'https:' || isLocalhost)) {
+      navigator.serviceWorker.register('/service-worker.js')
         .then(function(registration) {
           // updatefound is fired if service-worker.js changes.
           registration.onupdatefound = function() {
@@ -39,7 +39,7 @@
 
                   case 'redundant':
                     throw new Error('The installing ' +
-                                    'service worker became redundant.');
+                      'service worker became redundant.');
 
                   default:
                     // Ignore
@@ -50,6 +50,6 @@
         }).catch(function(e) {
           console.error('Error during service worker registration:', e);
         });
-      }
+    }
   });
 })();
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -11,6 +11,9 @@ const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
+const loadMinified = require('./load-minified')
+
+const PUBLIC_PATH = 'https://nicelinks.site/'
 
 const env = process.env.NODE_ENV === 'testing'
   ? require('../config/test.env')
@@ -85,7 +88,7 @@ const webpackConfig = merge(baseWebpackConfig, {
       },
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency',
-      serviceWorkerLoader: `<script>${loadMinified(path.join(__dirname,
+      serviceWorkerLoader: `<script type="text/javascript">${loadMinified(path.join(__dirname,
         './service-worker-prod.js'))}</script>`
     }),
     // split vendor js into its own file
@@ -110,10 +113,11 @@ const webpackConfig = merge(baseWebpackConfig, {
     }),
     // service worker caching
     new SWPrecacheWebpackPlugin({
-      cacheId: 'my-vue-app',
+      cacheId: 'nicelinksapp',
       filename: 'service-worker.js',
       staticFileGlobs: ['dist/**/*.{js,html,css}'],
       minify: true,
+      navigateFallback: PUBLIC_PATH + 'index.html',
       stripPrefix: 'dist/'
     }),
     new LodashModuleReplacementPlugin()

diff --git a/index.ejs b/index.ejs
@@ -43,15 +43,16 @@
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <script  src="<%= webpackConfig.output.publicPath %>static/js/vendor.dll.js?v04-23"></script>
+    <script src="<%= webpackConfig.output.publicPath %>static/js/vendor.dll.js?v05-05"></script>
     <!--[if lt IE 9]>
       <script async src="<%= webpackConfig.output.publicPath %>static/js/browsermodal.js"></script>
     <![endif]-->
     <!-- Todo: only include in production -->
     <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
     <!-- built files will be auto injected -->
+    </script>
   </body>
-  <script>
+  <script type="text/javascript">
     console.log('“倾心缔造，痴心为你”：%c倾城之链', 'font-weight: 600;color: #2c85ff')
   </script>
 </html>
diff --git a/package.json b/package.json
@@ -124,7 +124,8 @@
     "svgo": "^0.7.2",
     "svgo-loader": "^1.1.2",
     "svgxuse": "^1.2.2",
-    "sw-precache-webpack-plugin": "^0.11.4",
+    "sw-precache-webpack-plugin": "^0.11.5",
+    "uglify-es": "^3.3.9",
     "url-loader": "^0.5.7",
     "validate-commit-msg": "^2.12.1",
     "vue-loader": "^11.0.0",

diff --git a/src/components/EditDialog.vue b/src/components/EditDialog.vue
@@ -145,7 +145,8 @@ export default {
         classify: '',
         theme: '',
         tags: [],
-        review: ''
+        review: '',
+        active: false
       },
       themeList: [],
       tagsList: $config.tags,