跳到主要內容

製作漸進網路應用程式

製作版本擁有打造一流 漸進式網路應用程式 所需的所有工具，但離線/快取優先行為僅限加入。

從 Create React App 4 開始，您可以在專案中新增 src/service-worker.js 檔案，以使用內建支援 Workbox 的 InjectManifest 外掛程式，它會 編譯 服務工作者，並注入一個清單，包含要 快取預載 的 URL

如果您使用其中一個 PWA 自訂範本 開始一個新專案，您會取得一個src/service-worker.js 檔案，作為離線優先服務工作者的良好出發點。

npx create-react-app my-app --template cra-template-pwa

類型化腳本等同於

npx create-react-app my-app --template cra-template-pwa-typescript

如果您知道您不會使用服務工作者，或如果您希望採用不同的方式建立您的服務工作者，請不要建立一個src/service-worker.js檔案。在這種情況下，將不會執行InjectManifest外掛程式。

除了建立您的本機src/service-worker.js檔案，您還需要註冊它之後才能使用。為了選擇離線優先的行為，開發人員應在他們的 src/index.js 檔案中尋找下列內容

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister();

如同註解中所述，將serviceWorker.unregister() 切換成 serviceWorker.register() 則會選擇使用服務工作者。

為什麼選擇性加入？​

離線優先的漸進式網際網路應用程式比傳統的網頁更快速且更可靠，並提供引人入勝的行動裝置體驗

  • 您webpack組建中所有靜態網站資產都已快取，讓您的頁面在後續拜訪中能快速載入，無論網路連線為何（例如 2G 或 3G）。更新會在背景中下載。
  • 無論網路狀態為何，您的應用程式都能運作，即使在離線狀態下也是如此。這表示您的使用者將可以在一萬英尺的高空和地鐵中使用您的應用程式。
  • 在行動裝置上，您的應用程式可以直接加入到使用者的首頁螢幕，包括應用程式圖示。這無需經過應用程式商店。

但是，這些會讓除錯佈署更具挑戰性。

workbox-webpack-plugin 整合到生產組態中，它會負責編譯服務工作者檔案，自動預先快取您的所有webpack產生的資產並在您部署更新時保持最新。服務工作者會使用快取優先策略處理webpack產生的所有資產的要求，包括 適用於 HTML 的導覽要求，確保您的網際網路應用程式始終如一地快速，即使在速度慢或不穩定的網路環境中也能如此。

注意：未由webpack產生的資源，例如從您的本機public/目錄拷貝過來的靜態檔案或第三方資源，將不會被預先快取。您可以另外設定 Workbox 路由，將您選擇的執行階段快取策略套用到那些資源。

自訂化​

從 Create React App 4 開始，您可以透過建立自己的 src/service-worker.js 檔案或自訂 cra-template-pwa（或 cra-template-pwa-typescript）範本所新增的檔案，完全掌控自訂此服務工作者的邏輯。您可以使用 Workbox 專案的附加模組，加入推播通知程式庫，或移除部分預設快取邏輯。唯一的必要條件是，您必須在檔案保留 self.__WB_MANIFEST，作為 Workbox 編譯外掛程式在產生預先快取 URL 清單時，用來檢查值的依據。如果您偏好不使用預先快取，您可以將 self.__WB_MANIFEST 指定為將被忽略的變數，例如

// eslint-disable-next-line no-restricted-globals
const ignored = self.__WB_MANIFEST;

// Your custom service worker code goes here.

離線優先的考量​

如果您決定選擇採用服務工作者註冊，請考量下列事項。

  1. 在初始快取過後，服務工作者的生命週期 會控制更新的內容何時才能顯示給使用者。為了防範 延遲載入內容的競爭條件，預設行為是保守地讓更新的服務工作者保持在 "等待" 狀態。這表示使用者會持續看到較舊的內容，直到他們關閉（重新載入還不夠）現有的開啟分頁為止。請參閱 這篇部落格文章，以取得此行為的詳細資料。

  2. 使用者未必熟悉離線優先的網路應用程式。了解當服務工作者完成快取建立（顯示「此網路應用程式已可離線使用！」訊息），並讓使用者知道服務工作者已取得下次載入網頁時可用的最新更新時（顯示「在現有分頁關閉後將會有新內容可使用。」訊息）可對使用者有幫助。讓使用者知道目前已將顯示這些訊息的任務留給開發人員處理，不過作為起點，您可以使用包含在 src/serviceWorkerRegistration.js 中的邏輯，這段邏輯示範了要聆聽哪個服務工作者的生命週期活動，才能偵測每個腳本，以及哪個活動預設只會將適當的訊息記錄到 JavaScript 主控台。

  3. 服務工作人員 需要 HTTPS，儘管為了方便本地測試，該政策 不適用於 localhost。如果您的產品網路伺服器不支援 HTTPS，則服務工作人員註冊將會失敗，但您的其他網路應用程式仍然可以正常運作。

  4. 服務工作人員僅在 產品環境（例如 npm run build 的輸出）中啟用。建議您不要在開發環境中啟用離線優先服務工作人員，因為當先前快取的資產被使用時，它可能會導致令人沮喪的情況，因為其中不包含您在本地所做的最新變更。

  5. 如果您需要在本機測試離線優先服務工作人員，請建置應用程式（使用 npm run build），並從您的建置目錄執行標準 http 伺服器。在執行建置指令碼後，create-react-app 將提供一個指導步驟，說明如何本地測試產品建置，而 建置說明 則提供使用其他方法的說明。務必永遠使用無痕模式瀏覽，以避免瀏覽器快取出現問題。

  6. 在預設情況下，產生的服務工作人員檔案不會攔截或快取任何跨來源的流量，例如 HTTP API 要求、從不同網域載入的影像或嵌入內容。從 Create React App 4 開始，這可以自訂，如上所述。

漸進式網頁應用程式 (PWA) 元資料​

預設組態包含位於 public/manifest.json 的網路應用程式清單，您可以自訂針對網路應用程式特定細節。

當使用者在 Android 上使用 Chrome 或 Firefox 將網路應用程式加入主畫面時，manifest.json 中的元資料會決定在顯示網路應用程式時要使用哪些圖示、名稱和品牌色彩。網路應用程式清單指南 對每個欄位的意思和自訂如何影響使用者的體驗提供了更多說明脈絡。

已加入主畫面的漸進式網路應用程式將會載入得更快，而且當有作用中的服務工作人員時，會在離線狀態運作。不過請注意，無論您是否選擇加入服務工作人員註冊，網路應用程式清單中的元資料都仍將被採用。