Service Worker 在页面加载后预加载子页面

Question

我正在使用以下代码将 ServiceWorker 的 HTML-代码添加到 HTML-页面：

    <script>
        navigator.serviceWorker.register("../service.js", {
            scope: "myScope"
        });
    </script>

现在我想预加载一些页面，以获得更好的侧载性能。这是我的代码，运行良好：

    self.addEventListener("install", function (e) {
      e.waitUntil(
        caches.open("myCache").then(function (cache) {
            return cache.addAll([
                "p1.html",
                "p2.html"]);
        })
      );
    });

但是如果服务脚本可用，子页面会立即加载。限制到 gprs 或 edge 的网络连接会导致很多问题！所以我想有一个解决方案来在所有其他请求结束后开始缓存这些站点。

有办法吗？

Answer 1

您在 WorkerGlobalScope 中通过 cache.addAll() 使用的相同缓存存储 API 也通过 Window 公开。这意味着您可以从 JavaScript 修改在您的受控页面上运行的相同缓存，并且您可以等待任何 window/document/任何事件被触发，然后再执行 cache.addAll().

或者，如果您想将缓存填充保留在服务工作者的 install 处理程序中（例如，以确保如果服务工作者安装，缓存总是被填充），您可以简单地延迟调用 navigator.serviceWorker.register() 直到某个事件在您的页面上触发。

Service Worker 在页面加载后预加载子页面

Service Worker pre-loading sub-pages after pageloading

html

javascript

service-worker