素材資源和資料

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,讓您可以更有效地掌控快取資源的時機和方式,以及在本機供應資源的時機和方式。網路上有幾個用戶端儲存空間解決方案可供使用:

  • 網頁儲存空間:包含 localStoragesessionStorage。這些 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 要求永久儲存空間,以避免遭到剔除。

資源