add pwacompat

Author: huygn

README.md

@@ -3,7 +3,7 @@
 > React template for web app, powered by [Poi](https://poi.js.org/).
 
 - [x] [prettier](https://github.com/prettier/prettier) + eslint
-- [x] PWA support (by [offline-plugin](https://github.com/NekR/offline-plugin))
+- [x] PWA support (by [offline-plugin](https://github.com/NekR/offline-plugin) & [pwacompat](https://github.com/GoogleChromeLabs/pwacompat))
 - [x] [TailwindCSS](https://tailwindcss.com/) & SASS
 - [x] Routing & code splitting (by [curi](https://github.com/pshrmn/curi))
 

template/index.ejs

@@ -9,7 +9,11 @@
 
     <% if (pwa) { %>
     <link rel="manifest" href="<%%= htmlWebpackPlugin.files.publicPath %%>manifest.json">
-    <meta name="theme-color" content="#ffffff">
+    <script
+      async
+      src="https://cdn.rawgit.com/GoogleChrome/pwacompat/v2.0.2/pwacompat.min.js"
+      integrity="sha384-Hed93irwedHCADsxBJAVmlSMiqpE9BIQPp1XK7tqJh5olTEJTCJnlE7wRU3IDOz9"
+      crossorigin="anonymous"></script>
     <% } %>
 
     <%% if (htmlWebpackPlugin.options.description) { %%>

template/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "dev": "poi",
     "build": "poi build",
+    "serve": "serve dist -l 8000",
     "lint": "eslint --ext .js,.jsx --ignore-path .gitignore .",
     "lint:fix": "eslint --fix --ext .js,.jsx --ignore-path .gitignore ."
   },
@@ -37,7 +38,8 @@
     "purgecss-webpack-plugin": "^0.20.1",
     "purgecss-whitelister": "^1.1.3",
     "react-hot-loader": "^4.2.0",
-    "sass-loader": "^6.0.7"<% if(tailwindcss) { %>,
+    "sass-loader": "^6.0.7",
+    "serve": "^7.2.0"<% if(tailwindcss) { %>,
     "tailwindcss": "^0.5.3"<% } %>
   },
   "resolutions": {

template/static/favicon.ico

@@ -1,12 +1,18 @@
 {
   "name": "<%= name %>",
   "short_name": "<%= name %>",
-  "icons": [{
-    "src": "favicon.ico",
-    "sizes": "64x64 32x32 24x24 16x16",
-    "type": "image/x-icon"
-  }],
-  "start_url": "./",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo-128.png",
+      "sizes": "128x128"
+    }
+  ],
+  "start_url": "./?homescreen=true",
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "orientation": "portrait",