问题标签 [angular-service-worker]

我一直在阅读有关 Angular 5 和 Angular CLI 的新 Service Workers 支持的信息，我发现它很吸引人。我对缓存 API 端点特别感兴趣。在我读过的所有教程中，它们似乎都专注于缓存一次端点调用，然后从缓存存储中处理未来的请求。如果我的 Web 应用程序频繁更新或插入数据怎么办？我的所有请求仍将继续从缓存中提供服务，这将导致获取旧数据，而不是我刚刚更新或插入的新数据，只有在我对 API 端点进行新调用时才会检索这些数据。我们如何才能保持同步？

为了让我的问题更清楚；简而言之，我要问的是如何根据需要刷新缓存。我知道，如果我选择“新鲜”策略，它将始终从网络获取，除非在网络故障或超时时，在这种情况下它默认为缓存。如果我选择“性能”策略，它将始终从缓存中提供服务，并且不适合经常变化的事物。我正在寻找的是两者兼而有之。我希望它始终从缓存中提供服务，除非我明确告诉它不要这样做。例如，当我创建新客户时，我想刷新缓存，然后它继续从缓存中提供服务，直到我告诉它刷新。

更新到 Angular 5 后，我尝试将服务人员添加到我的项目中，但遇到了一些问题。我将导入添加到 app.module.ts：

执行$ ng set apps.0.serviceWorker=true以允许项目中的服务人员

生成配置：

并体现：

然后在生产中构建它：

Http-server 以 SSL 模式运行，但 chrome dev-tools 中的 service workers 很清楚。怎么了？可能是这个标志破坏了它--aot=false --build-optimizer=false？

在生产中提供 Angular 应用程序时，我在控制台中遇到错误消息。

我之前从未遇到过这些错误，除了使用 web.config 来更改重写 URL 之外，没有任何改变。

在本地构建应用程序并通过我的本地 IIS 提供服务后，应用程序将加载并运行。

但是当我尝试在生产中达到它时，我得到：

Uncaught SyntaxError: Unexpected token < (index):1

并且

未捕获的错误：在此配置中，Angular 需要 Zone.js

当我尝试以隐身方式运行该应用程序时，该应用程序确实在生产中运行。

我在用着

我使用以下版本使用 Angular CLI 创建了一个全新的 PWA：
Angular CLI：1.6.8
节点：8.8.1
Angular：5.2.5

我的问题：当我离线时，我只是得到一个空白页。Service Worker 不会从缓存中加载任何资产。如果我手动停止并启动它，那么它将开始工作一小段时间。

没有改变任何东西这是cli生成的。

我正在使用的配置：
ngsw.json：

和 app.module.ts：

有什么建议可以让我开始寻找解决方案吗？

我最近为我面临的 pwa 问题集成了服务工作者，当我在 dist 服务器中运行 http-server 命令时，我可以在浏览器应用程序选项卡中看到服务工作者，并注册了服务工作者。但是当我上传到我的服务器并访问我无法看到服务工作者注册的 url 时，相同的 dist。有谁知道可能是什么问题？

另外如何通过 https SSL 注册服务人员？

我一直在开发一个小应用程序，按照以下指南中的步骤操作： https ://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/

在我介绍服务人员之前，我的应用程序运行良好。在页面加载时，我被带到我的应用程序仪表板，并且 Firestore 应该返回一些数据并将其显示在页面上。它工作一次，然后刷新页面是空白的。如果我清空缓存并重新加载，我会将其取回并在另一个重新加载时重复循环。

当我查看 chrome 开发工具的应用程序选项卡时，我可以在服务人员缓存中看到我的 firestore 数据在那里。servec 工作人员不应该为我提供缓存的数据吗？我只使用 angular cli 完成了我的服务工作者的基本配置，并且配置是该教程中的内容，因为我仍在学习我可以使用服务工作者做什么。

这是相关的代码。主要是initializeEventFeed()服务event$中的和组件中的getter。

服务：

零件：

ngsw-config.json：

app.module中的初始化：

这是应用程序选项卡的屏幕截图。看起来我的数据缓存在这里：

我在我们的应用程序中使用Angular-CLI 1.6.6and 。除了在我们的生产环境中弹出一条错误消息外，在本地 lite-server 和生产服务器上一切正常：@angular/service-worker 5.2.5Angular 5.2.5

加载资源失败：服务器响应状态为 504（网关超时）

查看ngsw-worker.js脚本，我发现生成上述错误消息的行（以下 2466 行）：

catch 中的控制台日志记录错误会显示以下错误：

似乎与此问题相关的错误：是什么导致无法在“ServiceWorkerGlobalScope”上执行“获取”：“仅当缓存”只能设置为“同源”模式错误？

生成此错误的请求是对应用程序的任何首次访问：

在应用程序重新加载时，错误不会重复。

有人可以帮我吗？服务工作者是否存在错误safeFetch()（可能支持 HashLocationStrategy）？我必须更改配置中的任何内容吗？

我目前正在使用以下流程跟踪 Angular 应用程序上的导航点击 -

用户单击菜单项 > 发布到活动 api > 收到来自 api 的成功响应 > 导航用户

然而，这可能会很麻烦而且很慢，因为活动 API 可能已经变冷或网络延迟可能意味着该过程需要 5 或 6 秒才能完成。

我想改进这个过程，并正在考虑使用服务工作者之类的东西来处理活动 api 调用，并允许用户在单击导航项后立即导航。

我一直在阅读服务工作，但目前他们似乎只能缓存资产和响应，而不是启动 api 调用。

服务人员可以做到这一点吗？如果不是，他们是捕获这些数据的更好做法吗？

我正在开发一个 Angular 5 项目，并希望通过 @angular/service-worker 包提供 PWA 功能。

我无法缓存和提供 Google Maps API 请求（例如图块）。在线时不会缓存响应，因此离线时也不会提供响应。

我尝试了什么：

• 将地图 URL 添加到数据组：没有错误，但也没有缓存，离线时我收到以下错误：

  错误错误：未捕获（承诺）：事件：{“isTrusted”：true}（在main.bundle.js中）

• 将 Maps URL 添加到assetGroups installMode: prefetch，尝试预取时出现跨域错误：

  请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“ http://localhost:8080 ”。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

• 将 Maps URL 添加到assetGroups installMode:lazy，我得到与 installMode:prefetch 相同的结果

其余数据缓存并提供良好的服务（来自 localhost 的静态数据和来自不同端口上的 localhost API 端点的 json）。

我的 ngsw-config.json 看起来像这样：非常感谢任何指针。

如果需要，很乐意提供更多信息。

角度服务工作者的 dataGroups性能策略是从缓存中提供内容，然后是网络，还是仅从缓存中提供内容？

我的意思是，它是缓存和更新策略还是仅缓存策略？