wip: 建设pwa

packages/www/public/index.html

@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="manifest" href="<%= BASE_URL %>manifest.json">
     <title>正则大全</title>
     <!-- 百度统计 -->
     <script>
@@ -23,6 +24,7 @@
         :root {
             --primary: #42b983;
         }
+
         * {
             padding: 0;
             margin: 0;
@@ -56,12 +58,16 @@
                 transform: rotate(360deg);
             }
         }
+
         .loading {
             animation: rotate 1s infinite linear;
             margin: 0;
             padding: 0;
             position: fixed;
-            top:0;left:0;right: 0;bottom:0;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
             margin: auto;
             display: block;
             width: 100px;

packages/www/public/manifest.json

@@ -0,0 +1,15 @@
+{
+    "short_name": "any-rule",
+    "name": "正则大全",
+    "icons": [
+        {
+            "src": "/any-rule/icon.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        }
+    ],
+    "background_color": "#2196F3",
+    "theme_color": "#2196F3",
+    "display": "standalone",
+    "start_url": "/any-rule"
+}

packages/www/src/main.js

@@ -3,6 +3,12 @@ import App from './App.vue'
 
 Vue.config.productionTip = false
 
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+        navigator.serviceWorker.register('./sw.js');
+    });
+}
+
 new Vue({
     render: h => h(App),
 }).$mount('#app')