Question

我正在使用vanilla JavaScript创建SPA，目前正在设置sw-precache来处理资源的缓存。服务工作者是gulp构建的一部分生成并成功安装。当我在离线时导航到根URL（http://127.0.0.1:8080/），显示应用程序外壳，说明资源确实已缓存。

我现在正试图让SW处理内部路由而不会失败。在离线时导航到http://127.0.0.1:8080/dashboard_index时，我收到消息“无法访问网站”。

应用程序通过用户操作上的一系列事件侦听器在客户端处理此路由，或者在使用后退按钮的情况下处理URL。访问其中一个URL时，不应调用服务器。因此，服务工作者应该允许这些链接“落实”到客户端代码。

我尝试了一些事情并期望this Q/A来解决问题。我已经包含了generate-service-worker gulp任务的当前状态，通过此设置，我希望能够访问/dashboard_index offine。一旦这个工作，我可以调整解决方案以涵盖其他路线。

任何帮助都非常感激。

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

同样的An unknown error occurred when fetching the script.也在'应用程序＆gt;中重复服务工作者的chrome调试工具选项卡。

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

Answer 1

为了记录，万一有其他人遇到此问题，我相信这个答案from the comments应该解决这个问题：

您可以从navigateFallback: '/'切换到navigateFallback: '/index.html'吗？您的列表中没有'/'的条目预先缓存的资源，但您确实有'/index.html'的条目。有一些逻辑可以自动处理'/'和。{ '/index.html'是等同的，但这并不适用于什么 navigateFallback正在做......

使用sw-precache缓存内部路由

1 个答案: