由于互联网的快速发展，我们的用户群体已经越来越广泛。为了满足更多用户对多语言的要求，许多网站都必须提供多语言支持。那么在 PWA 应用中，该如何实现多语言处理呢？
困境
在传统网站上，多语言处理是由后端来完成的。但在 PWA 中，由于其本质上是前端应用，这就需要我们先通过 JavaScript 来处理多语言的展示，再将其渲染在浏览器中。然而，前端展示关键是语言文件的读取，这就要求我们必须确保语言文件能够被 PWA 应用也可以读取。现今大多数 PWA 应用是在移动端上使用的，这个时候单独为这个平台写语言文件显然是不够实际的。同时，由于 PWA 应用本身是一个离线应用，我们不能够直接从服务器端获取语言文件。真正的困境是，我们如何确保用户获取到了他想要的语言版？
需求
当我们开始考虑 PWA 处理多语言时，我们需要先确定我们所需的功能需求。这些功能如下：
- 自由选择语言
- 不需重新启动应用
- 在离线状态下同样可查看数据
下面，我们开始进入实战，分别进行以下的方案实现。
当前所在位置：前端
方法一：基于 Web 的翻译 API
如果你的应用是基于 Web 服务的，那么第一种方案就最为合适。
- 使用 Google 翻译 API
根据用户所在位置，来动态选择拥有该位置的语言，并利用 Google Translation API 实现翻译。Google 翻译 API 是一种高精度的翻译服务，而且支持多国语音。
-- -------------------- ---- -------
-------- --------------- ----- -
----- --- - -----------------------------------------------------------
----- -------- - ---------------------------------
----------------------------------------------------------------------------------------
--------- -- -----------
---------- -- -
-- ------------ ------ ----
--
---------- -- --------------------
-- 使用 Web Speech API
Google Chrome 浏览器支持 Web Speech API，这就意味着我们可以通过 API 在移动设备上转换语音。
const synthesis = window.speechSynthesis;
const voices = synthesis.getVoices();
function speakText(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = navigator.language.substr(0, 2);
synthesis.speak(utterance);
}方法二：读取内嵌云端文件
如果你的应用是不同的平台都可以使用的，也就是说，在任何平台上它的体验都应该是一模一样的，那么我们就要考虑内嵌语言文件了。
- 将语言文件打包到应用中
之前我们已经提到，PWA 应用是离线应用，它的离线模式会将所有的网页、资源和样式都打包到本地缓存中。在这个包中我们也可以存储语言文件。同时，由于这个文件是存储在网络中的，当我们在应用中访问的时候，我们要使用 fetch 在应用中的 Service Worker 中将其读取出来。
-- -------------------- ---- -------
--------------------
-------------- -- -
-- ------------- -
-- ----- --- ----- --- --------
----- ------ - -----------------
-----------------------
----------- -- -
------------------------ --------
---
------ ---------
-
----- --- ---------- -------- -----
--
---------- -- -
-------------------
------ --------------------------
---- 应用本地化
JavaScript 库 i18next 可以将文本翻译成你所选择的语言。
-- -------------------- ---- -------
------ ------- ---- ----------
--------------
---- ----- -- -----
------------ ----- -- ----
---------- -
--- -
------------ -
------ ------ -------
-
--
--- -
------------ -
------ -------
-
--
---
-
--
---------------- -- --------方法三：使用 PWA 有效调用 API
如果你的应用是基于 PWA 平台的，那么下面的方案就最为合适。
- 通过 PWA 平台申请语言 API
通过申请 PWA 的语言 API 来处理多语言。
navigator.languages // 用户使用的语言 navigator.language // 用户主要使用的语言
- 语言选择器
语言选择器能够随时更改用户当前的语言。这就意味着我们可以通过语言选择器，动态读取并调用服务器端的语言数据。当用户切换语言后，我们可以根据用户所选择的语言来渲染页面。
<select> <option value="EN">English</option> <option value="ES">Español</option> <option value="FR">Français</option> <option value="ZH">中文</option> </select>
-- -------------------- ---- -------
----- ---------------- - ---------------------------------
----- --------------- - -----------------------
----- --- - --------------------------------------------------------------------------------
----------
-------------- -- -
-- ------ ----------- -----
--
------------ -- -
---------------------
---结论
PWA 应用中实现多语言应该分为三个阶段：
- 第一步，我们应用中需要有语言数据，通过读取内嵌云端的语言文件，以及使用重讲将其翻译为用户所需的语言。
- 第二步，为语言选择器增加支持，允许用户在任何时候进行更改。当语言选择器发生改变时，我们可以通过调用 API 来同步用户所选择的语言。
- 第三步，对于固定文本，我们需要通过 JavaScript 库 i18next 进行本地化。
通过这些方法，我们可以很好地解决 PWA 应用中的多语言问题，并实现向更广泛用户群体提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704fb7ad91dce0dc85126e3