在现代 Web 应用程序开发中，建设性能强、可离线访问的渐进式 Web 应用程序（Progressive Web App，PWA）变得越来越重要。随着 PWA 的流行，需要为全球各地的用户让应用程序变得更加适用，这就要求我们为应用程序提供多语言的支持。在本篇文章中，我们将探讨如何在 PWA 中实现多语言支持。
国际化和本地化
在开始实现多语言支持之前，我们需要先了解两个概念：国际化（Internationalization，i18n）和本地化（Localization，l10n）。
国际化是指使应用程序能够方便地在多个区域中使用的过程，包括设计和编写代码，使用可用于多语言环境的编程技术和数据结构，处理日期和时间，在应用程序中使用本地化资源等等。
而本地化是将应用程序的语言、货币、时间等信息进行本地化，使得用户可以在其本地环境中访问应用程序，同时还包括将应用程序的 UI（用户界面）中的所有文字本地化，并对不同的文化、语言和习惯进行适当的处理。
使用国际化和本地化工具
在实现多语言支持之前，我们需要先进行一些前置工作，包括：
- 选择适合自己的国际化和本地化工具。
- 为应用程序准备本地化资源。
选择适合自己的国际化和本地化工具可以方便我们实现多语言支持。一些常见的国际化和本地化工具包括：
- i18next，支持多语言本地化、可变字符串、plurals、可嵌套菜单等，具有完全的测试覆盖率。
- React Intl，外部化 React 组件的翻译并保留 React 的渲染能力的库。
- Polyglot.js，轻量级的国际化和本地化库，支持插值、Genders和复数。
对于资源文件，我们可以先在应用程序的根目录下创建一个 locales 文件夹，其中包含所有可用于本地化的语言，并分别在每个文件夹中创建包含本地化字符串和词汇的 JSON 文件。
例如，我们可以创建一个 locales/zh_CN.json 文件，并在其中添加以下本地化字符串：
{
"hello": "你好",
"welcome": "欢迎"
}在 PWA 中实现多语言支持
在我们选择了合适的国际化和本地化工具以及为应用程序准备了本地化资源之后，我们就可以开始实现多语言支持了。
我们会在以下三个方面进行多语言支持：
- 确定用户偏好语言。
- 使用适当的本地化工具库来提供多语言支持。
- 应用适当的本地化资源。
1. 确定用户偏好语言
在我们启用了 PWA 时，我们需要使用 navigator.language 属性确定用户实际使用的语言。一旦我们确定了用户的言语偏好，我们就可以在我们的应用程序中应用这种本地化语言流。
例如，我们在 app.js 文件中添加如下代码块：
-- -------------------- ---- -------
------ ---- ---- ----------
------ - ---------------- - ---- ----------------
----- --------- - ------ ---------
----- --------------- - -----
----- - -------- - - ----------
----- ---------------- - ---------------------------- - -------- - ----------------
----
----------------------
-------
------------ -----------------
------------- ------
-------------- -
------------ -----
--
---------- -
--- -
------------ -
-------- --------
---------- ---------
-
--
------ -
------------ -
-------- -----
---------- ----
-
-
-
---在上述代码中，我们首先将系统或浏览器语言检测到的用户语言变量存储在 navigator.language 中。接着，我们使用 fallbackLanguage 变量（如果用户偏好语言不在用户语言数组中，则返回 defaultLanguage 变量）初始化多语言实例，并将多语言资源对象传递给它。
2. 使用适当的本地化工具库
在确定用户偏好语言之后，我们需要使用适当的本地化工具库来提供多语言支持。本教程示例中，我们需要使用 i18next 作为我们的本地化工具库，这是一个完全覆盖测试的多语言库。
在此，我们将介绍如何使用 i18n 来解决 React 应用程序中的国际化。在 React 中使用 i18next，我们需要执行以下步骤：
1.使用 i18next 和 initReactI18next 导入库。
import i18n from "i18next";
import { initReactI18next } from "react-i18next";- 将
initReactI18next通过use函数插入 i18n 处理队列中，然后在.init中调用initReactI18next，以确保用于该 React 应用程序的本地化库的初始化。
-- -------------------- ---- -------
----
----------------------
-------
------------ -----------------
------------- ------
-------------- -
------------ -----
--
---------- -
--- -
------------ -
-------- --------
---------- ---------
-
--
------ -
------------ -
-------- -----
---------- ----
-
-
-
---3.在 React 组件中使用 useTranslation Hook。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
-------- ----- -
----- - - - - -----------------
------ -
-----
---------------------
-----------------------
------
--
-上述示例中，我们使用 useTranslation Hook，t 为转换字符串的别名。我们只需调用 t 函数即可将给定字符串转换为应用程序当前语言的本地化字符串。
3. 应用适当的本地化资源
最后一步是应用适当的本地化资源来确保 App 的界面适当地本地化。这包括：
- 日期和时间格式：语言和地区的日期和时间格式非常不同。在使用日期和时间时，请记住此处的区别。
- 货币和价格格式：货币和价格格式因语言和地区而异。
- 字符集和字体：某些语言和字体可能需要更宽的空间，因此请确保整个应用程序的 UI 将能够容纳这些需求。
在为其选择适当的本地化资源时，开发人员可以使用 Google 的 International Components for Unicode（ICU），以便更轻松地提供多语言和本地化字符串格式。
例如，我们可以使用 react-intl 的 FormattedDate 组件，以确保我们的日期和时间格式在 Unicode 区域设置上是正确的，并根据语言环境呈现正确的格式：
-- -------------------- ---- -------
-------- ----- -
----- - -- ---- - - -----------------
------ -
-----
---------------------
-----------------------
--------------
--------------------------------
--------------
------------
-------------
--------------
--------------------
-----------------------
----------------------
--
------
--
-现在，我们的应用程序已准备好支持多语言。用户可以选择他们的首选语言，并在应用程序中的所有字符串都被正确检索和本地化。
结论
在本教程中，我们通过使用 i18next 及其 React 包 React i18next，来向您展示了如何在 PWA 中实现多语言支持。我们看到，通过选择合适的国际化和本地化工具、为应用程序准备本地化资源以及应用适当的本地化资源，我们可以轻松地为用户提供适合他们语言环境的 PWA。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671226b0ad1e889fe20308f4