【发布时间】：2016-12-01 12:45:15
【问题描述】：
我正在使用 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 离线。一旦这工作正常，我可以调整解决方案以涵盖其他路线。
非常感谢任何帮助。
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 会将以下内容打印到控制台。
- GET 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. 也出现在 chrome 调试工具的“应用程序 > 服务工作者”选项卡中。
还注意到runtimeCaching 选项不会缓存从该路由返回的 json 响应。
【问题讨论】：
-
您当前的配置似乎应该可以完成您正在尝试做的事情。您能否确认您使用的是
sw-precache的最新版本？如果您完全省略navigateFallbackWhitelist选项，它会有所帮助吗？如果这是sw-precache中的错误，则将其移至github.com/GoogleChrome/sw-precache/issues 可能是有意义的。 -
@JeffPosnick 我使用的是过时的版本，但是在将软件包更新到 4.2.3 后得到了相同的结果。
-
你能从
navigateFallback: '/'切换到navigateFallback: '/index.html'吗？您的预缓存资源列表中没有'/'的条目，但您确实有'/index.html'的条目。有一些逻辑可以自动将'/'和'/index.html'视为等效，但这不适用于navigateFallback正在做的事情...... -
@JeffPosnick 我决定为这个项目编写自己的软件，以便更好地理解它们。一旦我的应用程序按预期工作，我会回来再试一次。我已经发现了一些阻止 SW 正常工作的架构决策。在那之前，感谢您的帮助，这是一个很棒的库，我在其他项目中使用它并取得了巨大的成功:)
标签： caching gulp sw-precache