问题标签 [ngsw-config]

与服务人员一起使用离线角度从https://angular.io/guide/service-worker-config获取参考

应用程序离线工作正常唯一的问题是缓存更新机制，如果我使用"installMode": "prefetch"应用程序离线工作正常但缓存中的文件永远不会在服务器上的文件更新时更新。如果我使用“installMode”：“lazy”` 应用程序无法离线工作。

下面是ngsw-config.json 我的应用程序。

也尝试过updateMode，但仍然缓存文件不更新更改

我有一些 API，例如 https://api-****** y?apikey=sX 4&q=london，其中 q=london 是一个会不断变化的参数，那么如何在 url 列表中添加这个 URL在 ngsw-config.json 文件中

我有两个疑问：

1. 与其为所有不同的参数（如伦敦/曼彻斯特/伯明翰）一次又一次地添加相同的 url，有没有一种方法可以让我只添加不带参数的基本 URL，它会在用户搜索时存储所有不同参数的响应？

2. 与其手动添加 URL，不如在用户在线搜索时动态存储 URL 的响应。我的意思是我最初不会在 ngsw-config.json 文件的列表中添加任何 URL，但是当用户请求该 url 时，它的响应会自动存储在缓存中。

我为域根和第一个路径元素上的每个微前端使用“app-shell”类型的应用程序设置了几个微前端。每个应用程序都像一个独立的 Angular 应用程序一样构建，使用共享库来重用通用组件和功能。它们存在于自己独立的 docker 容器中，并使用 nginx 代理映射绑定在一起。

我想设置一个角度服务工作者来缓存我们所有的资源。

第一次尝试

每个应用程序有一名服务人员。所以域根应用程序有一个，我们的每个“子应用程序”都有一个。那是; 每个ngsw-config.json独立的角度应用程序一个。

问题

这导致两个软件在每个子应用程序中争夺缓存控制权，用户最终可能会看到旧版本，具体取决于哪个获胜。

第二次尝试

让一个服务工作者来管理它们，将它放在域根应用程序上，并让它尝试使用ngsw-config.json'assetGroup.resources.files或' 缓存每个“子应用程序”的资源assetGroup.resources.urls。这些似乎都不会将子应用程序资源映射到其缓存中 - 至少在检查 DevTools AppCache 存储库时不会，尽管网络选项卡确实报告资源文件是从 ServiceWorker 提供的。

问题

这里的问题是当部署新版本时应用程序不再报告。我想这是因为 angular-cli 无法知道子应用程序构建时编译资源的名称。它们必须在运行时缓存。无论如何，我不确定我的任何资源是否都被缓存了。通过切换到离线模式，没有任何响应。

此外，我们有时仍然会遇到先加载域根应用程序的旧版本，我们必须刷新页面才能获得更新版本。我从第一次尝试中注入了代码来清理第二个服务人员。以下代码删除所有注册到的服务工作者mydomain.com/childX：

我看到的另一个观察结果是，在 DevTools / Application / Cache 存储中，每个新版本哈希正好有 4 个条目，并且它保留所有版本。我以为找到新版本时它会覆盖缓存。

当前设置：

运行@angular/service-worker：10.1.4

ngsw-config.json

app.component.ts

问题

应该如何配置它以便服务工作者能够正确缓存我的资源，并且（如果每个应用程序需要一个）不会相互对抗？

编辑

对于其他在这个问题上苦苦挣扎的人；可能这可以使用 Webpack 5 中的新模块联合系统来解决，据说与 Angular 11 一起发布（https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with -角/）。

我想从服务工作者缓存中排除清单文件，因为它是由 Web 函数动态创建的。

我试图通过添加到这里提到的 dataGroup、assetGroups 和 navigationUrls 来排除它：

Angular 5 和 Service Worker：如何从 ngsw-config.json 中排除特定路径

但不幸的是，没有任何效果，文件仍然由 ngsw 提供。请在此处找到服务人员代码：

我也已经尝试绕过 url 参数和它的工作人员，但我宁愿从缓存中排除：

先感谢您！

• 我使用 ng build --prod 构建我的 Angular 8 项目

• 使用 http-server 从 /dist 文件夹提供它（并最终停止它，应用程序仍然可以通过服务工作者提供服务）

• 项目注册它的服务工作者

• 我能够浏览我从块中预取和加载的路线

• 我刷新了路线，它按预期工作。

• 但是，当我对已部署到服务器 (IIS) 的解决方案执行相同操作时，它会引发 504 错误，即此页面无法正常工作 ______ 响应时间过长。HTTP 错误 504

** - 虽然基本路线有效（即使在刷新时），但子路线不能（能够导航但重新加载时会抛出 504）并且在网络选项卡中我看到失败状态**

此外，我们应用程序的基本 href 可以根据我们使用的不同环境进行配置。即使我们提到范围作为当前的基本 href 和起始 url 作为 '/index.html' OR './' OR '/'，问题似乎仍然存在。

是 IIS 的行为还是 manifest.json 文件似乎是罪魁祸首，还是我需要配置其他任何东西来完成这个设置？

请让我问一个问题。

首先，我想构建角度渐进式网络应用程序。
而且我发现我可以使用 Angular 本机服务工作者 (ngsw) 或称为 Workbox 的与框架无关的库来构建渐进式 Web 应用程序。
哪种方法更容易开始，哪种库更易于使用，以及哪种 PWA 更易于维护。

我应该使用哪个库，请告诉我（ngsw或 workbox）

请有人解释一下优缺点。

我在 angular.js 应用程序中实现了服务工作者，我们在其中编写了一些自定义代码self.addEventListener('fetch', function (event) 。现在我计划将应用程序迁移到 Angular，我发现在 Angular 中我们有一个特殊的插件，它将执行所有配置和缓存清理。 "@angular/service-worker": "~10.0.6",.

现在我很难在 fetch 事件中实现自定义代码以集成到角度版本中。有什么方法可以让 fetch 方法覆盖到组件中并从那里执行操作。

我正在开发一个 Angular 10 应用程序。
它使用 Angular 的“服务工作者”来创建 PWA。

编译后的应用程序位于“c:\-website-folder-\ng-app\dist”中。然后用户可以使用如下 URL 访问 App：“https://website.com/ng-app/dist”。

ServiceWorker的配置

Angular ServiceWorker 在“app.module”中配置：

注册询问ServiceWorker的路径。

项目编译

Angular 项目是使用ng build命令编译的。
它创建并填充“dist”文件夹。它包含“ng-app.webmanifest”和“ngsw.json”。

“ngsw.json”文件

“ngsw.json”文件包含所有已编译的 JS 和资产的列表，例如 GIF、CSS。Angular ServiceWorker 使用这个文件来缓存资源。

问题

如您所见，资源引用到 ROOT，Angular ServiceWorker 将尝试使用这样的 URL 下载这些资源

• https://website.com/---资源---

代替

• https://website.com/ng-app/dist/---resource---

帮助

有一个解决方案可以让 Angular Builder 指定正确的 URL 路径吗？

我正在尝试用正确的路径更改“ngsw.json”文件，现在它可以工作了。但这是一个技巧......

非常感谢

我正在使用一个角度应用程序，我计划在其中使用 angular /pwa (ngsw) 进行集成，并且当我加载已注册的服务工作者时，我可以在 CacheStorage 中看到项目。但是当我离线时会出错。我现在这是一个很长的问题，但非常感谢任何帮助。

我读了很多线程，为了更新范围，我做到了。将 webmanifest 添加到 MIME 类型现在一切都在浏览器在线时工作，仅当我离线时文档未加载低于错误。

当我在线时，下面是我可以看到服务工作者的所有加载的项目

以下是我的配置，我使用 angular 10

下面是我的网络清单，我将范围更新为“。” 在阅读了一些线程之后，如果我们将它放在 IIS 的子文件夹中，我们需要更改范围。

我没有更改 ngsw.json 中的任何内容

只是认为我们在这个角度项目中做的不同是将应用程序放在项目文件夹中，因为我们有不同的项目

我正在构建一个有角度的 PWA，我确实有 2 个视图，一个是ListView另一个是DetailView。因此 Listview 将向相对 URL /odata/driver/ZTMDRIROOT_C/请求数据，而 DetailView 将使用 URL /odata/driver/ZTMDRIROOT_C('6100085239')请求数据。这将是动态的。例如，它可以是

• /odata/driver/ZTMDRIROOT_C('6100085239')
• /odata/driver/ZTMDRIROOT_C('6100075609')
• /odata/driver/ZTMDRIROOT_C('6100085239')/to_stop

所以不可能在ngsw-config.json -> dataGroups中列出所有这些

URL /odata/driver/ZTMDRIROOT_C/对于ListView工作正常。但是当我尝试添加模式时，数据没有被填充到DetailView中。

这对我不起作用。这里有什么错误？请帮我。

提前致谢。