PWA と Django #PWA のオンライン リソースとオフライン リソース - Django を使用したプログレッシブ Web アプリケーションの開発

注: 初公開場所: https://andresalvareziglesias.substack.com/p/pwa-and-django-3-online-and-offline

Django を使用したプログレッシブ Web アプリケーション シリーズの 3 番目のエントリへようこそ。この章では、PWA のリソースをキャッシュして、アクティブなインターネット接続なしでオフラインで使用できるようにする方法を学びます。

オフライン機能の実装

前の章では、マニフェストと ServiceWorker という必要なすべての部分を備えた小さな PWA アプリケーションを定義しました。私たちは PWA の登録方法を学び、いくつかの画像を使用した非常にシンプルなインターフェイスを開発しました。

ここでは、PWA キャッシュにデータを保存する方法と、すべての画像をロードする場所 (インターネットまたはローカル キャッシュ) を選択する方法を学びます。

1 つ以上のリソースを 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 がリソースをロードすると、次のようにフェッチ イベントが呼び出されます。

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 の最も優れた機能の 1 つです。PWA を使用すると、Django を使用して「ほぼネイティブ」アプリケーションを作成できます。

次の章でお会いしましょう!

リストについて

Python と Docker の投稿のうち、次のような他の関連トピックについても書きます。

• ソフトウェアアーキテクチャ
• プログラミング環境
• Linux オペレーティング システム
• など

何か興味深いテクノロジー、プログラミング言語などを見つけたら、ぜひ知らせてください。私はいつでも新しいことを学ぶことにオープンです!

著者について

私はアンドレスです。パルマに拠点を置くフルスタック ソフトウェア開発者で、コーディング スキルを向上させるために個人的な旅を続けています。私は自費出版のファンタジー作家でもあり、自分の名前で 4 冊の小説を出版しています。何でもお気軽に聞いてください！

以上がPWA と Django #PWA のオンライン リソースとオフライン リソース - Django を使用したプログレッシブ Web アプリケーションの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。