Progressive Web App 是一個網站，其所有資產都與網路版相同，但還提供新的工具，讓這些資產能在線上快速載入，並且可離線使用。
應用程式元件
開發應用程式時，通常涉及多種資產和資源，包括邏輯和程式碼 (是否已編譯)，以及螢幕設計、圖片、標誌和字型等使用者介面元素。
Progressive Web App 是一個網站，因此其所有資產都與網路上的資產相同：
- 用於內容和初始頁面轉譯的 HTML
- 邏輯專用的 JavaScript，包括執行 WebAssembly 模組 (編譯的程式碼) 以及轉譯 2D 和 3D 硬體最佳化圖形的功能。
- 用於版面配置、樣式和動畫的 CSS。
- 網頁格式的圖片，例如 PNG、JPEG、WebP 和 SVG。
- 採用 MPEG-4 和 WebM 等網頁格式的影片。
- 網頁字型。
- JSON 或其他格式的資料。
根據預設，網站會透過網路下載素材資源，從 HTML 開始，並繼續剩餘的資源。
對網路來說，管理這些資源並使其可快速載入並離線時，一直是一大挑戰。 如今，PWA 目前只使用與平台特定應用程式相關聯的功能。
平台專屬應用程式與 PWA
安裝平台專屬應用程式時，通常會下載包含應用程式所有素材資源的套件，包括程式碼、圖片、字型、影片等。 因此，不論應用程式處於離線狀態，都能透過裝置儲存空間取得所有資源。
另一方面，傳統版協作平台網站需要網路連線，才能視需要下載素材資源。 如果您離線時沒有任何素材資源，瀏覽器會顯示錯誤訊息。
PWA 的做法與平台專屬應用程式相同，可透過用戶端存取部分或所有資產，進而改善傳統網路體驗。因此，當您開啟 PWA 時，初始轉譯作業可以和平台應用程式一樣即時，因為素材資源無需透過網路取得。
快取和儲存空間
自網路年初以來，開發人員無法完全掌控資源的快取方式。瀏覽器會負責 HTTP 快取，且不一定會根據不同政策快取及提供資源。其他儲存選項 (例如網路儲存空間和 IndexedDB) 是用來儲存簡單的資料和物件。
PWA 不必單獨仰賴這些政策來呈現內容。如今，我們改為提供 Cache Storage API，讓您可以更有效地掌控快取資源的時機和方式，以及在本機供應資源的時機和方式。網路上有幾個用戶端儲存空間解決方案可供使用：
- 網頁儲存空間：包含
localStorage和sessionStorage。這些 API 會儲存簡單的鍵/值組合。網頁儲存空間有限且具有同步 API，因此請盡量避免使用。 - IndexedDB：包含適用於網路效能的非同步 API 物件型資料庫 (No-SQL)。IndexedDB 可以在用戶端儲存結構化和二進位資料。通常是用來儲存資料的內容，例如可透過 API 要求取得或傳送的內容。建議您立即將資料儲存在本機，之後再將資料同步到伺服器，這種做法也很有用。IndexedDB API 可用來與資料庫互動。
- 快取儲存空間：一組 HTTP 要求和回應組合，可用來儲存及擷取資源，以及這些資源的 HTTP 標頭，與從伺服器傳送的資源完全相同。Cache Storage API 可用來儲存、擷取、更新及刪除網路要求，例如：資產並離線。
Service Worker 的需求
PWA 可將資產儲存在 Cache Storage 和 IndexedDB，但如何運用這些資產為使用者提供快速且離線的使用體驗。回答：Service Worker。
有了 Service Worker，您不必連上網路就能提供資產、傳送通知給使用者、在 PWA 圖示中加入徽章、在背景更新內容，甚至讓整個 PWA 能夠離線運作。如要進一步瞭解 Service Worker，請參閱下一節。
可離線使用
使用者希望應用程式能提供快速且隨時可用的體驗。 也就是說，應用程式應可離線運作。
即使已設為可離線使用，並不代表內容或服務在沒有網路連線的情況下仍可正常使用。 不過，至少可在使用者離線時提供基本體驗 (例如要求你連上網際網路才能繼續使用的網頁)，以便提升使用者體驗，且不會發生一般的瀏覽器錯誤，讓使用者享有更優異的應用程式體驗。 在某些瀏覽器中，這是通過 PWA 安裝條件時不可或缺的功能。 建議您將 PWA 的使用者介面和快取內容一併顯示。讓使用者繼續使用整個 PWA，並在重新連線後同步處理伺服器變更，是離線工作的主要標準。
如要將應用程式設為可離線存取，您必須快取離線體驗所需的資產，讓服務工作人員日後再提供服務。務必先將離線素材資源新增至快取，再視需要使用。在這個特殊情況下，您無法在系統要求時快取這些檔案。
常用的快取方法
而在 PWA 中，所有決定都由您掌控。您可以根據自己的需求選擇快取或安裝資產的最佳做法。以下是幾個做決定：
- 預先快取：挑選要在首次載入時安裝的素材資源，其中應包含 HTML 和可轉譯應用程式的最低素材資源。使用預先快取時，請注意，您所使用的是裝置空間和網路。下載及快取素材資源時，保持警覺並負責。
- 視需要快取：用於依要求將資產新增至快取。一般來說，這類素材資源可以獨立於應用程式版本 (例如圖片或內容) 而變更。如要瞭解需要快取的不同策略，請參閱快取一節。
- API 和網路服務：可以快取 API 呼叫；或者，您可以將 API 回應儲存在索引資料庫，而非快取 API 回應。
正在更新資產
依已安裝應用程式目錄的標準應用程式模型，開發人員需要更新應用程式時，會發布新的套件。即使多數素材資源沒有變更，使用者仍須重新下載整個套件。 透過 PWA，您可以採用上一節的做法，決定更新素材資源的方式和時機。更新資產的方法如下：
- 完整更新：在這種情況下，每當您在應用程式中做出變更，即使是次要變更，程式碼都會再次下載所有資產至快取中。
- 部分更新：在此方法中，您會建立一個方法來定義已更新的資產，並且只更新這些資產 (無論是否使用者介入)。
- 持續更新：使用這項技術，系統會在每次使用 PWA 時，自動檢查並更新素材資源
尺寸與壽命
一般來說，平台專屬應用程式不會處理大小限制；安裝時，應用程式的大小可以超過 GB 以上。只要裝置的容量已達上限，您就可以安裝該部裝置。除此之外，應用程式安裝期間，無論你是否使用應用程式，系統都會佔用儲存空間總容量。PWA 的儲存空間處理方式不同。瀏覽器會根據您在 PWA 邏輯中定義的政策儲存素材資源。
大小限制視瀏覽器而定。 較不像平台專屬應用程式非常靈活，但通常足以讓大多數網頁應用程式使用。如要查看各種瀏覽器的特定限制，請參閱這篇文章。
假如使用者在瀏覽器中使用 PWA，瀏覽器也可以根據儲存空間壓力，或在閒置幾週後剔除資產。在某些平台上，如果使用者安裝 PWA，並不會移除應用程式。在適用的情況下，程式碼可透過 API 要求永久儲存空間，以避免遭到剔除。