feat: PWA Update Notification

reuixiy · Sep 8, 2019 · 1998160 · 1998160
1 parent 48a337b
commit 1998160
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 9 deletions.
diff --git a/i18n/en-us.toml b/i18n/en-us.toml
@@ -38,6 +38,12 @@ other = "Load Comments?"
 [fofLinkText]
 other = "Take Me Home"
 
+[serviceWorkerUpdatedText]
+other = "New Update Available"
+
+[serviceWorkerUpdatedAction]
+other = "Refresh"
+
 
 # Months
 # Used for `i18nMonth`

diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
@@ -38,6 +38,12 @@ other = "加载评论"
 [fofLinkText]
 other = "送我回主页"
 
+[serviceWorkerUpdatedText]
+other = "已更新最新版本"
+
+[serviceWorkerUpdatedAction]
+other = "点击刷新"
+
 
 [january]
 other = "一月"

diff --git a/layouts/partials/script.html b/layouts/partials/script.html
@@ -91,12 +91,4 @@
     {{ end }}
 {{ end }}
 
-{{ if and .Site.Params.enableServiceWorker (eq hugo.Environment "production") }}
-    <script>
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', () => {
-                navigator.serviceWorker.register('/sw.js');
-            });
-        }
-    </script>
-{{ end }}
+{{ partial "third-party/service-worker.html" . }}
diff --git a/layouts/partials/third-party/service-worker.html b/layouts/partials/third-party/service-worker.html
@@ -0,0 +1,68 @@
+{{ if and .Site.Params.enableServiceWorker (eq hugo.Environment "production") }}
+    <script type="module" data-no-instant>
+        import {Workbox} from 'https://cdn.jsdelivr.net/npm/workbox-cdn@4.3.1/workbox/workbox-window.prod.mjs';
+
+        if ('serviceWorker' in navigator) {
+            const wb = new Workbox('/sw.js');
+
+            wb.addEventListener('activated', (event) => {
+                if (event.isUpdate) {
+                    appRefresh ({
+                        text: '{{ i18n "serviceWorkerUpdatedText" }}',
+                        action: '{{ i18n "serviceWorkerUpdatedAction" }}',
+                        callback: () => location.reload()
+                    })
+                }
+            });
+
+            wb.register();
+        }
+
+        async function appRefresh({text, action, callback}={}) {
+            let themeColor = document.querySelector('meta[name=theme-color]');
+            let dom = document.createElement('div');
+
+            themeColor && (themeColor.content = '#000');
+
+            dom.innerHTML = `
+                <style>
+                    .app-refresh {
+                        background: #000;
+                        height: 0;
+                        line-height: 3em;
+                        overflow: hidden;
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        z-index: 42;
+                        padding: 0 1em;
+                        transition: all .3s ease;
+                    }
+                    .app-refresh-wrap {
+                        display: flex;
+                        color: #fff;
+                    }
+                    .app-refresh-wrap label {
+                        flex: 1;
+                    }
+                    .app-refresh-show {
+                        height: 3em;
+                    }
+                </style>
+                <div class="app-refresh" id="app-refresh">
+                    <div class="app-refresh-wrap" onclick="(${callback})()">
+                        <label>${text}</label>
+                        <span>${action}</span>
+                    </div>
+                </div>
+            `;
+
+            document.body.appendChild(dom);
+
+            setTimeout(function() {
+                document.getElementById('app-refresh').className += ' app-refresh-show';
+            }, 16);
+        }
+    </script>
+{{ end }}