将PWA Web清单本地化

Question

有没有一种方式可以使 Web Manifest 本地化？即有多个翻译的名称、描述等...。

我已经想到了几种潜在的解决方案，但它们各自都有相当大的缺点...

潜在方案1（首选但不确定是否可行）：根据url中的语言环境（例如 example.com/en/foo），加载相对应的manifest。

例如： - 对于 example.com/en/foo，加载 example.com/en/manifest.json - 对于 example.com/jp/foo，加载 example.com/jp/manifest.json

缺点： - 我认为这并不能真正起作用，因为一个网站只能有一个manifest（就我所知道的），而且我非常确定它需要在根目录下。 - 即使这是可能的，考虑到我的应用是静态托管的SPA，我不太确定如何实现它，即在manifest被浏览器加载之前，我无法动态更新链接到manifest的文件。也许我可以相对于URI加载manifest，但我不是100%确定这会起作用。

潜在方案2：托管多个版本的PWA（子域名或TLD）... 例如： - en.example.com/example.com - jp.example.com/example.jp - 等等...

由于manifest是通过构建过程生成的，通过将多个部署步骤添加到流水线中，这实际上非常容易实现。然后我将使用每个部署的环境变量来确定要插入manifest中的文本。

缺点： - 应用程序语言的切换不可能（这是客户的一个非常重要的特性）。 - 无论实现起来有多“容易”，它看起来都不正确。

- Ben Carey

Answer 1

在关于Web清单的W3C文档中，我发现以下内容：

预期作者将使用以下选项之一本地化清单内容: 动态设置语言： 这可以包括询问最终用户他们的首选语言，并根据该语言偏好动态添加或替换文档中的清单链接关系（例如，使用类似“manifest.php?lang=fr”的URL）。 在服务器上使用内容协商、地理定位等： 托管Web应用程序的服务器可以尝试通过使用地理定位或使用内容协商（例如，使用[RFC7540]的“Accept-Language”标题，甚至是自定义HTTP标题）来预先确定最终用户的语言。

但是，这只是说明了应该做什么，而没有具体说明如何做。

目前在Github上有关于此事的开放请求。特别是这个链接对W3C网站上的建议提出质疑。

我会在收集更多信息后立即更新答案。

Google提供了一个更实用的指南来本地化清单文件，可能可以作为Web清单的指南。

---

更新

你能为你的index.html创建一个小脚本吗？

你不需要使用php，只需使用纯净的JS（如果你可以控制index.html文件），并根据用户的语言环境加载特定的清单文件。

<!-- If English is detected, the script will load this into the page -->
<link rel="manifest" href="/path.../en.manifest.json">

<!-- If French is detected, the script will load this instead -->
<link rel="manifest" href="/path.../fr.manifest.json">

- Francesco

---

谢谢你，Francesco。然而，我已经阅读了这份文档，不幸的是它并没有解决我的问题。我正在构建的PWA是静态的，即没有后端（无法使用PHP），W3C提出的另一种建议方法实际上被认为是非常糟糕的做法...我很惊讶他们会建议这样做... Google的解决方案只适用于Google Play商店，并没有考虑到应用程序可能直接从浏览器安装。生成本地化清单很容易，问题在于在加载默认清单之前告诉浏览器要加载哪个清单... - Ben Carey

例如，如果访问者前往 example.com，我的应用程序将使用 JavaScript 将用户重定向到 example.com/en。因此，即使我可以相对于 en 加载清单，也为时已晚，因为在重定向用户之前，清单已经加载了。为您的努力点赞 :-D - Ben Carey

没关系，我找到了一个非常有趣的主题。我已经更新了答案并将继续搜索。 - Francesco

当然，我已经从头开始构建整个项目，因此可以控制任何资产。但是，如果JS要更新DOM，则意味着页面已经加载完成，因此清单已经加载完成，我认为它无法“更新”。话虽如此，我实际上还没有尝试过。这是我以前的一个想法，但我认为它不起作用... - Ben Carey

我可能听起来很蠢，但是是否有可能在页面加载后仅链接清单，读取用户的语言设置，然后动态加载正确的 manifest.webmanifest？ - Justin

Answer 2

我绝对不建议使用多个静态应用程序清单文件（DRY等）。

为本地化清单使用不同的URL通常被认为是不好的做法。浏览器将看到不同的清单URL并将它们视为唯一的渐进式Web应用程序（尽管使用新的id属性，今天可能可以克服这个问题）。

出人意料的是，使用该方法的最佳方式是让所有语言版本共享相同的scope。因此，如果用户切换语言，他们不会再次提示安装您的渐进式Web应用程序。

在 Progressier 上，我的实现通过 accept-language 请求头在服务端检测语言。如果用户首选语言有本地化版本，则使用该版本并相应动态生成应用清单 JSON。它目前适用于以下清单参数：name、short_name、description、start_url、screenshots

这种方法的优点是清单的 URL 从不变化。缺点是更难以编程方式强制使用特定语言——它只遵循用户的语言偏好（这本身并不是坏事，如果你问我）。

然而，如果这是一个重要的要求，一种可能的解决方案是当清单的 fetch 请求通过服务工作者传输时覆盖 accept-language 请求头。

- Kevin Basset