0

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

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

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

我已经尝试了一些事情，并希望这个 Q/A能够解决问题。我已经包含了generate-service-workergulp 任务的当前状态，并且通过此设置，我希望能够正常访问/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);
});

更新

应用程序的代码可以在这里找到。

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

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

An unknown error occurred when fetching the script.在 chrome 调试工具的“应用程序 > 服务人员”选项卡中也有相同的内容。

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

4

1 回答 1

1

作为记录，如果其他人遇到这个问题，我相信评论中的这个答案应该解决这个问题：

你能从 切换navigateFallback: '/'到navigateFallback: '/index.html'吗？您的预缓存资源列表中没有 for 的条目'/'，但您确实有'/index.html'. 有一些逻辑可以自动将'/'和 '/index.html'视为等效，但这不适用于 navigateFallback正在做的事情......

于 2016-12-09T17:43:51.870 回答