围绕服务人员开发和测试的随机说明

Hey!
Here are a few random tips and tricks I learned through the years around service workers development and testing.

嘿！
以下是我多年来围绕服务工作者的开发和测试所学到的一些随机技巧和窍门。

Helpful service worker resources

有用的服务人员资源

Reloading a service worker

重新加载一个服务工作者

Reloading a page won’t update/remove the previous version of its service worker.
If you’re using Chrome, to ensure you’re using the latest version of your service worker, tick the “Update on reload” toggle in the “Application” ⭢ “Service Workers” section of the Chrome DevTools.

如果您使用的是 Chrome 浏览器，为确保您使用的是最新版本的服务工作者，请勾选 Chrome DevTools 的 "应用程序"⭢"服务工作者 "部分中的 "重新加载时更新 "切换键。

Simulate a network condition

模拟一个网络状况

To simulate a network condition (e.g., offline, 3g, etc…) in a service worker in Chrome, untick the “Update on reload” toggle.

要在Chrome的服务工作者中模拟网络状况（如离线、3g等），请取消 "重新加载时更新 "的切换。

I’m still not sure why/if this is really needed. In a few cases, when the toggle was enabled and I was simulating an offline mode, the service worker was still going through the network ?‍♂️
我仍然不确定为什么/是否真的需要这样做。在少数情况下，当切换被启用并且我在模拟离线模式时，服务工作者仍然在通过网络?♂️。

Service workers don’t intercept other service worker registration events

服务工作者不拦截其他服务工作者的注册事件

Service workers can’t intercept network requests made by the navigator.serviceWorker.register("sw.js") API. This means you don’t have to worry about service workers caching themselves.

服务工作者不能拦截由navigator.serviceWorker.register("sw.js") API发出的网络请求。这意味着你不必担心服务工作者自己的缓存问题。

Testing exceeded quota errors on service workers

测试服务工作者超过配额的错误

Each browser has a different limit on the cache storage available for a service worker. On desktop browsers, it will be based on the percentage of available space on disk, so testing (in development) what happens when the cache quota exceeds can be tricky.

每个浏览器对服务工作者可用的缓存存储都有不同的限制。在桌面浏览器上，它将基于磁盘上可用空间的百分比，所以测试（在开发中）缓存配额超过时发生的情况可能很棘手。

A possible workaround is:

一个可能的变通办法是。

Use Chrome in incognito mode, which has a hard limit of 100MB.
在隐身模式下使用Chrome浏览器，该模式有100MB的硬限制。
Manually cache huge assets (e.g., 8k resolution images).
手动缓存巨大的资产（例如，8k分辨率的图...