Learn PWA 간단 정리

web.dev의 Learn PWA에 있는 일부 아티클들을 읽으면서, PWA로 할 수 있는 것들을 정리해보았습니다.

• PWA로 할 수 있는 것
• Service worker
• 캐싱
• Web App Manifest
• 설치

PWA로 할 수 있는 것

다양한 체크리스트나 조건들이 있지만, 특징적이라고 생각되는 것만 정리해보면 다음과 같다고 볼 수 있다.

1. 웹 페이지를 앱 형태로 설치할 수 있음
   • 스토어에 출시도 가능함

2. 오프라인에서 동작 가능함

Service worker

• 오프라인에서도 동작함

• 다양한 API가 제공되고, PWA의 대부분의 기능들을 여기서 함

• 메인 JS 실행부와 다른 자기 쓰레드를 가짐

  • non-blocking

• 적용되는 스코프는 자신이 속한 폴더와 모든 하위 폴더

• 자기 스코프 안에서 발생한 network request를 모두 받아서 어떻게 처리할지 결정할 수 있음

  • 즉 network proxy라고 할 수 있음

Service Worker API (MDN) 참고

서비스 워커 register 하기

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/serviceworker.js")
}

network request 받아서 처리하기

fetch event는, service worker에서 자신의 스코프 안에서 발생한 network request를 받게 해준다.

// serviceworker.js
self.addEventListener("fetch", (event) => {
  console.log(`URL requested: ${event.request.url}`)
})

이걸로 조건문으로 나누어서 경우에 따라 어떻게 처리할지 결정하면 되는듯하다.

응답도 해보자.

// serviceworker.js
self.addEventListener("fetch", event => {
    const response = .... // a response or a Promise of response
    event.respondWith(response);
});

respondWith로 넘겨줄 수 있는데, 반드시 Response 객체를 줘야 한다고 한다.

FetchEvent: respondWith() MDN 레퍼런스

캐싱

웹에서 쓸 수 있는 storage들은 다음과 같다고 한다 :

• web storage
  • localStorage, sessionStorage 등
  • key/value string pair
  • synchronous API
  • 따라서 추천되지 않음
• indexedDB
  • object based (No-SQL)
  • 일반적으로 추천되는 방식
  • IndexedDB API
• Cache storage
  • HTTP request과 response를 저장할 수 있음
  • asset 파일 같은 것들을 저장할 수 있는 것
  • Cache Storage API

service worker에서 사용하면, 빠르게 그리고 오프라인에서도 사용할 수 있다.

IndexedDB는 주로 객체를 저장하는 데에 쓰고, Cache Storage는 주로 파일들을 저장하는 데에 쓰는 듯하다.

html, css, js, 이미지 등을 Cache Storage에 저장해둘 수 있다.

// serviceworker.js
caches.open("pwa-assets").then((cache) => {
  cache.add("styles.css") // it stores only one resource
  cache.addAll(["styles.css", "app.js"]) // it stores two resources
})

network request를 캐시에서 찾아서 돌려주기

// serviceworker.js
self.addEventListener("fetch", (event) => {
  event.respondWith(caches.match(event.request))
})

Cache Storage에는 HTTP request와 response를 캐싱해둘 수 있다.

request를 그대로 넘겨줘서 캐싱해놓은 걸 찾고 돌려주고 있다.

캐싱 전략

캐싱을 통해 파일이나 데이터를 저장해두면 오프라인에서 사용 가능하다.

네트워크를 통해 가져오면 온라인에서만 가능하지만 최신 정보로 업데이트 할 수 있다.

이를 기반으로, 앱에서 network request가 왔을 때 어떻게 처리할 수 있을지 전략을 만들어보면 다음과 같다고 할 수 있다 :

• 캐시 first
  • 캐시에서 먼저 찾고, 없으면 네트워크에서 가져오기
• 네트워크 first
  • 네트워크에서 가져오고, 없으면 캐시에서 찾기
• Stale While Revalidate
  • 캐시에서 가져와서 갖다주고, 백그라운드에서는 네트워크로부터 가져와서 업데이트하기
• 네트워크 only
  • 네트워크에서만 가져오기
• 캐시 only
  • 캐시에서만 가져오기

Workbox

Service Worker나 Cache Storage 같은 로우 레벨 API들을 한 단계 묶은 라이브러리 중에 유명한 게 구글 크롬 팀이 만든 Workbox라는 라이브러리라고 한다.

이 라이브러리는 여러 패키지로 이루어져있는데, 그 중 workbox-strategies라는 패키지가 위 캐싱 전략들에 대응되는 메서드를 제공한다.

import { registerRoute } from "workbox-routing"
import { StaleWhileRevalidate } from "workbox-strategies"

registerRoute(
  ({ url }) => url.pathname.startsWith("/images/avatars/"),
  new StaleWhileRevalidate()
)

Workbox Docs

Workbox (web.dev)

Web App Manifest

앱으로서 web content가 어떻게 보여질지 OS에게 알려주는 파일이라고 한다.

확장자 :

• .webmanifest : 오피셜 확장자
  • e.g. app.webmanifest
• .json : JSON 타입으로도 가능하다
  • 여전히 오래된 PWA들은 manifest.json처럼 사용하기도 한다고 한다.

// app.webmanifest
{
  "name": "My First Application"
}

프로퍼티

Basic fields

• name
• short_name
• icons
• start_url
• display
• id

Recommended fields

• theme_color
• background_color
• scope

..

설치

PWA로 인정되면 설치가 가능해지는데, 브라우저마다 PWA로 인정하는 기준이 조금씩 다르다고 한다.

기본적으로는 safari를 제외하면, Web App Manifest 파일이 있고 몇몇 핵심 프로퍼티를 갖고 있는지를 그 기준으로 사용한다고 한다.

조건을 만족하면 설치 버튼이 자동으로 뜨는듯하다.

설치 prompt

let deferredPrompt

window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault()
  deferredPrompt = e
})

beforeinstallprompt라는 event는 설치가 가능할 때 트리거 되는데, 그래서 설치 버튼을 커스텀으로 만들거나 하고 싶을 때 이런 식으로 사용할 수 있다고 한다.

참고

• Learn PWA (web.dev)
• Progressive web apps (MDN)