安裝和解除安裝 Web 應用

本指南介紹了使用者如何在裝置上安裝和解除安裝 PWA。如果您想了解如何將 Web 應用製作為可安裝的 PWA,請參閱 製作可安裝的 PWA

Web 應用安裝歷史

瀏覽器一直支援儲存網站的快捷方式,稱為“書籤”。這些只是網站的連結。

某些作業系統 (OS) 增強了書籤功能,允許將書籤儲存到常用位置,例如主螢幕或工作列,並透過圖示在 OS 的預設瀏覽器中啟動網站。對於許多網站來說,這仍然只是一個網站連結。如果網站是 漸進式 Web 應用 (PWA),則儲存到主螢幕會將 PWA 安裝到使用者的裝置上,將其完全整合到作業系統中,就像大多數裝置上的原生應用程式一樣。就像 PWA 可以安裝一樣,它們也可以被解除安裝。

我們首先介紹它的前身——儲存網站連結。

書籤網站

所有瀏覽器都具有“新增到收藏夾”的書籤功能。書籤,或收藏夾,是網頁的可點選快捷方式。書籤使使用者無需輸入 URL 或搜尋內容即可快速訪問網站。書籤對於長 URL 以及訪問不常訪問的首頁內容特別有用。

所有瀏覽器都允許使用者檢視和管理他們的書籤,包括重新命名和刪除收藏夾。預設情況下,書籤的顯示包括書籤頁的 <title> 元素的文字內容,以及一個由網站 favicon 組成的圖示。

瀏覽器支援儲存、編輯、移動、刪除以及其他書籤管理操作。書籤管理的使用者介面因瀏覽器而異。

新增到主螢幕

智慧手機,始於 2007 年的 iPhone,增加了“儲存到主螢幕”功能。對於常規 (非 PWA) 網站,此功能類似於書籤,但不是將頁面的 favicon 和標題新增到書籤選單(瀏覽器功能)——而是透過這種方式收藏 新增一個圖示 到 OS 的主螢幕。

將非 PWA 網站新增到主螢幕不會將網站安裝到裝置上。相反,它會將開發者定義的圖示新增到主螢幕,點選該圖示會在預設瀏覽器中開啟書籤連結。

iPhone add to home screen, install prompt, icon, and delete functionality.

如果新增到主螢幕的網站是 PWA,則該 PWA 將被安裝到裝置上。

從主螢幕刪除圖示會刪除書籤。刪除確認會提供有關刪除圖示是刪除書籤還是整個應用程式的資訊。

安裝和解除安裝 PWA

雖然安裝 PWA 只需點選幾下,但根據 Web 應用的功能,安裝 PWA 的結果通常遠遠超出建立到 Internet 頁面的連結;安裝 PWA 會更深入地將 Web 應用整合到使用者的裝置上。

根據 PWA、裝置以及作業系統和瀏覽器的功能,安裝 PWA 可能會啟用類似原生應用的功能,例如為應用提供獨立的視窗或將其註冊為檔案處理程式。這也意味著解除安裝 PWA,同樣只需要點選幾下,其操作不僅僅是刪除 PWA 的圖示。

安裝 PWA

從 Web 安裝 PWA 的使用者介面因瀏覽器和平臺而異。

安裝 PWA 的使用者介面因裝置和 OS 組合而異。“新增到主螢幕”使用者介面會在 iOS 上的 Safari 中安裝 PWA。其他瀏覽器,包括 Android 版 Chrome,會在瀏覽器設定選單中包含應用安裝命令。在桌面版 Chrome 和 Edge 中,當用戶導航到頁面時,如果該頁面是 PWA 且該 PWA 當前未被瀏覽器安裝,則 URL 欄中會顯示一個安裝圖示。

PWA install prompt in URL bar

當用戶選擇圖示時,瀏覽器會顯示一個提示,詢問他們是否要安裝 PWA,如果他們同意,PWA 就會被安裝。

PWA installation confirmation prompt

安裝後,PWA 的行為將與其他安裝在 OS 上的應用程式一樣。例如,在 macOS 上,圖示將出現在 Dock 中,並具有與其他應用程式相同的圖示選項。

PWA icon in the doc on macOS

在大多數桌面瀏覽器上,安裝提示位於 URL 欄中。在移動裝置上,安裝提示通常可以在瀏覽器選項的選單中找到。無論瀏覽器或 OS 如何,都需要確認安裝。

PWA installation on Chrome for Android, with confirmation, home screen icon, and offline experience.

安裝後,PWA 的行為與所有已安裝的應用程式一樣:點選應用程式圖示即可開啟 PWA,即使在使用者離線時也是如此。

所有現代桌面和移動裝置都支援安裝。瀏覽器是否可以在作業系統上安裝 PWA 取決於瀏覽器/作業系統組合。大多數瀏覽器支援在所有作業系統(ChromeOS、macOS、Windows、Android、Linux 等)上安裝 PWA,直接安裝或透過安裝擴充套件程式。

Firefox 需要一個 PWA 擴充套件

在 macOS 14 (Sonoma) 之前,PWA 可以從除 Safari 以外的任何瀏覽器安裝到 macOS 上。對於 16.4 版本之前的 iOS 版本,情況則相反,PWA 只能在 Safari 中安裝。PWA 可以從 macOS 14.0 或更高版本以及 iOS/iPadOS 16.4 或更高版本開始,在任何支援的瀏覽器中安裝。

當啟動已安裝的 PWA 時,它可以在自己的獨立視窗中顯示(沒有完整的瀏覽器 UI),但實際上仍然在一個瀏覽器視窗中執行,即使通常的瀏覽器 UI 元素(如位址列或後退按鈕)不可見。該應用程式將位於 OS 儲存其他應用程式的位置,位於瀏覽器特有的資料夾中。

由瀏覽器安裝的 PWA 僅限於該瀏覽器。這意味著用於安裝 PWA 的瀏覽器就是用於執行該 PWA 的瀏覽器。這也意味著您可以從不同的瀏覽器安裝同一個 PWA,並且這兩個應用將作為兩個不同的例項執行,不會共享任何資料。

用於安裝 PWA 的瀏覽器將知道 PWA 已安裝,但其他瀏覽器將無法訪問已安裝的狀態。例如,如果您使用 MS Edge 安裝 PWA,當您訪問該網站時,Edge 會提示您開啟 PWA,而 Chrome 會繼續提示您安裝該應用程式。如果您也使用 Chrome 安裝 PWA,您將擁有 PWA 的兩個副本。當多個 PWA 例項開啟時,來自不同瀏覽器安裝的例項之間不會共享資料。

當您點選 Web 應用的圖示時,它會在安裝 PWA 的瀏覽器環境中開啟,通常沒有瀏覽器 UI 包圍,儘管這取決於開發者如何配置 Web 應用清單。同樣,用於解除安裝 PWA 的方法也取決於安裝它的瀏覽器。

解除安裝

在大多數移動作業系統上,解除安裝 PWA 的方式與解除安裝其他應用程式相同。在某些移動作業系統上,PWA 出現在與從應用商店下載的應用相同的控制面板中進行管理,並可以在那裡解除安裝。

在 iOS 上,從 Safari 安裝的 PWA 會出現在“App Library”螢幕上並可供搜尋,但不會與“設定”下的其他已安裝應用程式一起列出。在 iOS 上,長按圖示會顯示刪除書籤的 UI;從主螢幕刪除圖示會刪除 PWA。

在某些桌面作業系統上,可以直接在已開啟的 PWA 中解除安裝 PWA。要解除安裝,請開啟 PWA。在已開啟應用的右上角,會有一個圖示,必須展開該圖示才能看到更多工具。根據用於安裝 PWA 的瀏覽器,將有一個解除安裝 PWA 的連結,或者一個開啟瀏覽器設定頁面並帶有解除安裝連結的設定連結。要麼在下拉選單(如果存在)中點選解除安裝選項,要麼在瀏覽器標籤頁中導航到應用設定並點選解除安裝。

App settings in MS Edge with an uninstall link

在 Edge 中選擇“應用設定”從開啟的下拉選單中,打開了 Microsoft Edge 瀏覽器 edge://apps 標籤頁。在那裡,我們看到了已安裝應用程式的列表,其中包含每個應用程式的選項,包括 🗑️ 解除安裝。確認解除安裝。搞定!

在 Edge 中,已安裝的 PWA 會被列出,並且可以透過在 Edge 瀏覽器中訪問 edge://apps 來管理。在 Chrome 中,Google 應用和已安裝 PWA 的列表可以透過在 Chrome 瀏覽器中訪問 chrome://apps 來檢視和管理。

另見