问题描述
我正在尝试为缓存中不可用的图片和文档实现离线回退功能。这个想法是,当所需的图片或文档不可用时,Service Worker 将提供预定义的后备图片或文档。我正在使用 here 描述的配方,但它不起作用。要使用 Chrome 开发工具对其进行测试,我执行以下操作:
- 转到 localhost:3003/(应用程序所在的位置)
- 让浏览器注册 service worker
- 重新加载页面
- 转到 Application 选项卡和 Service Worker 部分,然后选中 offline 复选框
- 重新加载页面
- 对于未保存在缓存中的图片和文档,出现以下错误:
GET http://localhost:3003/assets/img/Innomaps%20en%20el%20Hult%20Prize%202019.jpg net::ERR_INTERNET_disCONNECTED
服务工作线程代码:
importScripts('https://storage.googleapis.com/workBox-cdn/releases/6.1.1/workBox-sw.js');
workBox.core.setCacheNameDetails({
prefix: 'innomaps-pwa',suffix: 'v1',precache: 'precache-cache',runtime: 'runtime-cache'
});
workBox.precaching.precacheAndRoute([
// Precaching the home page
{ url: '/',revision: null },{ url: 'assets/css/styles.css',{ url: 'assets/js/actions.js',{ url: 'assets/img/InnomapsWhite.png',{ url: 'assets/js/bs-init.js',{ url: 'manifest.json',// Precaching the offline page
{ url: '/offline',]);
workBox.googleAnalytics.initialize();
// This feature is not working!!
workBox.recipes.offlineFallback({
pageFallback: '/offline',imageFallback: 'assets/img/InnomapsWhite.png'
});
解决方法
问题是需要设置一个路由处理程序,以便离线回退配方能够捕获它。如果您计划对所有未处理的路由使用离线回退策略(如我的情况),您可以使用所需的策略设置默认处理程序(在以下情况下,使用 NetworkOnly
策略)。 @JeffPosnick 在他对我的 github 问题的回复中的以下代码很有用:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');
workbox.routing.setDefaultHandler(
new workbox.strategies.NetworkOnly()
);
// Replace with your URLs.
workbox.recipes.offlineFallback({
pageFallback: '/offline.html',imageFallback: '/offline.png'
});