透過 Chrome 擴充功能連結 PWA 和 IWA

Demián Renzulli

身為網頁開發人員，最佳做法是盡可能使用最低信任度的安全模型設計應用程式，例如漸進式網頁應用程式 (PWA)。這種做法可盡量擴大觸及範圍、減少您必須管理的安全性負擔，並為開發人員和使用者提供最大的彈性。不過，由於網頁的設計預設為安全，因此保守的安全模式自然會限制作業系統和特定強大裝置 API 的存取權。

隔離網頁應用程式 (IWA) 解決了這個問題，它提供以網頁平台為基礎建構的隔離、組合、版本化、簽署及高度信任的應用程式模型。不過，在改用 IWA 之前，不妨考慮更循序漸進的做法：將 PWA 連接至 Chrome 擴充功能。這項技術適用於受管理的 ChromeOS 環境，例如受管理的使用者工作階段、受管理的訪客工作階段 (MGS) 或 Kiosk 模式。應用程式可透過安全訊息傳遞機制，使用低階擴充功能 API。下圖說明這種漸進式做法：先從標準網頁應用程式開始，加入相關功能，成為可安裝的 PWA，最後探索 PWA 和 Chrome 擴充功能路徑，解鎖其他 API。

漸進增強路徑。開發人員可以將可安裝的 PWA 與隨附的 Chrome 擴充功能配對，藉此縮小網頁安全環境與較低層級的 OS 和裝置功能之間的差距。

如果您的應用程式需要進階功能，但即使使用 Chrome 擴充功能 API (例如受控影格或Direct Sockets API) 仍無法取得，那麼建議您改用隔離網頁應用程式 (IWA)。不過，雖然 IWA 可解鎖強大的新網頁功能，您可能仍需要 Chrome 擴充功能專用的特定裝置層級 API，例如在 Kiosk 模式下重新啟動 ChromeOS 裝置的 chrome.runtime.restart()。幸好，您可以使用與 PWA 完全相同的方法，將 IWA 連線至 Chrome 擴充功能。以下步驟將說明這項技術。

逐步導入說明

部署 Companion 擴充功能

擴充功能是透過 Chrome 管理控制台部署。視目標環境而定，您會在對應部分中設定此項目 (例如，依序前往「裝置」>「Chrome」>「應用程式和擴充功能」>「資訊站」，即可設定資訊站模式，或前往「使用者和瀏覽器」或「受管理的訪客工作階段」的相關分頁)。您可以透過公開連結自行代管擴充功能，也可以直接在 Chrome 線上應用程式商店代管。如需管理擴充功能的詳細操作說明，請參閱官方說明文件。

實作訊息傳遞

設定擴充功能

如要接收及回覆來自網頁應用程式的訊息，請公開背景指令碼，監聽來自用戶端 (網頁應用程式) 的訊息，然後將這些要求 Proxy 至對應的 API 呼叫。在下列範例中，當網頁應用程式傳送包含 methodName 為 callRestart 的自訂訊息物件時，系統會將要求代理至重新啟動 ChromeOS 裝置。

Background.js

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

您可以設定擴充功能的資訊清單，使用 externally_connectable⁠⁠ 金鑰允許對擴充功能進行外部函式呼叫，並指定允許哪些網站和擴充功能呼叫擴充功能中的方法。如要進一步瞭解 Chrome 擴充功能和資訊清單 V3，請參閱官方說明文件。

如果您是從漸進式網頁應用程式 (PWA) 連線，請在相符項目陣列下方列出應用程式代管的標準 HTTPS 網域。以下範例說明如何設定資訊清單，讓 PWA 在 Kiosk 模式下執行：

Manifest.json

{
  "manifest_version": 3,
  "name": "Restart your kiosk app",
  "version": "1.0",
  "description": "This restarts your ChromeOS device.",
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "accepts_tls_channel_id": false,
    "matches": [
      "*://developer.chrome.com/*"
    ]
  }
}

如果您是從隔離網頁應用程式 (IWA) 連線，機制完全相同，但網址配置會變更。由於 IWA 是安全封裝的應用程式，且不會在標準網頁伺服器上執行，因此使用專屬通訊協定。您必須使用 isolated-app:// 通訊協定新增 IWA 的來源。

Manifest.json

{
  "manifest_version": 3,
  "name": "IWA Companion Extension",
  "version": "1.1",
  "description": "Companion extension for the IWA",
  "background": {
    "service_worker": "/scripts/background.js"
  },
  "externally_connectable": {
    "matches": [
      "isolated-app://*/*"
    ]
  }
}

這是擴充功能中監聽 PWA 或 IWA 訊息所需的最低程式碼量。

設定 PWA 和 IWA

如要從網頁應用程式呼叫擴充功能，您必須知道擴充功能的靜態 ID。這個 ID 會顯示在 chrome://extensions頁面上，您安裝 Chrome 擴充功能時也會看到這個 ID，擴充功能上傳至 Chrome 線上應用程式商店後，您也可以在商店中找到這個 ID。這可讓網頁應用程式指定要與哪個擴充功能通訊。接著，請呼叫 chrome.runtime.sendMessage⁠⁠ 並傳入擴充功能 ID，以及要傳送給擴充功能的訊息。

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

如要進一步瞭解如何將網頁應用程式連結至擴充功能以傳遞訊息，請參閱擴充功能說明文件⁠⁠。

示範

如要查看實際運作情況，請瀏覽 IWA Kitchen Sink 存放區。這個專案是各種 IWA 功能的綜合遊樂場，提供 Direct Sockets 和 Controlled Frame 等高信任度 API 的示範。此外，這個範例還提供 IWA 與 Chrome 擴充功能連線的完整運作範例。這個存放區包含範例隨附擴充功能和專屬網頁介面，說明如何使用安全訊息傳遞機制觸發擴充功能專屬方法。舉例來說，您可以直接從隔離網頁應用程式，使用 chrome.identity.getProfileUserInfo() API 測試擷取使用者的個人資料資訊。

結論

將網頁應用程式連結至 Chrome 擴充功能，可安全地逐步解鎖類似原生裝置的功能。設計應用程式架構時，請牢記以下幾項重點：

先從網頁開始：預設使用 PWA，盡可能擴大觸及範圍，並將安全性負擔降到最低。
使用擴充功能彌補差距：如要深入整合作業系統層級的功能 (例如 Kiosk 模式下的裝置重新啟動)，請部署隨附的 Chrome 擴充功能，並使用安全訊息傳遞功能將其連線至應用程式。
僅在必要時升級至 IWA：需要使用高信任度 API (例如 Direct Sockets、受控頁框或任何其他僅限 IWA 的 API) 時，請使用隔離網頁應用程式。