我的服务人员正在缓存文本/html 文档，如索引页面，如何阻止它？答案

【问题标题】：My service worker is caching text/html documents like index page, how to stop it?我的服务人员正在缓存文本/html 文档，如索引页面，如何阻止它？
【发布时间】：2019-06-16 09:51:45
【问题描述】：

我试图让我的 PWA 在设备离线时响应 offline.html 页面，我正在考虑将主页作为离线获取失败，但由于我的服务人员缓存文本/html 请求，我的 PWA 每次使用缓存来获取主页时间。

我正在使用 workbox 生成我的 PWA，并且我尝试从 workbox-config.js 文件中删除文档。

代码

workbox-config.js

module.exports = {
    globDirectory: 'build/',
    globPatterns: [
        '**/*.{png,ico,css,js}',
    ],
    swDest: 'build\\sw.js',
    swSrc: 'src/sw.js',
    injectionPointRegexp: /(const precacheManifest = )\[\](;)/,
};

Service Worker 中的获取处理程序

self.addEventListener('fetch', (event) => {
    console.log('fetch event', event.request.url);
    // request.mode = navigate isn't supported in all browsers
    // so include a check for Accept: text/html header.
    // if (event.request.method === 'GET') {
    //  console.log(event.request.url, event.request.headers.get('accept'));
    // }
    if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
            fetch(event.request.url).catch((error) => {
                console.log(123, error);
                // Return the offline page
                return caches.match('/offline.html');
            }),
        );
    }
    else {
        event.respondWith(
            caches.match(event.request)
                .then((response) => {
                    if (response) {
                        console.log('Found ', event.request.url, ' in cache');
                        return response;
                    }

                    return fetch(event.request);
                }),
        );
    }
});

我希望我的 PWA 每次都从我的服务器上获取主页，但我得到的是这个。

这是网址：https://smartcopy-195fd.firebaseapp.com

【问题讨论】：

如果您查看应用程序选项卡中的缓存部分，缓存中是否列出了 index.html？
不，它不存在
我已经添加了网络应用的链接。

标签： javascript node.js reactjs service-worker progressive-web-apps

【解决方案1】：

首先，您需要预先缓存离线页面

workbox.precaching.precacheAndRoute([
  'offline.html'
]);

为了确保您的主页永远不会被缓存，您需要将其配置为使用仅网络策略：

workbox.routing.registerRoute(
  new RegExp('index.html'),
  new workbox.strategies.NetworkOnly({
      cacheName: 'htmlcache'
    })
);

最后，当获取到主页失败即离线时，需要从缓存中响应

workbox.routing.setCatchHandler(({event}) => {
      return caches.match(workbox.precaching.getCacheKeyForURL('offline.html'));
});

【讨论】：