如何处理Angular 5+服务工作者的路由？

Question

在以前版本的Angular服务工作者实现中,其中一个配置选项是"routing".这可以从这个未解决的SO问题中看出,在这个Angular CLI问题中被引用,最好的剩余文档似乎是Stephen Fluin(Angular团队)的博客文章,以及Alex Rickabaugh 的I/O演讲(来自谷歌).

使用Angular 5,ServiceWorkerModule已经很好地构建了,现在可以使用该ngsw-config.json文件处理大部分配置.但是,在angular.io指南或文档中的任何位置都不再提及如何处理路由的重定向.所以我最终遇到了以下问题:当我访问我的应用程序并离线时,我仍然可以直接访问该应用程序:https://jackkoppa.github.io/cityaq-sw-issue.但是,在加载时,应用程序重定向到search路由,并且大多数用户将尝试从https://jackkoppa.github.io/cityaq-sw-issue/search?cities=Shanghai这样的URL加载(为简单起见,我'我现在只谈论Chrome桌面和移动设备,并在可能的情况下使用Incognito.

当您尝试在离线时访问该URL时,您会立即获得504 - Gateway Timeout.发生这种情况是因为服务工作者只缓存了索引,并且不知道其他路由应该重定向到索引以便它可以加载.我相信Angular服务工作者实现的先前迭代可以通过设置重定向到给定路由的索引来处理这种情况.有没有办法在当前的Angular 5+ ngsw-config.json或生成的ngsw.json文件中处理此重定向？除此之外,如何在单独的服务工作者JS文件中处理变通方法？

Answer 1

TL; DR:我发现至少有两个问题导致了我的案件破损; 您现在可以使用此构建脚本来尝试我的修复,并在此处看到该应用程序脱机工作.需要进一步测试和拉取请求.

虽然我一直无法找到记录在案的答案,但这是我迄今为止能够找到的,在单步执行ngsw-worker.js文件以及阅读@angular/service-worker提交历史记录时.

ServiceWorkerModule"路由" 的新方法是接受任何"导航"请求(即同一域上的非索引路由),并重新运行该handleFetch方法,但现在指向index.html请求(源).这应该可以正常工作,因为SPA一旦检索到其索引的缓存文件就应该能够重定向到URL.

因此,导致我的网站上线失败的问题不能直接与路由相关,到目前为止我找到了2.通过解决方法纠正这些问题,使我的应用程序大部分按预期运行.随着原始问题中的重复步骤,cityaq现在正在工作,而我在cityaq-sw-issue上复制了原始的失败网站.

问题:

1. Angular应用程序的托管版本(--base-href从CLI设置标志)列出其服务工作者资源的绝对URL.将请求与这些资源进行比较时,ngsw-worker.js需要相对URL

   • 资源
   • 我非常有信心这个问题需要解决,我将处理拉取请求来修复它.之所以会发生这种情况,baseHref是因为ngsw.json生成时会将资源URL包含在内(源代码)

2. 根据ngsw-worker.js我的经验,在可能存在的3个可用"状态"中,EXISTING_CLIENTS_ONLY似乎设置不正确.

   • 来源1,来源2
   • 我对这个变化不那么自信,因为我一直没能始终如一地看到什么原因导致这种状态.但是,如果服务工作者进入此状态,ngsw-worker.js将不再尝试检索缓存资源(源),并且在我的测试中看似"正确"的情况下,即使唯一的更改是删除互联网连接

虽然我为问题#1整理了一个PR,并等待一些帮助理解问题#2,但我正在使用一个变通构建脚本ngsw-worker.js在生成之后进行修改.警告:它很丑陋并且肯定会修改设置的预期"安全"行为EXISTING_CLIENTS_ONLY.但是,对于我的应用程序,它确实允许在本地运行(http-server)和部署到实时URL(在我的情况下为GitHub页面)时正确的脱机性能.

要使用解决方法: (Angular 5,测试w/Angular 5.2.1)

1. npm install replace-in-file --save-dev
2. 在您的应用中包含此脚本,例如,在build/fix-sw.js
3. 在你的package.json:

"scripts": {
   ...
   "sw-build": "ng build --prod && node build/fix-sw",
   "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
   ...
}

4. 在本地运行

npm run sw-build
cd dist
http-server -p 8080

5. 并且在发送到服务器之前为您的实时URL准备构建(例如,使用angular-cli-ghpages)

npm run sw-build-live