PWA 및 Django #PWA의 온라인 및 오프라인 리소스 - Django를 사용하여 프로그레시브 웹 애플리케이션 개발

참고: 첫 게시 위치: https://andresalvareziglesias.substack.com/p/pwa-and-django-3-online-and-offline

Django 시리즈를 사용한 프로그레시브 웹 애플리케이션의 세 번째 항목에 오신 것을 환영합니다. 이 장에서는 PWA가 인터넷에 연결하지 않고도 오프라인으로 사용할 수 있도록 리소스를 캐시하는 방법을 알아봅니다.

오프라인 기능 구현

이전 장에서는 매니페스트와 ServiceWorker라는 필수 부분을 모두 갖춘 작은 PWA 애플리케이션을 정의했습니다. 우리는 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가 리소스를 로드하면 다음과 같이 가져오기 이벤트를 호출합니다.

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 게시물 중에서 다음과 같은 다른 관련 주제에 대해서도 쓸 것입니다.

• 소프트웨어 아키텍처
• 프로그래밍 환경
• 리눅스 운영체제
• 기타

흥미로운 기술, 프로그래밍 언어 등을 발견했다면 알려주세요! 저는 항상 새로운 것을 배우는 데 열려있습니다!

저자 소개

저는 팔마에 거주하는 풀스택 소프트웨어 개발자인 Andrés입니다. 코딩 기술을 향상하기 위한 개인적인 여정을 떠나고 있습니다. 나는 또한 내 이름으로 네 권의 소설을 출판한 자가 출판 판타지 작가이기도 합니다. 무엇이든 물어보세요!

위 내용은 PWA 및 Django #PWA의 온라인 및 오프라인 리소스 - Django를 사용하여 프로그레시브 웹 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!