찾다
백엔드 개발파이썬 튜토리얼PWA 및 Django #PWA의 온라인 및 오프라인 리소스 - Django를 사용하여 프로그레시브 웹 애플리케이션 개발

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

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

PWA and Django #Online and offline resources in a PWA - Developing Progressive Web Applications with Django

오프라인 기능 구현

이전 장에서는 매니페스트와 ServiceWorker라는 필수 부분을 모두 갖춘 작은 PWA 애플리케이션을 정의했습니다. 우리는 PWA를 등록하는 방법을 배웠고 일부 이미지를 사용하여 매우 간단한 인터페이스를 개발했습니다.

PWA and Django #Online and offline resources in a PWA - Developing Progressive Web Applications with Django

이제 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 and Django #Online and offline resources in a PWA - Developing Progressive Web Applications with Django

다음 장에서

이제 PWA가 생겼습니다. 이제 운영 체제에서 기본 애플리케이션으로 표시되는 설치 가능한 PWA를 만드는 방법을 알아 보겠습니다. 이는 PWA의 가장 뛰어난 기능 중 하나입니다. 이를 사용하여 Django를 사용하여 "거의 네이티브" 애플리케이션을 만들 수 있습니다.

다음 장에서 만나요!

목록에 대해

Python 및 Docker 게시물 중에서 다음과 같은 다른 관련 주제에 대해서도 쓸 것입니다.

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

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

저자 소개

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

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Python vs. C : 학습 곡선 및 사용 편의성Python vs. C : 학습 곡선 및 사용 편의성Apr 19, 2025 am 12:20 AM

Python은 배우고 사용하기 쉽고 C는 더 강력하지만 복잡합니다. 1. Python Syntax는 간결하며 초보자에게 적합합니다. 동적 타이핑 및 자동 메모리 관리를 사용하면 사용하기 쉽지만 런타임 오류가 발생할 수 있습니다. 2.C는 고성능 응용 프로그램에 적합한 저수준 제어 및 고급 기능을 제공하지만 학습 임계 값이 높고 수동 메모리 및 유형 안전 관리가 필요합니다.

Python vs. C : 메모리 관리 및 제어Python vs. C : 메모리 관리 및 제어Apr 19, 2025 am 12:17 AM

Python과 C는 메모리 관리 및 제어에 상당한 차이가 있습니다. 1. Python은 참조 계산 및 쓰레기 수집을 기반으로 자동 메모리 관리를 사용하여 프로그래머의 작업을 단순화합니다. 2.C는 메모리 수동 관리가 필요하므로 더 많은 제어를 제공하지만 복잡성과 오류 위험을 증가시킵니다. 선택할 언어는 프로젝트 요구 사항 및 팀 기술 스택을 기반으로해야합니다.

과학 컴퓨팅을위한 파이썬 : 상세한 모양과학 컴퓨팅을위한 파이썬 : 상세한 모양Apr 19, 2025 am 12:15 AM

과학 컴퓨팅에서 Python의 응용 프로그램에는 데이터 분석, 머신 러닝, 수치 시뮬레이션 및 시각화가 포함됩니다. 1.numpy는 효율적인 다차원 배열 및 수학적 함수를 제공합니다. 2. Scipy는 Numpy 기능을 확장하고 최적화 및 선형 대수 도구를 제공합니다. 3. 팬더는 데이터 처리 및 분석에 사용됩니다. 4. matplotlib는 다양한 그래프와 시각적 결과를 생성하는 데 사용됩니다.

파이썬 및 C : 올바른 도구 찾기파이썬 및 C : 올바른 도구 찾기Apr 19, 2025 am 12:04 AM

Python 또는 C를 선택할 것인지 프로젝트 요구 사항에 따라 다릅니다. 1) Python은 간결한 구문 및 풍부한 라이브러리로 인해 빠른 개발, 데이터 과학 및 스크립팅에 적합합니다. 2) C는 컴파일 및 수동 메모리 관리로 인해 시스템 프로그래밍 및 게임 개발과 같은 고성능 및 기본 제어가 필요한 시나리오에 적합합니다.

데이터 과학 및 기계 학습을위한 파이썬데이터 과학 및 기계 학습을위한 파이썬Apr 19, 2025 am 12:02 AM

Python은 데이터 과학 및 기계 학습에 널리 사용되며 주로 단순성과 강력한 라이브러리 생태계에 의존합니다. 1) 팬더는 데이터 처리 및 분석에 사용되며, 2) Numpy는 효율적인 수치 계산을 제공하며 3) Scikit-Learn은 기계 학습 모델 구성 및 최적화에 사용되며 이러한 라이브러리는 Python을 데이터 과학 및 기계 학습에 이상적인 도구로 만듭니다.

Python 학습 : 2 시간의 일일 연구가 충분합니까?Python 학습 : 2 시간의 일일 연구가 충분합니까?Apr 18, 2025 am 12:22 AM

하루에 2 시간 동안 파이썬을 배우는 것으로 충분합니까? 목표와 학습 방법에 따라 다릅니다. 1) 명확한 학습 계획을 개발, 2) 적절한 학습 자원 및 방법을 선택하고 3) 실습 연습 및 검토 및 통합 연습 및 검토 및 통합,이 기간 동안 Python의 기본 지식과 고급 기능을 점차적으로 마스터 할 수 있습니다.

웹 개발을위한 파이썬 : 주요 응용 프로그램웹 개발을위한 파이썬 : 주요 응용 프로그램Apr 18, 2025 am 12:20 AM

웹 개발에서 Python의 주요 응용 프로그램에는 Django 및 Flask 프레임 워크 사용, API 개발, 데이터 분석 및 시각화, 머신 러닝 및 AI 및 성능 최적화가 포함됩니다. 1. Django 및 Flask 프레임 워크 : Django는 복잡한 응용 분야의 빠른 개발에 적합하며 플라스크는 소형 또는 고도로 맞춤형 프로젝트에 적합합니다. 2. API 개발 : Flask 또는 DjangorestFramework를 사용하여 RESTFULAPI를 구축하십시오. 3. 데이터 분석 및 시각화 : Python을 사용하여 데이터를 처리하고 웹 인터페이스를 통해 표시합니다. 4. 머신 러닝 및 AI : 파이썬은 지능형 웹 애플리케이션을 구축하는 데 사용됩니다. 5. 성능 최적화 : 비동기 프로그래밍, 캐싱 및 코드를 통해 최적화

Python vs. C : 성능과 효율성 탐색Python vs. C : 성능과 효율성 탐색Apr 18, 2025 am 12:20 AM

Python은 개발 효율에서 C보다 낫지 만 C는 실행 성능이 높습니다. 1. Python의 간결한 구문 및 풍부한 라이브러리는 개발 효율성을 향상시킵니다. 2.C의 컴파일 유형 특성 및 하드웨어 제어는 실행 성능을 향상시킵니다. 선택할 때는 프로젝트 요구에 따라 개발 속도 및 실행 효율성을 평가해야합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기