PWA 和 Django #PWA 中的線上和離線資源 - 使用 Django 開發漸進式 Web 應用程式

注意：首次發佈於：https://andresalvareziglesias.substack.com/p/pwa-and-django-3-online-and-offline

歡迎來到 Django 漸進式 Web 應用程式系列的第三篇文章。在本章中，我們將學習如何為 PWA 快取資源，以便能夠在沒有有效網路連線的情況下離線使用它們。

實作離線功能

在前面的章節中，我們定義了一個小型 PWA 應用程序，其中包含每個必需的部分：清單和 ServiceWorker。我們學習如何註冊 PWA 並使用一些圖像開發了一個非常簡單的介面：

現在我們將學習如何在 PWA 快取中儲存資料以及如何選擇載入每個映像的位置：從網路或本機快取。

為了在 PWA 快取上儲存一個或多個資源，我們在 ServiceWorker 上使用以下函數：

const CACHE_NAME = "DJANGO_PWA_TEST"
const MAIN_URL = "https://laboratorio.alvarezperello.com/djangopwa/";

self.addEventListener("install", (event) => {
   console.info("*** PWA event *** install", event);
   event.waitUntil(activateApp());
});

self.addEventListener("activate", (event) => {
   console.info("*** PWA event *** activate", event);
   event.waitUntil(activateApp());
});

async function activateApp() {
   // When a service worker is initially registered, pages won't use it
   // until they next load. The claim() method causes those pages to be
   // controlled immediately.
   console.log('Claiming control...');
   clients.claim().then((ev) => {
       console.log('...claimed!', ev);
   })

   manageCache();
}

self.addEventListener("sync", (event) => {
   console.info("*** PWA event *** sync", event);
   manageCache();
});

async function manageCache() {
   const cache = await caches.open(CACHE_NAME);
   if (!cache) {
       console.error("Error storing resources in cache!");
       return;
   }

   storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake1.jpg");
   //storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake2.png");
   //storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake3.png");
}

async function storeResourceInCache(cache, element) {
   console.log("Storing resource in cache: "+element);
   cache.add(element).then(event => {
       console.info("Resource stored successfully! "+element);
   }).catch(event => {
       console.error("Error storing resource! "+element, event);
   });
}

現在，當我們執行 PWA 時，我們可以在開發者控制台中讀取快取訊息：

Registering service worker...
...register completed!
The service worker is active!

serviceworker.js: Claiming control...
serviceworker.js: Resource already in cache! static/demo/img/snake1.jpg

我們的 PWA 快取正在運作！

選擇從何處加載每個資源

當 PWA 載入資源時，呼叫 fetch 事件，如下所示：

self.addEventListener("fetch", async (event) => {
   console.info("*** PWA event *** fetch", event);

   let url = event.request.url.toString();
   console.info("The PWA is loading a resource from: "+url);
});

我們現在可以控制請求，並且可以選擇從何處返回請求的資源：從快取或從網路。

這是一個如何檢查我們是否快取了資源並從快取中返回它的範例。並且，如果未緩存，請改為從互聯網請求。

self.addEventListener("fetch", async (event) => {
   let url = event.request.url.toString();
   if (!url.includes("static/demo/img/snake")) {
       return false;
   }

   const cache = await caches.open(CACHE_NAME);
   if (!cache) {
       console.error("Error loading resources from cache!");
       return false;
   }

   let fetchResponsePromise = await cache.match(url).then(async (cachedResponse) => {
       if (cachedResponse && cachedResponse.ok) {
           console.warn("Loading from cache: "+url);
           return cachedResponse;

       } else {
           console.error("Error! the cache does not have this url! "+url);
           console.error(cache.keys());

           remoteFetchResponsePromise = await fetch(event).then(async (networkResponse) => {
               console.warn("Loading from internet: "+url);
               return networkResponse;
           });

           return remoteFetchResponsePromise;
       }
   });

   return (await fetchResponsePromise);
});

我們可以讀取開發者控制台來了解每個映像是從哪裡載入的，如下所示：

在下一章中

我們現在有了 PWA。現在我們將學習如何製作可安裝的 PWA，它將在作業系統中顯示為本機應用程式。這是 PWA 最強大的功能之一：我們可以使用它們來使用 Django 創建「幾乎本機」的應用程式。

下一章見！

關於名單

在 Python 和 Docker 貼文中，我也會寫一些其他相關主題，例如：

• 軟體架構
• 程式環境
• Linux作業系統
• 等等

如果您發現了一些有趣的技術、程式語言或其他什麼，請告訴我！我總是樂於學習新事物！

關於作者

我是 Andrés，一位來自帕爾馬的全端軟體開發人員，我正在踏上提高編碼技能的個人旅程。我也是一位自行出版的奇幻作家，以我的名義出版了四本小說。有什麼問題都可以問我！

以上是PWA 和 Django #PWA 中的線上和離線資源 - 使用 Django 開發漸進式 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！