如何使用单个服务人员安装多语言 Angular PWA？答案

【问题标题】：How to enable installation of the multi language Angular PWA with single service worker?如何使用单个服务人员安装多语言 Angular PWA？
【发布时间】：2020-08-15 08:55:54
【问题描述】：

我已经准备了具有本地化语言版本的应用程序。为此，我使用了原生 Angular i18n 模块，它准备了两个应用程序包，每个包都使用适当的语言。

应用程序的每个版本都可以在我的 nginx 服务器上的单独位置下获得：

myapp.com/en/...
myapp.com/pl/...

我希望我的应用程序安装一次为 PWA，并使用（单个？）服务工作者提供两种语言版本。

不幸的是，我现在使用 @angular/pwa 模块 所能做的就是为每个应用程序提供单独的服务工作者，这会强制我的应用程序的每个语言版本单独安装。

我的问题是：有没有什么方法可以让应用程序按照我使用 @angular/pwa 或 Workbox 描述的方式工作？

// 顺便说一句，Angular 的创建者没有强调 @angular/localize 与 @angular/pwa 的集成，这有点令人惊讶。

【问题讨论】：

你使用哪个版本的 angular-cli？
我不认为这是真的。问题是你所有的翻译都是 JS 代码的一部分，因此不同的 l18ns 会有不同的代码。因此，您不能使用一名工人“组合”它们。这些实际上是最终不同的应用程序。也许您可以使用 ngx-translate 解决此问题，这需要更改翻译架构。但是，它的翻译独立于应用程序，因此您可以在一个应用程序安装中缓存所有翻译
@Sergey 感谢您的回答。是的，应用程序有不同的 js 代码，但是 Angular 对文件名进行哈希处理，所以它们在每种语言应用程序中都有不同的名称。理论上，如果可以缓存两个 index.html 中指定的文件，这样就可以解决问题。您知道这是否可以使用任何软件库或本机实现来实现？我知道ngx-translate库，但是这是不得已而为之，因为应用真的很大，所以要改架构需要很长时间。
@Jelly 我认为您可以通过两种方式手工制作。要么创建一个包含所有语言及其相应 JS 文件的配置，要么为 index.html 创建一个解析器。然后，您需要创建自己的工作程序，它将在页面加载时插入正确的脚本（您不能在运行中执行此操作，因为 JS 代码已经加载）。这将加载适当的应用程序。我猜每个应用程序都有你的工作人员
另外，为什么要将这两个应用程序安装在一个地方？您的实际应用程序托管在不同的 url 上，因此要在它们之间切换需要重新加载页面。因此单独安装每个版本是合理的。

标签： angular nginx internationalization progressive-web-apps angular-i18n

【解决方案1】：

我为 Angular 发布了 feature request (https://github.com/angular/angular/issues/43796)，目前正在考虑中。如果它在接下来的 60 天内达到 20 票，Angular 团队将考虑提供一个本地解决方案，让一个服务工作者提供所有已安装的语言，从而解决这里提到的问题。

【讨论】：

【解决方案2】：

我确实有同样的问题。我的应用程序永远不会在公共网络中，所以存在同样的问题。虽然我确实有问题要 PWA 找到服务人员。它抱怨说即使找到了服务人员也没有找到。我通过更改清单文件解决了这个问题。之前我确实有

"start_url": "/",

然后我改成

"start_url": "./",

然后它确实正确地找到了 serviceworker。

【讨论】：

【解决方案3】：

每种语言都有 N 个应用程序。它们托管在不同的域上。它们实际上是不同的应用程序。因此，即使您将所有这些都安装在一个 URL 中，您也可以安装所有这些。

作为将一个域用于不同应用程序的一种选择，您可以创建一个包含所有语言及其相应 JS 文件的配置，或者为 index.html 创建一个解析器。然后，您需要创建自己的工作程序，它将在页面加载时插入正确的脚本（您不能在运行中执行此操作，因为 JS 代码已经加载）。这将加载适当的应用程序。我猜每个应用程序都有你的工作人员。

如果您打算将 i18n 工具作为混合应用发布到 Google 商店，您可能需要考虑更换它。

作为另一种选择，您可以为您的 WebView 提供一个层，并根据用户选择的语言加载不同的 URL。

【讨论】：

事实上，我有 1 个适用于 N 语言的应用程序。有什么区别？语言