近年来，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
