PWA를 오프라인으로 작동시키는 방법

게시 됨: 2020-01-10

업계를 변화시키는 기능과 함께 Progressive Web App이 무엇인지 이미 알고 있을 것입니다. 그러나 반복을 위해 오프라인 기능인 웹 경험에 잠재적으로 혁명을 일으킬 수 있는 놀랍고 고유한 PWA 기능을 다시 한 번 반복하겠습니다. .

 추천 자료: PWA란 무엇입니까?

연결을 통해서만 콘텐츠를 볼 수 있는 일반 웹과 달리 Progressive Web App은 PWA의 많은 프로그레시브 기능 을 담당하는 기본 제공 메커니즘인 서비스 워커 가 필요한 파일을 로드한 후 오프라인에서 볼 수 있다는 점에서 다릅니다. 가능해지고 사용자는 오프라인 상태에서도 앱과 상호 작용할 수 있습니다.

프로그레시브 웹 앱 및 오프라인 가용성

PWA의 모든 소란, 특히 오프라인 기능이 무엇인지 알기 위해서는 정의에 따라 PWA이기도 한 당사의 메인 웹사이트를 오프라인에서 직접 볼 수 있어야 합니다.

PWA로 오프라인 상태에서도 콘텐츠 보기

Progressive Web Apps를 사용하면 전체 오프라인 경험이 일반적인 연결 경험과 다르지 않으며 이것이 바로 장점입니다. 이것은 연결이 없는 경우에도 중단 없는 브라우징 경험이 필요한 전자 상거래 상점에 특히 유용한 기능입니다.

참고 : 모든 PWA 사이트는 사용자가 오프라인 보기를 사용할 수 있게 하기 전에 먼저 필수 리소스의 초기 캐싱이 필요합니다.

PWA를 오프라인으로 작동시키는 방법

완전한 기능을 갖춘 오프라인 지원 프로그레시브 웹 앱을 구축하는 모든 세부 사항으로 들어가는 것은 복잡할 것입니다. 그래서 오늘 우리는 기본 사항부터 먼저 시작합니다. 우리의 목표는 오프라인에서 작동하는 베어본 프로그레시브 웹 앱을 만드는 것 입니다.

전제 조건

일반 웹사이트/웹 앱. 하나의 index.html , 하나의 index.js 및 하나의 style.css 가 있는 모든 것이 가능합니다.

모든 전제 조건이 갖추어지면 베어본 PWA가 오프라인으로 작동하도록 할 때입니다!

기본 서비스 작업자 만들기

먼저 기능적 서비스 작업자에 필요한 모든 코드가 포함된 sw.js 를 만들어야 합니다.

 // sw.js
self.addEventListener("가져오기", 이벤트 => {
    console.log(" 가져왔습니다 " + event.url);
});

서비스 워커를 생성했으면 브라우저에서 지원하는지 확인하고 index.js 에서 참조하세요.

 // 인덱스.js
if(네비게이터의 "serviceWorker") {
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log("등록된 서비스 작업자입니다!"));
}
// 페이지의 나머지 코드...

위의 코드는 충분히 단순해야 합니다. 브라우저가 서비스 워커를 지원하는지 확인하고 지원하는 경우 " 등록된 서비스 워커! ". 서비스 워커를 등록하면 기본적으로 sw.js 를 서비스 워커에 대한 지침으로 사용하도록 브라우저에 지시하고 새 서비스 워커를 사이트와 연결합니다.

이제 sw.js 로 돌아가 다음 코드를 추가합니다.

 // sw.js
self.addEventListener("가져오기", 이벤트 => {
    console.log(" 가져왔습니다 " + event.url);
});

코드는 추가 작업에 필수적인 EventListener 를 추가합니다. 사실, Chrome을 포함한 많은 브라우저는 등록된 fetch 리스너가 없는 한 PWA 설치를 허용하지 않습니다.

위 코드의 addEventListener 에는 수신할 이벤트와 이벤트 객체를 받는 콜백이라는 두 개의 인수가 있습니다. 이 이벤트가 발생하면 서비스 워커는 웹사이트의 HTML, CSS, JS, 오디오, 이미지 및 API/기타 웹사이트에 대한 기타 요청을 포함하는 fetch 이벤트를 수신하기 시작합니다.

SimiCart 서비스 워커 — *서비스 워커는 Chrome DevTools를 사용하여 확인할 수 있습니다.*

리소스 캐싱

PWA가 오프라인이 가능하도록 하려면 서비스 작업자 가 콘텐츠를 제공하는 데 일부를 지불하지만 페이지의 리소스도 캐시해야 합니다.

페이지의 리소스를 캐시하려면 먼저 캐시 스토리지의 크기에 제한이 있으므로 계획을 세워야 합니다.

캐시 스토리지 제한

브라우저마다 캐시 스토리지를 처리하는 방법이 다릅니다. 그러나 거의 모든 사이트는 캐시 스토리지 에 대한 크기 제한이 있습니다. 이 제한 때문에 Amazon과 같은 크고 비만한 사이트가 서비스 워커를 사용하여 전체 스토어를 캐시하는 것을 볼 수 없는 경우가 많습니다.

이제 이 제한은 최종 사용자의 장치에 따라 다르기 때문에 달라집니다. 그러나 일반적으로 사용자의 최대 디스크 공간의 약 20%여야 합니다. 자세한 내용은 아래 차트 또는 Progressive Web Apps용 오프라인 저장소에 대한 Google의 공식 가이드를 참조하세요.

이제 이 Cache Storage 제한이 해결되었으므로 실제로 리소스를 캐시 하는 방법으로 이동해 보겠습니다.

페이지의 리소스를 캐시하려면 저장하려는 모든 자산이 포함된 전역 배열이 필요합니다.

 /* 
  이것은 우리가 캐시에 저장하고 싶은 모든 것입니다.
  앱이 오프라인/설치 가능하게 작동하려면
  이미지뿐만 아니라 HTML, JS 및 CSS도 저장해야 합니다.
  뿐만 아니라 - 오프라인일 때 사용하려는 모든 것.
*/
상수 자산 = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/스타일.css",
    "/index.html",
    "/offline.html",
    "/"
];

오프라인에서 사용하려는 모든 것이 저장되는 곳입니다. 위의 예에서 처음 몇 개의 이미지는 다양한 SimiCart 로고가 저장된 Imgur의 경로입니다.

이 단계를 통해 오프라인 사용에 필요한 리소스 목록이 준비되었습니다. 서비스 워커를 사용하여 캐시합시다.

sw.js 상단에 다음 상단을 추가하십시오.

 // sw.js

let cache_name = "SimiCart"; // 캐시를 식별하는 데 사용되는 문자열

self.addEventListener("설치", 이벤트 => {
    console.log("설치 중...");
    이벤트.대기까지(
        캐시
            .open(캐시 이름)
            .then(캐시 => {
                반환 cache.addAll(자산);
            })
            .catch(err => console.log(err))
    );
});

기본적으로 이 코드는 브라우저가 캐싱을 기다리도록( waitUntil() 호출을 사용하여) 지시합니다.

캐시 API, 특히 addAll() 을 사용하여 자산 배열을 캐시에 쉽게 추가하고 서비스 작업자가 제공할 준비를 할 수 있습니다. 글쎄요, 다시 생각해보면 아직 준비 가 덜 된 상태입니다. 우리는 여전히 fetch 이벤트 핸들러를 약간 수정해야 합니다.

이제 다음과 같이 표시됩니다.

 self.addEventListener("가져오기", 이벤트 => {
    if (event.request.url === "https://www.simicart.com/") {
        // 또는 앱의 URL이 무엇이든
        event.respondWith(
            fetch(event.request).catch(err =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } 또 다른 {
        event.respondWith(
            fetch(event.request).catch(err =>
                caches.match(event.request).then(응답 => 응답)
            )
        );
    }
});

이제 위의 코드에서 앱이 오프라인일 때도 리소스를 캐시하려고 한다는 것이 분명해야 합니다. 논리는 다음과 같습니다.

먼저 앱은 리소스를 온라인으로 가져오고 해당 가져오기가 실패할 경우 캐시된 리소스로 응답을 시도합니다( respondWith() 사용).
respondWith() 내에서 네트워크에서 리소스를 가져 fetch(event.request) 를 호출하고 가져오기가 Promise 기반이므로 네트워크 연결에 실패하면 Promise 가 거부하고 차례로 catch() 진술.
catch() 문에서 캐시된 리소스를 호출하려는 위치입니다.

그리고 그게 다야. 이제 PWA가 오프라인에서 작동할 수 있습니다! 꽤 쉽죠?

결론

기술 세계에서는 상황이 매우 빠르게 움직이고 있으며 PWA로 전환하거나 오프라인 기능과 같은 중요한 기능을 PWA에 통합하는 데 시간이 오래 걸릴수록 귀하와 귀하의 비즈니스에 더 많은 기회 비용이 발생합니다.

그러나 SimiCart와 같이 귀하의 모든 요구 사항을 처리할 수 있는 솔루션 제공업체가 항상 있습니다. 우연히 온라인 판매자이고 완벽한 Magento PWA 솔루션을 찾고 있다면 올바른 위치에 있습니다. 우리는 PWA 및 네이티브 앱 분야에서 5년 이상의 전문 지식을 보유한 Magento 전자 상거래 웹사이트에 대한 알려진 솔루션 제공업체입니다.

SimiCart로 PWA 사용자 정의