첫 PWA(Progressive Web App)를 구축한 방법

이 게시물은 원래 silvestar.codes에 게시되었습니다.

현재 내 사이트는 프로그레시브 웹 앱으로 사용할 수 있습니다. 야호! 💯



이 게시물에서는 이 흥미로운 기능을 내 사이트에 추가한 방법과 이유에 대해 자세히 알아볼 것입니다.

내가 왜 그랬어

나는 나 자신을 매우 현명한 사람이라고 생각하고 첫날부터 내 사이트를 더 좋게 만들려고 노력했습니다. 사이트를 구축할 당시에는 PageSpeed ​​Insights 또는 WebPageTest와 같은 웹 성능 도구의 모든 메트릭을 이해하지 못했습니다. 하지만 내 사이트를 더 좋게 만들려고 노력하면서 새로운 기술을 배우고 있었고 내 웹사이트는 점점 더 좋아졌습니다.

이제 내 사이트가 최고 점수를 받았지만 한 가지 문제가 한동안 저를 괴롭혔습니다. 프로그레시브 웹 앱 점수였습니다.



PWA 보고서를 보고 내 사이트가 PWA를 사용할 준비가 되었음을 깨달았습니다. 해결해야 할 몇 가지 문제만 있었습니다. 나는 이러한 문제를 이해하지 못했지만 전에는 결코 나를 막지 못했습니다.

내가 한 방법

시작점으로 “Your First Progressive Web App” tutorial을 따르기로 결정했습니다. 첫 번째 단계는 내 webmanifest.json 파일을 업데이트하는 것이었습니다. start_url 및 display 옵션과 <meta name="apple-mobile-web-app-capable" content="yes"> 와 같은 일부 필수 메타 태그를 추가했습니다.

{
  "name": "SB site - Silvestar Bistrović website",
  "short_name": "SB site - Silvestar Bistrović website",
  "icons": [
    …
  ],
  "theme_color": "#12e09f",
  "background_color": "#fff",
  "start_url": "/offline.html",
  "display": "standalone"
}

다음으로 Service Worker용 파일sw.js을 생성했습니다. 서비스 작업자를 등록하려면 인덱스 페이지에 추가해야 하는 작은 스니펫이 있습니다.

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then((reg) => {
        console.log('Service worker registered.', reg);
      });
  });
}

Service Worker 파일의 내용은 사이트에서 사용하려는 항목에 따라 다를 수 있습니다. 내 사이트는 매우 간단하기 때문에 기본적인 오프라인 경험만 사용하기로 결정했습니다. 즉, 오프라인 경험을 위해 offline.html 파일이 필요했습니다. 그것은 내 홈페이지의 벗겨진 버전이 될 것입니다. 그래서 외부 이미지를 제거하고 CSS를 사용하여 자리 표시자를 만들었습니다. 외부 CSS 파일을 제거하고 head 섹션에 인라인했습니다. 남은 일은 favicon 파일을 추가하는 것뿐이었습니다. 이것이 필요한지 아직 확실하지 않지만 만일을 대비하여 거기에 두기로 결정했습니다. 어쨌든 그 파일은 크지 않습니다.
sw.js 파일은 네 개의 세그먼트로 나눌 수 있습니다.

상수 정의,

설치,

활성화 및

가져오는 중입니다.

먼저 캐시 이름과 캐시할 파일을 정의했습니다.

// constants
const CACHE_NAME = 'sb-cache-v1.3'
const FILES_TO_CACHE = [
  '/offline.html',
  '/favicon/apple-touch-icon.png',
  '/favicon/favicon-32x32.png',
  '/favicon/favicon-16x16.png',
  '/favicon/site.webmanifest',
  '/favicon/safari-pinned-tab.svg',
  '/favicon/favicon.ico',
  '/favicon/mstile-144x144.png',
  '/favicon/browserconfig.xml'
]

다음으로 주어진 캐시 이름으로 캐시를 열고 파일을 캐시하는 install 이벤트를 생성했습니다.

self.addEventListener('install', (event) => {
  // CODELAB: Precache static resources here.
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page')
      return cache.addAll(FILES_TO_CACHE)
    })
  )
})

그런 다음 디스크에서 캐시된 파일을 정리하는 activate 이벤트를 생성했습니다.

self.addEventListener('activate', (event) => {
  // CODELAB: Remove previous cached data from disk.
  event.waitUntil(
    caches.keys().then(keyList => Promise.all(keyList.map((key) => {
      if (key !== CACHE_NAME) {
        console.log('[ServiceWorker] Removing old cache', key)
        return caches.delete(key)
      }
    })))
  )
})

마지막으로 요청fetch이 .mode인 경우에만 페이지 탐색을 처리하는 navigate 이벤트를 생성했습니다. 요청이 네트워크에서 항목을 가져오지 못한 경우 offline.html 파일 가져오기를 시도합니다.

self.addEventListener('fetch', (event) => {
  // CODELAB: Add fetch event handler here.
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .catch(() => caches.open(CACHE_NAME)
          .then(cache => cache.match('offline.html')))
    )
  }
})

최종 결과

배포 후 사이트에 대한 감사를 실행하고 이제 다음과 같이 표시됩니다.



불꽃놀이는 또 한 번 등장할 만하다고 생각합니다. 💯

다음 단계

다음 단계는 Workbox에 대해 자세히 알아보는 것입니다. 그 후 사이드 프로젝트Code Line Daily에 전체 오프라인 경험을 추가할 계획입니다.

편집: 계속 읽기 .