如何处理Angular 5 Service Workers中的路由?

前端之家收集整理的这篇文章主要介绍了如何处理Angular 5 Service Workers中的路由?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在以前版本的Angular服务工作者实现中,其中一个配置选项是“路由”。这可以在 unanswered SO question中看到,在 Angular CLI issue中被引用,最好的剩余文档似乎是 blog post by Stephen Fluin(在Angular团队中),以及来自Alex Rickabaugh(来自Google)的 I/O talk

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

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

TL; DR:我发现至少有两个问题导致我的案件破损;您现在可以使用 this build script来尝试我的修复程序,并看到该应用程序脱机工作 here.进一步测试&拉需要的请求。

虽然我一直无法找到有记录的答案,但这是我迄今为止所能找到的,通过ngsw-worker.js文件,以及阅读@ angular / service-worker提交历史记录。

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

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

问题:

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

> source
>我非常有信心这个问题需要解决,我将处理拉动请求来修复它。这是因为生成ngsw.json时,baseHref将包含在资源URL中(source)

>根据我的经验,在ngsw-worker.js可以使用的3个“状态”中,EXISTING_CLIENTS_ONLY似乎打赌设置不正确。

> source 1,source 2
>我对这种变化缺乏信心,因为我无法一直看到导致这种状态的原因。但是,如果&当服务工作者进入此状态时,ngsw-worker.js将不再尝试检索缓存资源(source),并且在我的测试中看似“正确”的情况下,即使只有更改,应用程序仍会进入此状态正在删除互联网连接

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

要使用变通方法
(Angular 5,测试w / Angular 5.2.1)

> npm install replace-in-file –save-dev
>在您的应用中包含this script,例如在build / fix-sw.js
>在你的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"
   ...
}

>在本地运行

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

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

npm run sw-build-live
原文链接:https://www.f2er.com/angularjs/143868.html

猜你在找的Angularjs相关文章