PWA 应用如何实现 On-device Translation 功能?

阅读时长 12 分钟读完

近年来,Progressive Web Apps (PWA) 已经逐渐成为了前端开发的热门技术,因为它可以让普通的 Web 应用更像原生 App,从而提升用户体验。而其中一个重要的特性就是 On-device Translation(设备端翻译)功能,它可以让用户通过点击按钮或其他交互手段,将页面上的内容翻译成为其它语言,而无需离开当前页面。

在本文中,我们将探讨如何实现 PWA 应用的 On-device Translation 功能,包括基本思路、相关技术、实现步骤等,并通过示例代码来帮助读者理解和实践。

基本思路

要实现 On-device Translation 功能,我们需要解决两个主要问题:

  1. 如何获取页面上的文本内容?
  2. 如何实现文本的翻译,并将翻译后的文本渲染到页面上?

对于第一个问题,我们可以使用 JavaScript 中的 DOM API 来遍历页面上的元素,并获取其中的文本内容。对于第二个问题,我们可以使用 Google 提供的翻译 API 或其它开源的翻译库,将文本翻译成为其它语言,并将翻译后的结果渲染到页面上。

基于以上思路,我们可以用简单的 JavaScript 代码来实现一个 On-device Translation 功能。

相关技术

在实现 On-device Translation 功能时,我们需要至少掌握以下技术:

  1. JavaScript:用于实现页面元素的遍历和文本的翻译。
  2. DOM API:用于获取页面上的元素。
  3. 翻译 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 和目标翻译语言等必要的参数。

步骤 2:遍历页面上的元素,获取文本内容

使用 DOM API 可以很方便地遍历页面上的元素,并获取其中的文本内容。在获取文本内容时,我们需要先剔除其中的 HTML 标签和空白字符,以便更精确地进行翻译。

-- -------------------- ---- -------
-- -------------
-------- -------------------- -
  --- -------- - -----------------------------------
  --- ---- - ---

  --- ---- - - -- - - ---------------- ---- -
    --- ------- - ------------

    -- -- ---- ------------------
    -- ----------------- -- ----------------------------- -- -------- -- ----------------------------- -- -------- -
      --------- -- ---------
    -

    --- ------- - ---------------------------

    -- --------- -
      ---- -- ------- - -------
    -
  -

  ------ -----
-

步骤 3:调用翻译 API 进行文本翻译

在获取文本内容后,我们可以调用翻译 API 对其进行翻译。以 Google Translate API 为例,我们可以通过其提供的 gapi.client.language.translations.list 接口,将源文本和目标语言等必要参数传递给 API,并获取翻译后的结果。

-- -------------------- ---- -------
-- -- ------ --------- --- ------
-------- ------------------- --------------- --------- -
  --- ------- - ----------------------------------------
    -- -----
    ------- --------------
  ---

  ---------------------------------- -
    --- ------------ - ----------------------
    --- -------------- - ---
        
    --- ---- - - -- - - -------------------- ---- -
      --- ----------- - ----------------

      -- ---------------------------- -
        -------------- -- -------------------------- - -------
      -
    -

    -- ---------- -
      -------------------------
    -
  ---
-

步骤 4:将翻译后的文本渲染到页面上

在完成文本翻译后,我们需要将翻译后的文本渲染到页面上。这里,我们可以选择在页面上新增一个元素,将翻译后的文本作为其内部 HTML 内容,并动态地将其插入到当前页面的合适位置。

步骤 5:绑定交互事件,触发翻译功能

最后,我们需要将翻译功能绑定到某个交互事件上,以便用户能够方便地启用它。在这里,我们选择为页面添加一个固定的按钮,当用户点击该按钮时,就会触发翻译功能。

-- -------------------- ---- -------
-- ----------
-------- ---------------------- -
  --- ------ - ---------------------------------
  ---------------- - -----

  -------------------------------- ---------- -
    --- ---- - ---------------------
    ------------------- ----- ------------------------ -
      ----------------------------------
    ---
  ---

  --- ---- - -----------------------------------------
  -------------------------
-

至此,我们已经完成了一个简单的 On-device Translation 功能的实现。整个过程细节较多,逻辑稍多,读者在实践过程中需要具备一定的基础和耐心,才能够达到预期的效果。下面的示例代码可以帮助读者更好地理解和实践。

示例代码

下面的示例代码演示了如何在 PWA 应用中实现 On-device Translation 功能。

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ----- --------------- ---------------------------- -----------------
  ---------------- ----------- ------------
-------
------
  ------- -------------------------------------------------
  --------
    -- --- ------ --------- --- ----
    -------- ----------------------- -
      --------------------------------------
      ----------------------------- ----- ---------- -
        ------------------- ----------- --- ---------
      ---
    -

    -- -------------
    -------- -------------------- -
      --- -------- - -----------------------------------
      --- ---- - ---

      --- ---- - - -- - - ---------------- ---- -
        --- ------- - ------------

        -- -- ---- ------------------
        -- ----------------- -- ----------------------------- -- -------- -- ----------------------------- -- -------- -
          --------- -- ---------
        -

        --- ------- - ---------------------------

        -- --------- -
          ---- -- ------- - -------
        -
      -

      ------ -----
    -

    -- -- ------ --------- --- ------
    -------- ------------------- --------------- --------- -
      --- ------- - ----------------------------------------
        -- -----
        ------- --------------
      ---

      ---------------------------------- -
        --- ------------ - ----------------------
        --- -------------- - ---
        
        --- ---- - - -- - - -------------------- ---- -
          --- ----------- - ----------------

          -- ---------------------------- -
            -------------- -- -------------------------- - -------
          -
        -

        -- ---------- -
          -------------------------
        -
      ---
    -

    -- -------------
    -------- --------------------------------- -
      --- ------- - ------------------------------
      ----------------- - ---------------

      --- ---- - -----------------------------------------
      --------------------------
    -

    -- ----------
    -------- ---------------------- -
      --- ------ - ---------------------------------
      ---------------- - -----

      -------------------------------- ---------- -
        --- ---- - ---------------------
        ------------------- ----- ------------------------ -
          ----------------------------------
        ---
      ---

      --- ---- - -----------------------------------------
      -------------------------
    -

    -- --- ------ --------- --- -----------
    -------- ------ -
      ------------------------
      -----------------------
    -

    -- ---------------
    ------------------------------- ----- -------
  ---------
-------
-------

在上面的示例代码中,我们使用 Google Translate API 进行文本翻译,并将翻译后的文本渲染到页面上。读者可以根据自己的需求选择不同的翻译 API 或库,并根据实际情况调整代码实现。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67ca56a6e46428fe9e25d973

纠错
反馈