Question

我试图在Workbox（2.1.2）生成的Service Worker中实现一般回退页面。基本上，我希望在应用程序脱机时打开预先缓存的回退页面，并且服务工作者不会缓存所请求的页面。

以下是代码：

importScripts('https://unpkg.com/workbox-sw@2.0.1/build/importScripts/workbox-sw.prod.v2.0.1.js');

const workboxSW = new self.WorkboxSW({
    skipWaiting: true,
    clientsClaim: true
});

// This is a placeholder for manifest dynamically injected from webpack.config.js
workboxSW.precache([]);

workboxSW.router.setDefaultHandler({
    handler: workboxSW.strategies.cacheFirst()
});

workboxSW.router.registerRoute(
    '{{baseUrl}}/about',
    workboxSW.strategies.networkFirst()
);

workboxSW.router.registerRoute(
    '{{baseUrl}}/contact',
    workboxSW.strategies.networkFirst()
);

const catchHandler = ({event}) => {
    if (event.request.mode === 'navigate') {
        return caches.match('{{baseUrl}}/offline');
    }
    return Response.error();
};

workboxSW.router.setCatchHandler({
    handler: catchHandler
});

由于cacheFirst是默认策略，所以除了我要使用/about策略的两个页面（/contact和networkFirst）之外，一切正常。

如果应用程序在线，我希望从网络提供该页面，然后进行缓存。如果应用程序处于脱机状态且页面已缓存，我希望从缓存中提供该页面。

但是如果应用程序处于脱机状态且页面未缓存，那么我希望使用后备页面。但是，在这种情况下，catchHandler永远不会被调用，我不明白为什么。

如果我将这两个页面的缓存策略从networkFirst更改为cacheFirst，那么当应用程序处于脱机状态并且页面未缓存但是使用此策略时，我将永远不会调用catchHandler如果页面已缓存，请获取该页面的新版本。

脱机回退页面在Workbox服务工作程序中不起作用

0 个答案: