如何利用相同的網域名稱建構多個 PWAs，讓使用者知道這些應用程式屬於同一家機構或服務。
在「漸進式網頁應用程式在多來源網站中的應用」網誌文章中，Demian 討論了在嘗試建構涵蓋所有來源的單一漸進式網頁應用程式時，以多個來源建構的網站所面臨的挑戰。
以這種網站架構為例，電子商務網站是指：
- 首頁位於
https://www.example.com。 - 類別頁面會託管在
https://category.example.com中。 https://product.example.com中的產品詳細資料頁面。
如本文所述，同源政策會設下多項限制，禁止跨來源共用服務工作者、快取和權限。因此，我們強烈建議避免採用這類設定，對於已透過這種方式建構網站的網站，應盡可能考慮遷移至單一來源網站架構。
在本篇文章中，我們將探討相反的情況：我們將分析有意提供多個 PWA的情況，這些 PWA 會利用相同的網域名稱，讓使用者知道這些 PWA 屬於同一家機構或服務。
您可能已經注意到，我們使用了不同的但相關的術語，例如網域和來源。繼續之前，請先複習這些概念。
技術術語
- 網域：網域名稱系統 (DNS) 中定義的任何標籤序列。舉例來說，
com和example.com都是網域。 - 主機名稱：至少解析為一個 IP 位址的 DNS 項目。舉例來說：
www.example.com是主機名稱，example.com若有 IP 位址，則可做為主機名稱，而com永遠無法解析為 IP 位址，因此不可能是主機名稱。 - 來源：配置、主機名稱和 (選用) 通訊埠的組合。例如
https://www.example.com:443就是來源。
顧名思義，相同來源政策對來源設有限制，因此在整篇文章中通常指的是整個字詞。不過，我們會不時使用「網域」或「子網域」來描述所用技術，以便建立不同的「來源」。
使用多個相關 PWA 的理由
在某些情況下，您可能會想要建構獨立的應用程式，但仍將這些應用程式視為屬於同一機構或「品牌」。重複使用相同的網域名稱，是建立這類關係的好方法。例如：
- 電子商務網站想建立獨立體驗，讓賣家管理商品目錄，同時確保他們瞭解這是使用者購買產品的主要網站。
- 某體育新聞網站想為重大體育賽事建立特定應用程式，讓使用者可透過通知接收喜愛賽事的統計資料，並以漸進式網頁應用程式形式安裝，同時確保使用者認出該應用程式是由新聞公司所建。
- 公司想建立個別的即時通訊、郵件和日曆應用程式，並希望這些應用程式能以個別應用程式的形式運作，並與公司名稱連結。
使用不同的來源
在這種情況下，建議您讓每個概念上不同的應用程式都位於各自的來源。
如果您想在所有網域中使用相同的網域名稱，可以使用子網域。舉例來說，如果一家公司提供多個網路應用程式或服務，他們可以在 https://mail.example.com 上代管郵件應用程式，在 https://calendar.example.com 上代管日曆應用程式，同時在 https://www.example.com 上提供主要的業務服務。另一個例子是體育網站想要建立獨立應用程式，專門用於重要體育賽事，例如 https://footballcup.example.com 的足球錦標賽，讓使用者可以安裝並使用獨立於 https://www.example.com 主機代管的體育網站。讓客戶根據公司品牌建立獨立應用程式的平台時，這種方法或許也相當實用。例如，讓商家在 https://merchant1.example.com、https://merchant2.example.com 等地方建立自己的 PWA 應用程式。
使用不同的來源可確保應用程式之間的隔離，也就是說，每個應用程式都能獨立管理不同的瀏覽器功能，包括：
- 可安裝性：每個應用程式都有自己的資訊清單，並提供專屬的安裝體驗。
- 儲存空間：每個應用程式都有自己的快取、本機儲存空間，以及基本上所有形式的裝置本機儲存空間，且不會與其他應用程式共用。
- 服務工作站：每個應用程式對於已註冊的範圍都有自己的 Service Worker。
- 權限：權限也會依據來源界定範圍。如此一來，使用者就能確切瞭解自己授予權限給哪項服務，而通知等功能也會正確歸給各個應用程式。
在多個獨立 PWA 的用途中，建立這種程度的隔離最為理想，因此我們強烈建議採用這種做法。
如果子網域上的應用程式想要彼此共用本機資料，仍可透過 Cookie 進行共用，或者在更進階的情況下，可以考慮透過伺服器同步處理儲存空間。
使用相同來源
第二種方法是在相同來源上建構不同的 PWA。包括下列情況：
不重疊路徑
由同一來源代管，且路徑不重疊的多個 PWA 或概念性「網頁應用程式」。例如：
https://example.com/app1/https://example.com/app2/
重疊/巢狀路徑
同一個來源有多個 PWA，且其中一個 PWA 的巢狀結構位於另一個位置中：
https://example.com/(「外部應用程式」)https://example.com/app/(「內部應用程式」)
服務工作者 API 和資訊清單格式可讓您使用路徑層級範圍執行上述任一操作。不過，無論是哪種情況，使用相同的來源都會產生許多問題和限制，原因在於瀏覽器不會將這些來源視為獨立的「應用程式」，因此不建議使用這種做法。
在下一節中，我們會更詳細地分析這些挑戰；如果無法使用個別來源，可以如何做到。
多個相同來源 PWA 的挑戰
以下是兩種相同來源方法的常見實務問題：
- 儲存空間：Cookie、本機儲存空間和所有形式的裝置本機儲存空間都會在應用程式之間共用。因此，如果使用者決定清除某個應用程式的本機資料，系統會清除來源的所有資料；無法針對單一應用程式執行此操作。請注意，Chrome 和其他一些瀏覽器會在解除安裝某個應用程式時，主動提示使用者清除本機資料，這也會影響來源中其他應用程式的資料。另一個問題是應用程式必須共用儲存空間配額，也就是如果其中一個應用程式佔用太多空間，另一個就會有負面影響。
- 權限：瀏覽器權限會與來源建立關聯。也就是說，如果使用者授予某個應用程式權限，該權限會同時套用至該來源的所有應用程式。這聽起來似乎不錯 (不必多次要求權限)，但請注意：如果使用者封鎖某個應用程式的權限，其他應用程式就無法要求該權限或使用該功能。請注意，即使瀏覽器權限只需針對每個來源授予一次，但系統層級權限則必須針對每個應用程式授予一次，無論是否有其他應用程式指向相同來源。
- 使用者設定：您也可以按來源進行設定。舉例來說，如果兩個應用程式的字型大小不同，而使用者只想調整其中一個應用程式的縮放比例來補償，那麼如果兩個應用程式也套用這項設定，就無法執行此動作。
這些挑戰使得我們難以鼓勵採用這種做法。不過，如果您無法使用個別來源 (例如子網域)，請參閱「使用個別來源」一節，從我們提供的兩個相同來源選項中，強烈建議您使用不重疊的路徑，而非重疊/巢狀路徑。
如先前所述，本節所討論的挑戰是相同來源的方法。在下一節中，我們將進一步說明為何不建議使用重疊/巢狀路徑。
重疊/巢狀路徑的其他挑戰
重疊/巢狀路徑方法 (https://example.com/ 為外部應用程式，https://example.com/app/ 為內部應用程式) 的另一個問題是，內部應用程式中的所有網址實際上都會視為外部應用程式和內部應用程式的一部分。
實際上，這會導致以下問題：
- 安裝宣傳：如果使用者造訪內部應用程式 (例如在網路瀏覽器中)，且外部應用程式已安裝在使用者的裝置上，瀏覽器就不會顯示安裝宣傳橫幅，也不會觸發 BeforeInstallPrompt 事件。原因在於瀏覽器會檢查目前的網頁是否屬於已安裝的應用程式，並判斷該頁面是否屬於已安裝的應用程式。解決方法是透過「建立捷徑」瀏覽器選單選項手動安裝內部應用程式，或先安裝內部應用程式，再安裝外部應用程式。
- 通知和 Badging API：如果已安裝外部應用程式，但未安裝內部應用程式，來自內部應用程式的通知和徽章會錯誤歸因至外部應用程式 (已安裝應用程式最接近的範圍)。如果使用者裝置上安裝兩個應用程式，這項功能就能正常運作。
- 連結擷取：外部應用程式可能會擷取屬於內部應用程式的網址。如果已安裝外部應用程式，但未安裝內部應用程式，這種情況特別可能發生這種情況。同樣地，外部應用程式中連結至內部應用程式的連結，不會將連結擷取至內部應用程式，因為這些連結會被視為屬於外部應用程式的範圍。此外，在 ChromeOS 和 Android 上，如果這些應用程式已加入 Play 商店 (稱為受信任的網路活動)，外部應用程式就會擷取所有連結。即使已安裝內部應用程式，作業系統仍會讓使用者選擇是否要在外部應用程式中開啟。
結論
在本文中，我們將探討開發人員如何在同一個網域中，以不同方式建構多個彼此相關的漸進式網頁應用程式。
總而言之，我們強烈建議您使用不同的來源 (例如使用子網域) 來代管獨立的 PWA。在相同來源中託管這些應用程式會帶來許多挑戰，主要是因為瀏覽器不會將這些應用程式視為獨立的應用程式。
- 不同的來源：建議
- 相同來源、不重疊路徑：不建議
- 相同來源、重疊/巢狀路徑：強烈不建議
如果無法使用不同的來源，強烈建議您使用不重疊的路徑 (例如 https://example.com/app1/ 和 https://example.com/app2/)，而非重疊或巢狀路徑，例如 https://example.com/ (外部應用程式) 和 https://example.com/app/ (內部應用程式)。
其他資源
在此感謝他們提供的技術審查和建議：Joe Medley、Dominick Ng、Alan Cutter、Daniel Murphy、Penny McLachlan、Thomas Steiner 和 Darwin Huang
相片來源：Unsplash 上的 Tim Mossholder