update

index.html

@@ -9,14 +9,15 @@
   <meta name="description" content="在线给图片加水印，通过前端canvas给你的个人证件加上水印，防止身份证复印件被盗。纯前端加水印，拒绝上传保证个人信息安全！" />
   <link rel="stylesheet" href="index.css" />
 
+  <link rel="manifest" href="/manifest.json" />
   <script>
-    var _hmt = _hmt || [];
+    // serviceWorker
-    (function () {
+    if ("serviceWorker" in navigator) {
-      var hm = document.createElement("script");
+      navigator.serviceWorker
-      hm.src = "https://hm.baidu.com/hm.js?6aa7d895ff4fe1159c572ae1f12f2ddb";
+        .register("/serviceWorker.js")
-      var s = document.getElementsByTagName("script")[0];
+        .then(res => console.log("service worker registered"))
-      s.parentNode.insertBefore(hm, s);
+        .catch(err => console.log("service worker not registered", err));
-    })();
+    }
   </script>
 
 </head>

manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "在线图片加水印",
+  "short_name": "图片加水印",
+  "theme_color": "#f85758",
+  "background_color": "#f85758",
+  "display": "fullscreen",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "logo72x72.png",
+      "type": "image/png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "logo96x96.png",
+      "type": "image/png",
+      "sizes": "96x96"
+    },
+    {
+      "src": "logo144x144.png",
+      "type": "image/png",
+      "sizes": "144x144"
+    }
+  ]
+}

serviceWorker.js

@@ -0,0 +1,22 @@
+const cacheName = "watermark"; // cache名, 在控制台Application的CaChe下可以看到
+
+// eslint-disable-next-line no-restricted-globals
+self.addEventListener("install", e => {
+  e.waitUntil(
+    caches.open(cacheName).then(cache => {
+      return cache.addAll(["/", "/index.html", "/manifest.json"]);
+    }),
+  );
+});
+
+// eslint-disable-next-line no-restricted-globals
+self.addEventListener("fetch", event => {
+  event.respondWith(
+    caches
+      .open(cacheName)
+      .then(cache => cache.match(event.request, { ignoreSearch: true }))
+      .then(response => {
+        return response || fetch(event.request);
+      }),
+  );
+});