Question

我仍在努力避免在渐进式Web应用程序中缓存问题。对于任何PWA缓存而言，至关重要的是能够更新ServiceWorker文件（我们将其称为sw.js）。但是细节让我有些困惑：

可以在每次页面加载时执行navigator.serviceWorker.register('sw.js')，因为register()更新了应用程序缓存，或者如果一切都是最新的，则什么也不做-是吗？
执行navigator.serviceWorker.register('sw.js?' + Date.now())之类的操作来避免HTTP缓存是否有意义？或者如果服务器使用ETag，我是否安全起见？
浏览器是否在每次页面加载时检查网络中是否有更新的sw.js？有时在网络检查器标签中看不到它。
如果sw.js在应用程序缓存中，浏览器是否从那里获取它而无需检查服务器是否有更新？

有时我会看到ServiceWorker演示脚本会像这样缓存自身：

self.addEventListener('install', ev => {
    const myCaches = {
        app: {...}, 
        sw: {
            files: [
                '/sw.js'
            ],
            version: '1'
        }
    }
    for (let name in myCaches) {
        const cacheName = name + '-' + myCaches[name].version
        ev.waitUntil(
            caches.has(cacheName).then(uptodate => {
                if (uptodate) return true
                caches
                    .open(cacheName)
                    .then(cache => {
                        cache.addAll(myCaches[name].files)
                    })
            })
        )
        // clear old caches
    }
})

这有意义吗，是一种好习惯吗？这样会使更新缓存更可靠吗？

Answer 1

我见过的大多数代码示例都没有将服务工作者文件添加到缓存中。根据我的经验和我的理解，脱机模式并不需要工作。

注册时，浏览器将为PWA安装服务工作者。浏览器使用单独的工具来缓存和管理服务人员。缓存它不是您的责任。

在服务工作者的文件名中添加时间戳是一种反模式。根据有关Service Worker生命周期的文章，您应该avoid changing the URL of your service worker script。

您最关心的是更新服务工作者的观点，浏览器如何知道何时执行此操作？

好吧，根据服务工作者生命周期文章中的Updating the service worker部分：

大多数浏览器（包括Chrome 68和更高版本）默认忽略   在检查注册服务的更新时缓存标题   工作者脚本。他们在提取时仍然尊重缓存头   通过importScripts()在服务工作者内部加载的资源。您可以   通过设置updateViaCache选项来覆盖此默认行为   在注册服务人员时。

如果您的服务工作者字节不同，则认为已更新   浏览器已经拥有的一个。（我们将其扩展为包括   也导入了脚本/模块。）启动了更新的服务程序   与现有事件并排，并获得自己的install事件。

如果新工作人员的状态代码不正确（例如404），则失败   解析，在执行过程中引发错误或在安装过程中拒绝，   新的工人被扔掉了，但是当前的工人仍然活跃。

如果您已经在离线模式下测试了PWA，您会注意到浏览器在尝试检索sw.js文件时会在控制台中产生错误。没什么可担心的。正如上面的最后一点所说，“当前的状态仍然有效”。

我想知道当人们在脱机模式下进行测试并将服务工作者文件添加到缓存中以进行if牛剃须时，人们是否对服务工作者JavaScript的控制台中的404条目感兴趣吗？它可能会花费时间和磁盘在浏览器中缓存不必要的文件，从而对您的网站及其用户造成损害。

是否应该在PWA中缓存ServiceWorker文件？

1 个答案: