PWA의 μΊμ‹±μ΄λž€?

λΈŒλΌμš°μ €μ˜ 캐싱(Cache-Control)κ³ΌλŠ” λ‹€λ₯΄κ²Œ λΈŒλΌμš°μ €μ˜ μΊμ‹œ μŠ€ν† λ¦¬μ§€(Cache Storage)λ₯Ό ν™œμš©ν•˜μ—¬ μ›Ή λ¦¬μ†ŒμŠ€λ₯Ό μΊμ‹±ν•˜λŠ” κΈ°μˆ μž…λ‹ˆλ‹€.

μ›Œν¬λ°•μŠ€ 캐싱 μ „λž΅

μ›Œν¬λ°•μŠ€λ‘œ μ›Ή μ„œλΉ„μŠ€λ₯Ό 캐싱할 λ•ŒλŠ” λ‹€μŒ 2가지 방법을 μ•Œμ•„μ•Ό ν•©λ‹ˆλ‹€.

  • 프리 캐싱(Precaching)
  • λŸ°νƒ€μž„ 캐싱(Runtime Caching)

프리 캐싱

프리 μΊμ‹±μ΄λž€ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ ‘μ†ν•˜κΈ° 전에 미리 μΊμ‹±ν•΄λ†“λŠ” 캐싱 방법을 λ§ν•©λ‹ˆλ‹€. μ›Œν¬λ°•μŠ€ CLI둜 μƒμ„±ν•œ κ²°κ³Όλ¬Όμ΄λ‚˜ workbox-build λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ μ•„λž˜μ™€ 같은 μ½”λ“œλ₯Ό 보면 프리 캐싱이라고 μ΄ν•΄ν•˜μ‹œλ©΄ λ©λ‹ˆλ‹€.

// workbox cli
module.exports = {
  "globDirectory": "dist/",
  "globPatterns": [
    "**/*.{css,ico,html,js,json,png}"
  ],
  "swDest": "dist/sw.js"
};
// workbox-build lib
workboxBuild.generateSW({
  globDirectory: 'build',
  globPatterns: [
    '**/*.{html,json,js,css}',
  ],
  swDest: 'build/sw.js',
});

λŸ°νƒ€μž„ 캐싱

λŸ°νƒ€μž„ μΊμ‹±μ΄λž€ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ™μž‘ μ‹œν‚¬ λ•Œ λ°œμƒν•˜λŠ” μš”μ²­μ— λŒ€ν•΄ μ„œλ²„ 응닡을 μΊμ‹œ μŠ€ν† λ¦¬μ§€μ— μ €μž₯ν•˜λŠ” 캐싱 방법을 λ§ν•©λ‹ˆλ‹€. 보톡 이미지와 같은 λ¦¬μ†ŒμŠ€λŠ” 파일 μš©λŸ‰μ΄ μ»€μ„œ 처음 νŽ˜μ΄μ§€ 접속할 λ•Œ μ„œλΉ„μŠ€ μ›Œμ»€ μ„€μΉ˜ μ‹œκ°„μ΄ κΈΈμ–΄μ§€λ―€λ‘œ λŸ°νƒ€μž„ μΊμ‹±μœΌλ‘œ ν•˜λŠ”κ²Œ μ’‹μŠ΅λ‹ˆλ‹€.

// workbox-build lib
workboxBuild.generateSW({
  // ...
  runtimeCaching: [{
    urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
    handler: 'CacheFirst',
    options: {
      cacheName: 'my web app images',
      expiration: {
        maxEntries: 10,
      },
    },
  }],
});

캐싱 μ „λž΅

μ„œλΉ„μŠ€ μ›Œμ»€μ˜ 캐싱 μ „λž΅μ€ λ‹€μŒ 5κ°œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

  • Cache First : λ„€νŠΈμ›Œν¬ μš”μ²­κ³Ό 캐싱 쀑 항상 μΊμ‹œλ₯Ό λ¨Όμ € μ ‘κ·Όν•˜λŠ” 방식
  • Cache Only : 캐싱 파일만 ν™•μΈν•˜κ³  μ—†μœΌλ©΄ μ—λŸ¬λ₯Ό λ±‰λŠ” 방식
  • Network First : 항상 μΊμ‹±λ³΄λ‹€λŠ” λ„€νŠΈμ›Œν¬ μš”μ²­μ„ λ¨Όμ € μ§„ν–‰ν•˜λŠ” 방식
  • Network Only : ν•΄λ‹Ή νŒŒμΌμ— λŒ€ν•΄μ„œλŠ” 캐싱 파일의 μœ λ¬΄μ™€ 관계 없이 항상 λ„€νŠΈμ›Œν¬ μš”μ²­λ§Œ ν•˜λŠ” 방식
  • StaleWhileRevalidate : 캐싱을 λ¨Όμ € μ‹œλ„ν•˜κ³  μ—†μœΌλ©΄ λ„€νŠΈμ›Œν¬ μš”μ²­μ„ μ§„ν–‰ν•˜λŠ” 방식. ν”„λ‘œν•„ 이미지와 같이 자주 μ—…λ°μ΄νŠΈ λ˜λ©΄μ„œ μ΅œμ‹  데이터가 μ•„λ‹ˆμ–΄λ„ λ˜λŠ” 데이터 μ μš©ν•˜λ©΄ μ’‹μŒ

참고 자료