Progressive Web App（PWA）是一种基于 Web 技术和 API 的移动应用类型，使得在各种客户端设备上，可以提供类似于原生应用的体验。随着全球市场需求不断增加，多语言的支持已经成为现代应用的一个必要特性。本文将介绍如何在 PWA 应用中实现多语言支持。
1. 支持多语言的选项
在 PWA 应用中，您可以使用多种方法实现多语言支持，包括：
- 手动在每个页面或组件中添加翻译字典。虽然在实现上比较简单直观，但是不利于维护和升级，且出错的概率比较大。
- 使用 JavaScript 框架，如 React、Vue 或 Angular，将文本提取到单独的翻译文件中。这种方法比纯手动更易于维护和升级，但是仍然需要大量的手动工作。
- 使用现成的多语言转换库。有许多现成的库，如 i18next、LinguiJS、react-i18n 和 vue-i18n，可以简化多语言支持的实现过程并提供更强大的功能。
在这里，我们将探讨使用 i18next 库支持多语言。
2. i18next 库概述
i18next 是一个用于 JavaScript 的国际化库。它支持无限层级嵌套的多语言资源，支持变量替换，支持浏览器和服务器端，并且可以很好地与现有框架集成。
在介绍 i18next 的实现过程之前，首先需要安装需要用到的依赖库：
npm install i18next i18next-browser-languagedetector i18next-xhr-backend --save
安装完成后，在项目的顶层目录下创建一个 locales 文件夹，用于存放多语言资源文件。以中文和英文为例，在 locales 目录下创建两个子目录 en 和 zh，并在每个子目录下创建 translation.json 文件，用于存放对应语言的翻译文本。
translation.json 基本格式如下：
{
"key": "value",
"key.placeholder": "Hello {{name}}!",
"nested": {
"key": "Nested key"
}
}在页面上，需要将翻译文件与 i18next 进行初始化和加载，然后使用 t 函数获取翻译后的文本。
-- -------------------- ---- -------
------ ------- ---- ----------
------ ------- ---- ----------------------
------ ---------------- ---- -----------------------------------
-- --- -------
-------
-------------
----------------------
-------
------------ -----
------ -----
-------------- -
------------ ----- -- ----- ------- --
--
-------- -
--------- ------------------------------------
-
---
-- ------
---------------------------- -------
-- -- - ----------
-----------------
---------------------------- - ----- ------- ---
------------------------上述代码中，i18next.use(Backend).use(LanguageDetector) 表示 i18next 应该使用 XHR 后端和浏览器语言检测器。fallbackLng 表示默认语言，debug 表示开启调试模式，escapeValue 表示禁用文本中的 HTML 标签转义，backend.loadPath 表示翻译文件的路径。
3. React 中使用 i18next
在 React 中，可以使用 react-i18next 库将 i18next 和 React 组件集成起来。
首先需要安装 react-i18next：
npm install react-i18next --save
然后，在组件中使用 useTranslation 钩子获取 t 函数和 i18n 对象。t 函数用于获取翻译后的文本，i18n.language 表示当前语言。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
-------- ------------- -
----- - -- ---- - - -----------------
------ -
-----
-------------------
------------------------ - ----- ------- -------
------------------------
------- ----------- -- --------------------------------------
------- ----------- -- -------------------------------------------
------
-
-上述代码中，通过创建 MyComponent 函数和使用 useTranslation 钩子获取 t 函数和 i18n 对象。具有翻译文本的组件，例如 h1 和 p 标签，使用 t 函数获取翻译后的文本。i18n 对象用于切换语言。
4. Vue 中使用 i18next
在 Vue 中，可以使用 vue-i18n 库将 i18next 和 Vue 组件集成起来。
首先需要安装 vue-i18n：
npm install vue-i18n --save
然后，在 main.js 文件中初始化 i18n 和 Vue 实例。之后，可以在任何地方通过 $t 方法获取翻译后的文本，$i18n.locale 表示当前语言。
-- -------------------- ---- -------
------ --- ---- -----
------ ------- ---- ----------
------ ------- ---- ---------
------ ------- ---- ---------------------
-- --- -------
-------
-------------
-------
------------ -----
------ -----
-------------- -
------------ -----
--
-------- -
--------- ------------------------------------
-
--
-- --- -------
----------------
----- ---- - --- ---------
-- -------
------- -----
-- ------
--------- -
--- ---
--- --
-
--
-- ------
---------------------------- ------ ----- -- -
-- ----- -
----------------
------
-
-- -------- ------- -
----- -- - ----------------------------------------
----- -- - ----------------------------------------
--------------------------- ---
--------------------------- ---
--
--- -----
-----
------- - -- ------
------------------- -------------------- ---- -------
----------
-----
----------------------
-------------------------- ------ ---------------
---------------------------
------- -------------------- - -----------------
------- -------------------- - ----------------------
------
-----------上述代码中，首先在 main.js 文件中初始化 i18next 和 Vue 实例。在加载翻译文件后，使用 i18n.setLocaleMessage 方法将翻译文件加载到 VueI18n 中。
之后，在具有翻译文本的组件中，例如 h1 和 p 标签，使用 $t 方法获取翻译后的文本。$i18n 对象用于切换语言。
5. 总结
本文介绍了如何使用 i18next 库和多语言转换库来实现在 PWA 应用中的多语言支持，并且详细地讲解了在 React 和 Vue 中实现多语言支持的实现方法。多语言支持可以帮助开发者更好地扩展国际市场并且提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654ddba07d4982a6eb73aa8c