인형을 위한 PWA 서비스 워커

문제는 서비스 작업자가 앞으로 몇 년 동안 중요한 역할을 담당하게 되며 이 새로운 기술에 더 빨리 익숙해질수록 웹의 새로운 미래에 더 잘 적응할 수 있다는 것입니다.

이것이 바로 여러분이 이 새로운 기술에 대해 더 잘 알 수 있도록 돕기 위해 서비스 작업자에 대해 함께 토론하는 이유입니다. 인터넷.

서비스 워커란?

정의

일반적으로 PWA를 만들거나 끊는 기술로 간주되는 서비스 작업자는 브라우저와 독립적으로 실행되고 네트워크 차단을 담당 하는 API입니다. 이 때문에 이전에는 웹에서 불가능했던 많은 작업을 수행할 수 있습니다. 서비스 작업자가 제어하는 ​​웹 사이트(일반적으로 PWA)는 사용 중인 장치와 더 긴밀하게 통합되어 결과적으로 더 많은 하드웨어 기능과 앱과 유사한 기능을 웹에 가져올 수 있습니다(예: 푸시 알림, 백그라운드 동기화 등).

작동 방식

간단히 말해서. 서비스 워커는 기본적으로 나가는 네트워크 요청을 가로채고 수정하고 처리하는 브라우저와 서버 사이의 이벤트 기반 계층입니다.

그리고 서비스 워커는 이벤트 기반 이기 때문에 이벤트를 통해서만 응답하고 통신하며, 프라미스를 사용하여 작업이 완료되면 알려줍니다. 그러나 모든 이벤트(예: fetch 및 push ) 수신은 서비스 워커가 활성 상태일 때만 가능하며, 이는 브라우저가 서비스 워커를 인식하고 등록 할 때(또한 서비스 워커 자체가 성공적으로 설치를 완료한 때)를 나타냅니다. 단순화된 방식으로 서비스 워커의 일반적인 수명 주기는 다음과 같습니다.

또한 서비스 워커에서 사용 가능한 모든 이벤트를 기록해 두십시오.

모든 기능적 이벤트( fetch , sync 및 push )는 PWA의 거의 모든 점진적 기능 특성(예: 오프라인 기능, 백그라운드 동기화, 푸시 알림)을 구성하는 이벤트이기 때문에 자명해야 합니다.

 추천 자료: PWA란 무엇입니까? 프로그레시브 웹 앱에 대해 알아야 할 모든 것

서비스 워커에 대한 제약

이것은 브라우저와 독립적으로 실행되는 스크립트이므로 몇 가지 제약이 있습니다.

• HTTPS 프로토콜 : 서비스 워커는 HTTPS 기반 웹사이트에서 실행되어야 합니다.

• localStorage , DOM 및 창에 액세스할 수 없습니다 .
• 제한된 scope : 서비스 워커는 service-worker.js 가 있는 현재 디렉터리(및 하위 디렉터리)의 scope 에서만 작동할 수 있습니다.
• 비동기식 : 서비스 워커는 본질적으로 비동기식이므로 Promise 기반 API에 의존합니다.

서비스 워커가 PWA에 의미하는 것

이전에 언급했듯이 서비스 작업자는 PWA의 중추이며, PWA가 없으면 PWA의 많은 혁신적인 기능을 사용할 수 없습니다. 기본적으로 서비스 워커가 하는 일은 다음을 위한 수단을 제공하는 것입니다.

더 나은 성능

서비스 작업자가 캐싱 프로세스를 엄청나게 돕기 때문에 반복 방문에 대한 성능은 PWA에서 훨씬 더 좋습니다. 대부분의 웹 사이트에서 사용되는 일반적인 웹 캐시(HTTP 캐시)와 비교하여 PWA는 좋지 않은 네트워크 조건에서도 콘텐츠를 제공하는 데 탁월합니다.

이것은 모두 서비스 작업자가 개발자에게 캐싱이 수행되는 작업과 방법 에 대한 완전한 자유를 제공한다는 사실 덕분입니다. 서비스 워커의 캐싱 성능이 얼마나 좋은지 알아보려면 Google의 최근 연구인 '서비스 워커의 실제 성능 영향 측정'을 권장합니다. 이 연구에는 서비스 작업자 성과를 결정하기 위한 지표로 처음 페인트하는 시간을 중심으로 하는 명확한 방법론이 있습니다.

평균적으로 신규 방문자와 재방문자 모두 서비스 워커가 없는 페이지보다 서비스 워커가 페이지를 제어할 때 페이지가 훨씬 더 빨리 로드되었습니다.

Philip Walton, 서비스 작업자의 실제 성능 영향 측정

오프라인 액세스

등록되면 서비스 워커는 PWA 사이트에 필요한 콘텐츠를 캐시하고 나중에 제공합니다. 이렇게 하면 사용자가 여전히 사이트와 상호 작용하고 캐시된 모든 콘텐츠를 볼 수 있으므로 PWA 기반 웹 사이트를 오프라인에서 사용할 수 있습니다.

이것은 오프라인 액세스가 이전에 웹에서 볼 수 없었던 기능이라고 말하는 것이 아닙니다. 사용자에게 웹에서 오프라인 경험을 제공할 수 있었지만 경험이 최적이 아니었기 때문입니다(응용 프로그램 캐시는 Douchebag 참조) 및 서비스 워커는 AppCache의 단점을 해결하기 위해 개발되었습니다.

 추천 자료: PWA를 오프라인으로 작동시키는 방법

기본 앱 기능

오프라인 액세스 및 개선된 성능을 제공하는 것 외에도 서비스 작업자는 푸시 알림 및 백그라운드 동기화(가까운 미래에 지오펜싱 및 주기적 동기화)와 같은 더 많은 앱과 유사한 기능의 기반 역할도 합니다. 예를 들어 PWA의 푸시 알림 기능은 알림 API와 푸시 API의 두 가지 API를 사용하여 조합되며 둘 다 Service Worker API 위에 구축됩니다.

서비스 워커의 라이프사이클

서비스 수명은 등록, 설치 및 활성화의 세 부분으로 구성되며 모두 아래에서 자세히 설명합니다.

등록

우리가 해야 할 첫 번째 단계는 서비스 워커를 등록하는 것입니다. 이 단계가 없으면 브라우저는 서비스 워커의 위치를 ​​알지 못하므로 백그라운드에서 서비스 워커를 설치할 수 없습니다.
다음 코드를 사용하여 서비스 워커를 등록할 수 있습니다.

 if(네비게이터의 'serviceWorker') {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {범위: './sw-scope/'})
.then((reg) => {
   // 등록 성공
       console.log('등록 성공. 범위는 ' + reg.scope);
};

위의 코드는 먼저 브라우저에서 서비스 워커 API를 찾기 시작하고 브라우저가 해당 API를 지원하는 경우 serviceworkerContainer.register() 메서드를 사용하여 새 서비스 워커를 등록하고 서비스 워커의 scope 를 제공합니다. 예를 들어 위의 코드에서 scope 는 /pwa-examples/simicart/ 이며 이는 서비스 워커가 /pwa-examples/simicart/ 시작하는 페이지에서만 작동함을 의미합니다. 이러한 페이지를 ' 제어된 페이지 '라고 합니다.

설치

이제 브라우저는 서비스 워커의 위치와 범위를 알고 있으므로 서비스 워커 설치를 시도합니다. 이 단계에서 아무 것도 하지 않도록 선택할 수 있지만 이 단계는 대부분의 캐싱 프로세스가 발생하는 단계입니다. 예를 들어 다음은 일반적으로 자산 캐싱 프로세스가 수행되는 방식입니다.

 const 캐시 이름 = '사이트 캐시-v1'
상수 자산ToCache = [
    '/pwa-examples/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '/pwa-examples/js/app.js',
]

self.addEventListener('설치', ( 이벤트 ) => {
    이벤트.대기까지(  
        caches.open(cacheName).then((캐시) => {
              반환 cache.addAll(assetsToCache);
        })
      );
});

위의 예에서 볼 수 있듯이 Cache API를 사용하여 나중에 PWA를 오프라인에서 사용할 수 있도록 하는 데 사용할 자산을 캐시합니다. 이 캐싱 프로세스는 설치 이벤트 중에 발생합니다.

활성화

설치 단계가 끝나면 이제 서비스 워커를 활성화할 수 있습니다. 그러나 이 활성화 단계는 일반적 으로 자동으로 발생하지 않으며 서비스 워커가 활성화되기 위해서는 현재 페이지를 제어하는 ​​서비스 워커가 없는지 확인해야 합니다.

또는 skipWaiting() 메서드를 사용하여 서비스 워커의 활성화 프로세스를 자동화할 수도 있습니다.

 const 캐시 이름 = '사이트 캐시-v1'
상수 자산ToCache = [
    '/pwa-examples/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-examples/js/app.js',
]
self.addEventListener('설치', ( 이벤트 ) => {
    self.skipWaiting(); // 대기 건너뛰기
    이벤트.대기까지(  
        caches.open(cacheName).then((캐시) => {
              반환 cache.addAll(assetsToCache);
        })
      );
});

웹에는 서비스 작업자가 필요합니다.

이 시점에서 우리 모두는 서비스 워커가 웹이 취해야 하는 거의 최종 단계라는 데 동의할 수 있습니다. 사용자는 앱과 유사한 기능을 점점 더 요구하고 있으며 PWA가 소프트웨어 제공의 미래가 되고 있다는 사실을 결합하여 웹은 향후 몇 년 동안 많은 잠재력을 갖게 될 것으로 보입니다.

매장을 혁신하고자 하는 Magento 가맹점을 위해 귀사의 비즈니스를 위한 비용 효율적이고 완전한 헤드리스 PWA 솔루션을 제공합니다.