PWA 应用如何支持多语言-JavaScript中文网-JavaScript教程资源分享门户

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 函数获取翻译后的文本。

// javascriptcn.com 代码示例
import i18next from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

// 初始化 i18next
i18next
  .use(Backend)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false // React 需要，Vue2 无需
    },
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    }
  });

// 加载翻译文件
i18next.loadLanguages(['en', 'zh']);

// 使用 t 函数获取翻译后的文本
i18next.t('key');
i18next.t('key.placeholder', { name: 'World' });
i18next.t('nested.key');

上述代码中，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 表示当前语言。

// javascriptcn.com 代码示例
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('key')}</h1>
      <p>{t('key.placeholder', { name: 'World' })}</p>
      <p>{t('nested.key')}</p>
      <button onClick={() => i18n.changeLanguage('zh')}>中文</button>
      <button onClick={() => i18n.changeLanguage('en')}>English</button>
    </div>
  )
}

上述代码中，通过创建 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 表示当前语言。

// javascriptcn.com 代码示例
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import i18next from 'i18next'
import Backend from 'i18next-xhr-backend'

// 初始化 i18next
i18next
  .use(Backend)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    }
  })

// 初始化 VueI18n
Vue.use(VueI18n)
const i18n = new VueI18n({
  // 设置使用的语言
  locale: 'en',
  // 设置翻译方法
  messages: {
    en: {},
    zh: {}
  }
})

// 加载翻译文件
i18next.loadLanguages(['en', 'zh'], (err) => {
  if (err) {
    console.log(err)
    return
  }

  // 将翻译文件加载到 VueI18n 中
  const en = require(`./locales/en/translation.json`)
  const zh = require(`./locales/zh/translation.json`)
  i18n.setLocaleMessage('en', en)
  i18n.setLocaleMessage('zh', zh)
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{$t('key')}}</h1>
    <p>{{$t('key.placeholder', {name: 'World'})}}</p>
    <p>{{$t('nested.key')}}</p>
    <button @click="$i18n.locale = 'zh'">中文</button>
    <button @click="$i18n.locale = 'en'">English</button>
  </div>
</template>

上述代码中，首先在 main.js 文件中初始化 i18next 和 Vue 实例。在加载翻译文件后，使用 i18n.setLocaleMessage 方法将翻译文件加载到 VueI18n 中。

之后，在具有翻译文本的组件中，例如 h1 和 p 标签，使用 $t 方法获取翻译后的文本。$i18n 对象用于切换语言。

5. 总结

本文介绍了如何使用 i18next 库和多语言转换库来实现在 PWA 应用中的多语言支持，并且详细地讲解了在 React 和 Vue 中实现多语言支持的实现方法。多语言支持可以帮助开发者更好地扩展国际市场并且提高用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654ddba07d4982a6eb73aa8c