没有可用的互联网连接时,如何提供offline.html?

时间:2020-04-15 06:34:25

标签: vue.js progressive-web-apps workbox vue-pwa

我正在使用workbox和vuejs,并且我想在没有互联网连接的情况下为mapName页面提供服务。

我将pwa部分编辑为public/offline.html,以便自己处理服务人员:

vue.config.js

我在 pwa: { name: 'myapp', workboxPluginMode: 'InjectManifest', workboxOptions: { swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js') } }, 中添加了以下代码以支持离线投放页面:

service-worker.js

因此,当我访问console.log('in pwa'); self.addEventListener('message', (event) => { if (event.data && event.data.type === 'SKIP_WAITING') { self.skipWaiting(); } }); // The precaching code provided by Workbox. You don't need to change this part. self.__precacheManifest = [].concat(self.__precacheManifest || []); // workbox.precaching.suppressWarnings() workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); self.addEventListener("fetch", function(event) { event.respondWith( fetch(event.request).catch(function() { return caches.match(event.request).then(function(response) { if (response) { return response; } else if (event.request.headers.get("accept").includes("text/html")) { return caches.match(workbox.precaching.getCacheKeyForURL('/offline.html')); } }); }) ); }); www.myapp.com/en时,我得到了离线页面。

但是问题是当我访问www.myapp.com/en/about时-该工作箱从缓存中提供了index.html文件。

我可以从缓存中删除index.html,但是当我在线时,我确实想从缓存中提供索引。

所以我处于困境中,该怎么办?

0 个答案:

没有答案