【文章翻譯】Making a Dart web app offline-capable: 3 lines of code

【文章內容使用 Gemini 1.5 Pro 自動翻譯產生】

讓 Dart 網頁應用程式具備離線功能：只需 3 行程式碼

您是否曾經嘗試載入網頁應用程式（例如遊戲或測量轉換器），卻因為網路斷線而無法使用？這是一個糟糕的體驗，但幸運的是，我們擁有讓此類應用程式可供使用者使用的技術。

對於大多數應用程式和遊戲，只需 3 行 Dart 程式碼和在終端機中輸入 1 個指令即可完成。在這篇簡短的文章中，我將引導您完成這些步驟，並確保您可以隨時玩 Pop, Pop, Win!。

[Pop, Pop, Win!](https://dart-lang.github.io/sample-pop_pop_win/) - Dart 中的 [踩地雷實作](https://github.com/dart-lang/sample-pop_pop_win/)

Service Worker

Service Worker 是一個在背景執行的 JavaScript 檔案。它可以控制與之關聯的網頁或網站，攔截和修改導航和資源請求，並以非常精細的方式快取資源。

它是一種非侵入式網頁技術：如果瀏覽器 支援 Service Worker，它們可以改善使用者體驗，但網站即使沒有它們也可以正常運作（使用預設的網頁行為）。這是一個有用的屬性，可以啟用**漸進式網頁應用程式 (PWA)**，您可以為大多數使用者提供更進階的功能，同時確保其餘使用者不被鎖定。

作為背景處理執行緒，Service Worker 可以幫助：

• 離線模式（在網路斷線時從快取中擷取資源）
• 快取策略（用於近乎即時的快取回應，稍後可以使用新內容進行更新）
• 推播通知（如在行動應用程式中）
• 訊息傳遞（如果應用程式在多個分頁中開啟）

對於我們的離線遊戲體驗來說，重要的功能是：我們希望玩 Pop, Pop, Win!，而不是看到這隻恐龍：

有趣的事實：您可以透過按下向上箭頭鍵來玩這隻恐龍。

使用 Dart 建立漸進式網頁應用程式

支援離線模式大致需要以下步驟：

1. 確定要將哪些資源放入快取以供離線使用。
2. 建立一個 Service Worker 來準備這些資源的快取。
3. 註冊 Service Worker，以便可以從離線快取中提供後續請求（以防網路斷線）。
4. 在該 Service Worker 中，使用 URL 預先填入離線快取，並從快取或網路中處理適當的擷取請求。
5. 確保 Service Worker 偵測到應用程式或靜態資源的變更，並將新版本放入快取中。

雖然上面的列表可能聽起來有點嚇人，但 Dart 中有一個 pwa 套件可以為我們完成大部分工作，提供高階 API 並自動化大部分工作。

應用程式中的變更

在您的 pubspec.yaml 中匯入 pwa 套件：

dependencies:
  pwa: ^0.1.2

執行 pub get 後，將客戶端新增到您的 web/main.dart 中：

import 'package:pwa/client.dart' as pwa;

main() {
  // 註冊 PWA ServiceWorker 以進行離線快取。
  new pwa.Client();
}

上面的程式碼透過註冊 Service Worker（我們將在下一步中建立）來處理上面列表中的第 3 項。目前我們沒有將 Client 實例用於其他任何用途，但隨著 pwa 套件獲得新功能，它可能會用於其他用途。

自動生成的漸進式網頁應用程式

pwa 套件提供程式碼生成，處理上面列表中的第 1-2 項和第 4-5 項。為了確保正確使用快取（包括填入和清空快取），請使用以下工作流程：

1. 建置您的 Web 應用程式，所有靜態資源都位於 build/web 中：
   pub build
2. 運行程式碼產生器以掃描（或重新掃描）您的離線資源：
   pub run pwa
3. 再次建置您的專案，因為您需要編譯（新的）pwa.dart 檔案：
   pub build

這些步驟會產生一個名為 lib/pwa/offline_urls.g.dart 的檔案，其中包含要快取的離線 URL 列表。.g.dart 副檔名表示該檔案是生成的，可能會被 pwa 的程式碼產生器工具自動覆蓋。

第一次執行時，此工作流程會產生 web/pwa.dart 檔案，其中包含具有合理預設值的 Service Worker。您可以修改此檔案（例如，自訂離線 URL 或使用高階 API），因為程式碼產生器不會再次更改或覆蓋它。

注意事項

雖然 Dartium 非常適合大多數 Web 開發，但目前很難與 Service Worker 一起使用。我們建議改用 Chrome 或 Firefox。

快取失效是電腦科學中最難的問題之一。底層的 Web Cache API 提供了一些保證，pwa 函式庫也盡力妥善處理邊緣情況，但不要將快取視為任何真正重要內容的可靠儲存空間。在快取可用時使用它，在不可用時優雅地失敗。

試試看

您現在可以部署應用程式的新版本。或者嘗試 離線 Pop, Pop, Win! 遊戲。

開啟遊戲並玩一輪後，關閉您的 Wi-Fi 或拔掉網路線，然後重新載入（或重新輸入 URL）。如果您使用的是 Chrome 或 Firefox，您的遊戲應該可以正常執行。祝您好運，玩得開心！

---

讓 Dart 網頁應用程式具備離線功能：只需 3 行程式碼 最初發佈在 dartlang 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。