更新记录

<style>
.app-refresh {
    position: fixed;
    bottom: 2rem;
    left: -22rem
    background: var(--refresh-bg);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    z-index: 99999;
    padding: 1em 2em 1em 12em;
    transition: all 0.3s ease
}

.app-refresh-wrap {
    display: flex;
    color: transparent;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
</style>
<script>
    function showNotification() {
        const added = document.getElementById("added")
        const refresh = document.createElement("div");
        refresh.id = "app-refresh";
        refresh.className = "app-refresh";
        refresh.innerHTML = '<div id="app-refresh-wrap" class="app-refresh-wrap"><label>侦测到变化：</label><a href="javascript:location.reload()">点击重载</a></div>';
        added.appendChild(refresh);
        setTimeout(() => {
            document.getElementById("app-refresh").style.left = "2rem";
            document.getElementById("app-refresh-wrap").style.color = "var(--refresh)";
        }, 200);
    }
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.controller && navigator.serviceWorker.addEventListener(
            "controllerchange",
            showNotification // 发送弹窗让用户确认刷新页面的函数
        );
        window.addEventListener("load", function () {
            navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(function (registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }).catch(function (err) {
                console.log('ServiceWorker registration failed: ', err);
            });
        });
    }
</script>

// 版本修改的时候会触发 activate，将旧版本的缓存清理掉。
var OFFLINE_PREFIX = "offline-";
var CACHE_NAME = "main_v1.0.0";

var cacheName = "helloWorld"; // 缓存的名称
// install 事件，它发生在浏览器安装并注册 Service Worker 时。
self.addEventListener("install", (event) => {
    /* event.waitUtil 用于在安装成功之前执行一些预装逻辑
         但是建议只做一些轻量级和非常重要资源的缓存，减少安装失败的概率
         安装成功后 ServiceWorker 状态会从 installing 变为 installed */
    event.waitUntil(
        caches.open(cacheName).then((cache) =>
            cache.addAll([
                // 如果所有的文件都成功缓存了，便会安装完成。如果任何文件下载失败了，那么安装过程也会随之失败。
                // "/", 或者：
                "/fonts/res.woff2", // 示例
            ]),
        ),
    );
    console.log("install", event);
    event.waitUntil(self.skipWaiting());
});

/**
为 fetch 事件添加一个事件监听器。接下来，使用 caches.match() 函数来检查传入的请求 URL 是否匹配当前缓存中存在的任何内容。如果存在的话，返回缓存的资源。
如果资源并不存在于缓存当中，通过网络来获取资源，并将获取到的资源添加到缓存中。
*/
self.addEventListener("fetch", function (event) {
    console.log("fetch", event);
    event.respondWith(
        caches.match(event.request).then(function (response) {
            if (response) {
                return response;
            }
            var requestToCache = event.request.clone();
            return fetch(requestToCache).then(function (response) {
                if (!response || response.status !== 200) {
                    return response;
                }
                var responseToCache = response.clone();
                caches.open(cacheName).then(function (cache) {
                    cache.put(requestToCache, responseToCache);
                });
                return response;
            });
        }),
    );
});

self.addEventListener("activate", (event) => {
    console.log("activate", event);
    event.waitUntil(self.clients.claim());
    var mainCache = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then(function (cacheNames) {
            return Promise.all(
                cacheNames.map(function (cacheName) {
                    if (mainCache.indexOf(cacheName) === -1 && cacheName.indexOf(OFFLINE_PREFIX) === -1) {
                        // When it doesn't match any condition, delete it.
                        console.info("SW: deleting " + cacheName);
                        return caches.delete(cacheName);
                    }
                }),
            );
        }),
    );
    return self.clients.claim();
});

{
    "manifest_version": 3,
    "name": "golb",
    "version": "final",
    "description": "golb",
    "display": "standalone",
    "start_url": "/",
    "icons": [
        {
            "src": "/img/icon-48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/img/icon-128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "/img/icon-256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ]
}