使用sw-precache缓存内部路由

Question

我正在使用普通的JavaScript创建SPA，目前正在设置西南前疼痛来处理资源的缓存。服务工作人员是作为gulp构建的一部分生成的，并成功安装。当我在离线时导航到根url (http://127.0.0.1:8080/)时，应用程序外壳会显示，说明资源确实是缓存的。

我现在正试图让SW处理内部路由，而不会失败。当我在离线时导航到http://127.0.0.1:8080/dashboard_index时，我会收到消息‘无法联系到’。

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

我尝试了一些事情，希望本问答能够解决这个问题。我已经包含了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);
});

更新

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

删除选项navigateFallbackWhitelist并不会对结果产生影响。

在脱机时导航到/dashboard_index，同时将下列内容打印到控制台。

• 索引 net::ERR_CONNECTION_REFUSED
• sw.js:1获取脚本时发生了一个未知的错误。
• http://127.0.0.1:8080/sw.js未能加载资源: net::ERR_CONNECTION_REFUSED

在chrome调试工具的“应用程序>服务工作者”选项卡中也复制了相同的An unknown error occurred when fetching the script.。

还需要注意的是，runtimeCaching选项并不缓存从该路由返回的json响应。

Answer 1

为了记录在案，如果其他人遇到这种情况，我认为从评论中的回答应该解决这个问题：

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