近年来，Progressive Web Apps (PWA) 已经逐渐成为了前端开发的热门技术，因为它可以让普通的 Web 应用更像原生 App，从而提升用户体验。而其中一个重要的特性就是 On-device Translation（设备端翻译）功能，它可以让用户通过点击按钮或其他交互手段，将页面上的内容翻译成为其它语言，而无需离开当前页面。
在本文中，我们将探讨如何实现 PWA 应用的 On-device Translation 功能，包括基本思路、相关技术、实现步骤等，并通过示例代码来帮助读者理解和实践。
基本思路
要实现 On-device Translation 功能，我们需要解决两个主要问题：
- 如何获取页面上的文本内容？
- 如何实现文本的翻译，并将翻译后的文本渲染到页面上？
对于第一个问题，我们可以使用 JavaScript 中的 DOM API 来遍历页面上的元素，并获取其中的文本内容。对于第二个问题，我们可以使用 Google 提供的翻译 API 或其它开源的翻译库，将文本翻译成为其它语言，并将翻译后的结果渲染到页面上。
基于以上思路，我们可以用简单的 JavaScript 代码来实现一个 On-device Translation 功能。
相关技术
在实现 On-device Translation 功能时，我们需要至少掌握以下技术：
- JavaScript：用于实现页面元素的遍历和文本的翻译。
- DOM API：用于获取页面上的元素。
- 翻译 API 或库：用于将文本翻译成为不同的语言。
在这些技术中，翻译 API 或库是实现 On-device Translation 功能的关键所在。常用的翻译 API 包括 Google Translate API 和 Microsoft Translator API，它们都提供了丰富的翻译语言和 API 接口，但需要付费或者注册开发者账户才能使用。如果你不想花钱或者暂时无法注册开发者账户，也可以选择一些开源的翻译库，如 Google Translation API、Baidu Translation API 和 Youdao Translation API 等。
实现步骤
接下来，我们将分步骤介绍如何实现 On-device Translation 功能。
步骤 1：初始化翻译 API 的配置信息
在使用翻译 API 或库之前，我们需要先初始化其配置信息。以 Google Translate API 为例，我们需要为其提供 API Key 和目标翻译语言等必要的参数。
// 初始化 Google Translate API 配置信息
function initGoogleTranslation() {
gapi.client.setApiKey("YOUR_API_KEY");
gapi.client.load("translate", "v2", function() {
console.log("Google Translation API Loaded");
});
}步骤 2：遍历页面上的元素，获取文本内容
使用 DOM API 可以很方便地遍历页面上的元素，并获取其中的文本内容。在获取文本内容时，我们需要先剔除其中的 HTML 标签和空白字符，以便更精确地进行翻译。
-- -------------------- ---- -------
-- -------------
-------- -------------------- -
--- -------- - -----------------------------------
--- ---- - ---
--- ---- - - -- - - ---------------- ---- -
--- ------- - ------------
-- -- ---- ------------------
-- ----------------- -- ----------------------------- -- -------- -- ----------------------------- -- -------- -
--------- -- ---------
-
--- ------- - ---------------------------
-- --------- -
---- -- ------- - -------
-
-
------ -----
-步骤 3：调用翻译 API 进行文本翻译
在获取文本内容后，我们可以调用翻译 API 对其进行翻译。以 Google Translate API 为例，我们可以通过其提供的 gapi.client.language.translations.list 接口，将源文本和目标语言等必要参数传递给 API，并获取翻译后的结果。
-- -------------------- ---- -------
-- -- ------ --------- --- ------
-------- ------------------- --------------- --------- -
--- ------- - ----------------------------------------
-- -----
------- --------------
---
---------------------------------- -
--- ------------ - ----------------------
--- -------------- - ---
--- ---- - - -- - - -------------------- ---- -
--- ----------- - ----------------
-- ---------------------------- -
-------------- -- -------------------------- - -------
-
-
-- ---------- -
-------------------------
-
---
-步骤 4：将翻译后的文本渲染到页面上
在完成文本翻译后，我们需要将翻译后的文本渲染到页面上。这里，我们可以选择在页面上新增一个元素，将翻译后的文本作为其内部 HTML 内容，并动态地将其插入到当前页面的合适位置。
// 将翻译后的文本渲染到页面上
function renderTranslation(translatedText) {
var wrapper = document.createElement("div");
wrapper.innerHTML = translatedText;
var body = document.getElementsByTagName("body")[0];
body.appendChild(wrapper);
}步骤 5：绑定交互事件，触发翻译功能
最后，我们需要将翻译功能绑定到某个交互事件上，以便用户能够方便地启用它。在这里，我们选择为页面添加一个固定的按钮，当用户点击该按钮时，就会触发翻译功能。
-- -------------------- ---- -------
-- ----------
-------- ---------------------- -
--- ------ - ---------------------------------
---------------- - -----
-------------------------------- ---------- -
--- ---- - ---------------------
------------------- ----- ------------------------ -
----------------------------------
---
---
--- ---- - -----------------------------------------
-------------------------
-至此，我们已经完成了一个简单的 On-device Translation 功能的实现。整个过程细节较多，逻辑稍多，读者在实践过程中需要具备一定的基础和耐心，才能够达到预期的效果。下面的示例代码可以帮助读者更好地理解和实践。
示例代码
下面的示例代码演示了如何在 PWA 应用中实现 On-device Translation 功能。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
---------------- ----------- ------------
-------
------
------- -------------------------------------------------
--------
-- --- ------ --------- --- ----
-------- ----------------------- -
--------------------------------------
----------------------------- ----- ---------- -
------------------- ----------- --- ---------
---
-
-- -------------
-------- -------------------- -
--- -------- - -----------------------------------
--- ---- - ---
--- ---- - - -- - - ---------------- ---- -
--- ------- - ------------
-- -- ---- ------------------
-- ----------------- -- ----------------------------- -- -------- -- ----------------------------- -- -------- -
--------- -- ---------
-
--- ------- - ---------------------------
-- --------- -
---- -- ------- - -------
-
-
------ -----
-
-- -- ------ --------- --- ------
-------- ------------------- --------------- --------- -
--- ------- - ----------------------------------------
-- -----
------- --------------
---
---------------------------------- -
--- ------------ - ----------------------
--- -------------- - ---
--- ---- - - -- - - -------------------- ---- -
--- ----------- - ----------------
-- ---------------------------- -
-------------- -- -------------------------- - -------
-
-
-- ---------- -
-------------------------
-
---
-
-- -------------
-------- --------------------------------- -
--- ------- - ------------------------------
----------------- - ---------------
--- ---- - -----------------------------------------
--------------------------
-
-- ----------
-------- ---------------------- -
--- ------ - ---------------------------------
---------------- - -----
-------------------------------- ---------- -
--- ---- - ---------------------
------------------- ----- ------------------------ -
----------------------------------
---
---
--- ---- - -----------------------------------------
-------------------------
-
-- --- ------ --------- --- -----------
-------- ------ -
------------------------
-----------------------
-
-- ---------------
------------------------------- ----- -------
---------
-------
-------在上面的示例代码中，我们使用 Google Translate API 进行文本翻译，并将翻译后的文本渲染到页面上。读者可以根据自己的需求选择不同的翻译 API 或库，并根据实际情况调整代码实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca56a6e46428fe9e25d973
