使用 sw-precache 缓存内部路由

Question

我正在使用 vanilla JavaScript 创建一个 SPA，目前正在设置 sw-precache to handle the caching of resources. The service worker is generated as part of a gulp build and installed successfully. When I navigate to the root url (http://127.0.0.1:8080/)，而离线应用程序 shell 显示，说明资源确实已缓存。

我现在正在尝试让软件在不失败的情况下处理内部路由。离线导航到 http://127.0.0.1:8080/dashboard_index 时，我收到消息“无法访问站点”。

应用程序通过用户操作的一系列事件侦听器在客户端处理此路由，或者在使用后退按钮的情况下，url。当访问这些 url 之一时，不应调用服务器。因此，service worker 应该允许这些指向 'fall through' 的链接到客户端代码。

我已经尝试了一些方法，预计可以解决问题。我已经包含了 generate-service-worker gulp 任务的当前状态，并且通过此设置我希望能够离线访问 /dashboard_index。一旦这有效，我可以调整解决方案以涵盖其他路线。

非常感谢任何帮助。

gulp.task('generate-service-worker', function(callback) {
  var  rootDir = './public';

  swPrecache.write(path.join(rootDir, 'sw.js'), {
    staticFileGlobs: [rootDir + '/*/*.{js,html,png,jpg,gif,svg}',
                      rootDir + '/*.{js,html,png,jpg,gif,json}'],
    stripPrefix: rootDir,
    navigateFallback: '/',
    navigateFallbackWhitelist: [/\/dashboard_index/],
    runtimeCaching: [{
      urlPattern: /^http:\/\/127\.0\.0\.1\:8080/getAllData, // Req returns all data the app needs
      handler: 'networkFirst'
    }],
    verbose: true
  }, callback);
});

更新

可以找到应用程序的代码 here。

删除选项 navigateFallbackWhitelist 不会改变结果。

离线时导航到 /dashboard_index 将以下内容打印到控制台。

获取 http://127.0.0.1:8080/dashboard_index net::ERR_CONNECTION_REFUSED
sw.js:1 获取脚本时出现未知错误。
http://127.0.0.1:8080/sw.js 加载资源失败：net::ERR_CONNECTION_REFUSED

在 chrome 调试工具的 'application > service workers' 选项卡中也复制了相同的 An unknown error occurred when fetching the script.。

还注意到 runtimeCaching 选项不缓存从该路由返回的 json 响应。

Answer 1

郑重声明，以防其他人遇到此问题，我相信这个答案应该可以解决问题：

Can you switch from navigateFallback: '/' to navigateFallback: '/index.html'? You don't have an entry for '/' in your list of precached resources, but you do have an entry for '/index.html'. There's some logic in place to automatically treat '/' and '/index.html' as being equivalent, but that doesn't apply to what navigateFallback is doing...

使用 sw-precache 缓存内部路由

Cache internal routes with sw-precache

caching

gulp

sw-precache