PWA dan Django #Sumber dalam talian dan luar talian dalam PWA - Membangunkan Aplikasi Web Progresif dengan Django

NOTA: Pertama diterbitkan dalam: https://andresalvareziglesias.substack.com/p/pwa-and-django-3-online-and-offline

Selamat datang ke entri ketiga pada Aplikasi Web Progresif dengan siri Django. Dalam bab ini, kita akan belajar cara untuk cache sumber untuk PWA kita supaya dapat menggunakannya di luar talian, tanpa sambungan internet yang aktif.

Melaksanakan Fungsi Luar Talian

Dalam bab sebelumnya, kami mentakrifkan aplikasi PWA kecil dengan setiap bahagian yang diperlukan: manifes dan ServiceWorker. Kami belajar cara mendaftar PWA dan membangunkan antara muka yang sangat mudah dengan beberapa imej:

Sekarang kita akan belajar cara menyimpan data dalam cache PWA dan cara memilih dari mana untuk memuatkan setiap imej: dari internet atau dari cache setempat.

Untuk menyimpan satu atau lebih sumber pada cache PWA kami menggunakan fungsi seperti ini pada 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);
   });
}

Kini, apabila kami melaksanakan PWA kami, kami boleh membaca mesej cache dalam konsol pembangun:

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

Cache PWA kami berfungsi!

Memilih dari mana untuk memuatkan setiap sumber

Apabila PWA memuatkan sumber, panggil acara ambil, seperti ini:

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);
});

Kami mengawal permintaan itu sekarang dan boleh memilih dari mana mengembalikan sumber yang diminta: dari cache atau dari internet.

Berikut ialah contoh cara untuk menyemak sama ada kami mempunyai sumber yang dicache dan mengembalikannya daripada cache. Dan, jika tidak dicache, minta daripada Internet.

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);
});

Kita boleh membaca konsol pembangun untuk mengetahui dari mana setiap imej telah dimuatkan, seperti ini:

Dalam bab seterusnya

Kami kini mempunyai PWA. Sekarang kita akan belajar cara membuat PWA yang boleh dipasang, yang akan ditunjukkan sebagai aplikasi asli dalam sistem pengendalian. Itulah salah satu fungsi terbesar PWA: kita boleh menggunakannya untuk mencipta aplikasi "hampir asli" menggunakan Django.

Jumpa anda dalam bab seterusnya!

Mengenai senarai

Di antara siaran Python dan Docker, saya juga akan menulis tentang topik lain yang berkaitan, seperti:

• Seni bina perisian
• Persekitaran pengaturcaraan
• Sistem pengendalian Linux
• Dll.

Jika anda menemui beberapa teknologi yang menarik, bahasa pengaturcaraan atau apa sahaja, sila beritahu saya! Saya sentiasa terbuka untuk mempelajari sesuatu yang baharu!

Mengenai penulis

Saya Andrés, pembangun perisian tindanan penuh yang berpangkalan di Palma, dalam perjalanan peribadi untuk meningkatkan kemahiran pengekodan saya. Saya juga seorang penulis fantasi yang diterbitkan sendiri dengan empat novel terbitan atas nama saya. Sila tanya saya apa-apa sahaja!

Atas ialah kandungan terperinci PWA dan Django #Sumber dalam talian dan luar talian dalam PWA - Membangunkan Aplikasi Web Progresif dengan Django. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!