從 Chrome 應用程式轉換

遷移選項

從 Chrome 應用程式遷移主要有以下兩種:網頁應用程式和 Chrome 擴充功能:

Chrome 應用程式可以遷移至網頁應用程式或 Chrome 擴充功能

在大多數情況下,網頁應用程式都是較偏好的路徑。在某些情況下,Chrome 擴充功能可用於網頁不支援的用途,例如在沒有使用者介面的情況下在背景執行。

網頁應用程式

如要從 Chrome 應用程式進行遷移,建議您建立網頁應用程式。如此一來,您就可以使用進階功能,例如網路功能專案。「功能」專案中的 API 現已涵蓋過去可透過 Chrome App API 達成的大多數用途。不過,這些工具並未強制規定使用這些功能:網路的彈性可讓開發人員選擇最符合自身需求的複雜度。

網頁應用程式的優點

網頁應用程式擁有許多比 Chrome 應用程式的優勢:

  • 可攜性:Chrome 應用程式只會在 Chrome 中執行。網頁應用程式大多可在大多數的瀏覽器和作業系統上執行,但對於各種 API 的支援不盡相同。
  • 開發人員體驗:Chrome 應用程式使用與網頁應用程式相同的技術 (HTML、JavaScript 和 CSS),但部分 Chrome 應用程式進階功能 (例如背景頁面) 並不符合標準,因此需要額外的知識。
  • 功能集:Chrome 應用程式仰賴的 API 已不再維護或更新新功能。網頁應用程式仰賴開放網路,這個網路會持續演進,並可存取所有最新的 API。
  • 安裝與更新:Chrome 應用程式必須手動安裝和更新,有時需要經過商店審查。網頁應用程式可以直接透過瀏覽器存取,並可視需求安裝。網頁應用程式的更新會在瀏覽器擷取新檔案後立即立即更新。
  • 支援:雖然 Chrome 應用程式和網頁應用程式擁有數量龐大的社群,但網路平台的能見度大幅增加,提供了更廣泛的開發工具 (例如架構和程式庫) 來支援開發人員。

漸進式網頁應用程式

漸進式網頁應用程式 (簡稱 PWA) 是利用新型 API 建構並最佳化的網頁應用程式,可提供更完善的功能、可安裝性和可靠性。實作這些功能可讓您在網路上提供類似應用程式的體驗。

可安裝性

無論是在電腦和行動平台上,PWA 都可以安裝,但這是選用設定,因為仍可直接透過瀏覽器存取。選擇安裝 PWA 的使用者,可以透過圖示和捷徑啟動 PWA。您可以在 PWA 的網路資訊清單檔案中提供中繼資料,指出安裝後會在獨立視窗中開啟。

可靠性

即使在網路狀況不佳,PWA 也能持續運作。這可以透過 PWA 的核心元件 (稱為「服務工作站」) 實現。Service Worker 可讓您攔截網路要求並提供快取內容,確保應用程式可在離線或連線不穩的情況下運作。Workbox 等程式庫提供一組立即可用的策略,可讓您實作常見的離線功能,大幅簡化開發作業。

進階功能

網路功能專案可協助網頁應用程式達成 Chrome 應用程式可實作的許多用途。不過,網路的安全性模型設有某些限制。以下列舉一些可用來取代現有的 Chrome 應用程式 API 的進階網路功能:

  • 藍牙和 USB 存取: 網路藍牙網路 USB 分別提供 chrome.bluetoothchrome.usb 的替代方案。
  • 檔案系統管理:File System Access APIchrome.fileSystem API 的替代方案。
  • 捷徑:網頁應用程式可透過監聽各種按鍵事件 (例如 keydown),支援鍵盤快速鍵,但你能支援的快速鍵有限。當您的網頁應用程式在全螢幕模式下使用時,可以使用 Keyboard Lock API 攔截這些系統捷徑。
  • 永久儲存空間:在網頁應用程式中要求「永久儲存空間」權限時,可提供與 Chrome 應用程式 unlimitedStorage 權限類似的功能。
  • 地理位置:Geolocation API 可用於網頁應用程式找出使用者的所在位置,做為地理位置存取權的替代項目。
  • 背景處理:background 權限的替代方案有 Background Sync APIPeriodic Background Sync API
  • 複製到剪貼簿:Async Clipboard API 可讓您透過程式複製及貼上文字和圖片。

Chrome 擴充功能

網頁應用程式是從 Chrome 應用程式遷移的最佳替代方案,但在某些情況下,您可以使用 Chrome 擴充功能。擴充功能也採用網頁技術 (HTML、CSS 和 JavaScript) 建構而成,可用於新增或修改瀏覽器功能,以及自訂其他網頁應用程式,提供更優異的使用者體驗。

建構獨立的擴充功能

視您要提供的使用者體驗而定,將您的 Chrome 應用程式轉換為擴充功能。例如,您可以提供「瀏覽器動作」按鈕,在使用者介面中顯示小型彈出式視窗,或是前往擴充功能提供的頁面。這個 UI 模型可能更適合在背景執行大部分工作的應用程式。

從網頁應用程式連結 Chrome 擴充功能

如果您的 Chrome 應用程式提供網路平台未提供的功能,或許可以將 Chrome 擴充功能連結至網頁應用程式,並授予其擴充功能 API 的存取權。這種做法的缺點是使用者 / IT 管理員必須管理兩個不同的部分 (網頁應用程式和隨附擴充功能)。請注意,Chrome 擴充功能無法在部分瀏覽器中執行,您應偵測何時無法使用必要功能,並針對這些其他瀏覽器的使用者提供說明文字。

我該建立網頁應用程式或 Chrome 擴充功能嗎?

從 Chrome 應用程式遷移至網頁應用程式時,我們建議使用網頁應用程式。 在某些情況下,Chrome 擴充功能可能是更好的選擇。決定前,請先根據不同的因素分析何者較佳:

  • 用途:Chrome 擴充功能主要是用來擴充瀏覽器功能。常見用途包括:效率提升工具、網頁內容擴充和資訊匯總。網路應用程式只要善用網路的力量,就能使用的範圍更廣泛。
  • 使用者體驗:Chrome 擴充功能通常較有限的使用者介面,而且是專為與瀏覽器整合而設計。網頁應用程式具有豐富的使用者介面,外觀與風格與原生應用程式類似,而且可高度自訂。
  • 可攜性:Chrome 擴充功能僅適用於 Chrome。部分瀏覽器 (例如 FirefoxEdge) 支援的擴充功能 API 與 Chrome 相同,但並非全面支援。所有瀏覽器都支援網頁應用程式 (但並非所有 API 皆可支援)。
  • 可偵測性:安裝 Chrome 擴充功能時必須安裝 (例如透過 Chrome 線上應用程式商店或自助式代管),並透過瀏覽器工具列存取。網頁應用程式可透過網址立即載入,並且可從所有瀏覽器存取。您可以選擇安裝,但這不是強制規定。
  • 功能集:Chrome 擴充功能透過 Chrome API 與 Chrome 深度整合。網頁應用程式在低層級或系統層級的工作上可能會受到限制。如先前所述,您可以從網頁應用程式呼叫擴充功能,即可存取擴充功能專用 API。
  • 背景作業:Chrome 擴充功能即使關閉瀏覽器視窗,也能執行背景工作及執行。另一方面,網頁應用程式通常在前景執行,背景功能也較有限,大多用於效能和穩定性。

遷移步驟

遷移 Chrome 應用程式

如要從 Chrome 應用程式遷移至網頁應用程式或 Chrome 擴充功能,請按照下列步驟操作:

  1. 指定應用程式功能的範圍:在某些情況下,您必須開啟網頁應用程式,或唯一選擇建立 Chrome 擴充功能,應用程式可能會決定應用程式的用途。如果這兩種方式都能滿足您的需求,您不妨重新選擇。查看 Web Capabilities 網站Chrome Extension API 參考資料,進一步瞭解各項技術的功能。
  2. 學習與建構:運用學習資源瞭解技術,並啟動您的應用程式。PWA 訓練入門 Chrome 擴充功能指南都是實用的資源,可協助您開始使用這些技術。
  3. 測試及發布:在擴大發布範圍前,先對一小部分使用者提供新應用程式,確保應用程式正常運作。為了擴大發布範圍,使用者可以從瀏覽器存取及安裝網頁應用程式。Chrome 擴充功能通常是透過 Chrome 線上應用程式商店或自行代管功能發布。管理員可在受管理的情境中強制安裝這兩個應用程式。

遷移使用者

無論您選擇從 Chrome 應用程式遷移什麼技術,您都必須通知使用者解除安裝目前的應用程式,並引導他們使用新服務。

建議您更新應用程式,加入訊息指出應用程式已經終止,且使用者應日後造訪您的網站或 Chrome 線上應用程式商店 (請參閱以下範例)。您也可以加入「解除安裝」按鈕,呼叫 uninstallSelf() 方法。

自 Chrome 75 版起,您可以在 Chrome 應用程式中使用 installReplacementWebApp() 方法,以回應按鈕點擊或其他使用者手勢,自動觸發替代網頁應用程式的安裝流程。

Google 相簿 Chrome 應用程式更換

此外,您還應告知 Chrome Enterprise 瀏覽器和 ChromeOS Enterprise 管理員,更新其機構的應用程式政策。Enterprise 和 Education 代管的使用者常會透過管理政策強制安裝應用程式和擴充功能。開發人員應通知管理員更新 ExtensionInstallForcelist 政策 (用於安裝 Chrome 應用程式),並以 WebAppInstallForceList 政策取代網頁應用程式的網址。

管理控制台擴充功能和網頁應用程式強制安裝政策。

支援

如有技術問題,可以參考下列資源來取得支援:

  • 如果對於從 Chrome 應用程式遷移至網頁應用程式或 Chrome 擴充功能有任何問題,請加入 Discord 的 ChromeOS 開發人員社群
  • 如果是缺少網頁應用程式的功能,請在「功能」(也稱為 Project Fugu) 下方要求新功能。