PWA 구현하기 (React, PWA, Webpack)

TECHMUSICVIDEOTEXTPHOTOABOUT

#react

#pwa

#webpack

Written by Paul

1. Node 모듈 설치

PWA(PWA, Progressive Web App)를 빌드하기 위해 필요한 웹팩 모듈들을 설치합니다.
yarn add --dev webpack-pwa-manifest workbox-webpack-plugin

2. manifest.json 파일 생성

public/manifest.json 파일을 생성합니다.
{
    "name": "react-webpack",
    "short_name": "react",
    "description": "react todo list app with pwa",
    "background_color": "#ffffff",
    "crossorigin": "use-credentials",
    "theme_color": "#eeeeee",
    "filename": "manifest.json"
}

주요 항목 설명:

  • name: 애플리케이션의 전체 이름.
  • short_name: 앱 아이콘을 바탕화면에 추가할 때 표시될 짧은 이름.
  • description: 앱에 대한 간략한 설명.
  • background_color: 애플리케이션의 시작 화면의 배경색.
  • theme_color: 웹앱이 브라우저에 표시될 때 사용할 색상.
  • crossorigin: 리소스를 로드할 때 사용할 CORS 정책.
  • filename: 앱의 manifest 파일 이름.

3. 웹팩 옵션 구현

webpack.config.js 파일에 PWA 관련 웹팩 플러그인 설정을 추가합니다.
...
const WebpackPwaManifest = require('webpack-pwa-manifest')
const { GenerateSW } = require('workbox-webpack-plugin')
const manifest = require('./public/manifest.json')

...

const pwaPlugin = new WebpackPwaManifest(manifest)

const workboxPlugin = new GenerateSW({
    swSrc: './src/sw.js',   // 사용자 정의 service worker 파일
    swDest: 'sw.js',         // 빌드 결과물로 생성할 service worker 파일
})

...

{
    ...
    plugins: [htmlPlugin, cssPlugin, pwaPlugin, workboxPlugin],
}

src/sw.js

서비스 워커 설정을 구현합니다.
workbox.core.skipWaiting()
workbox.core.clientsClaim()

// JSONPlaceholder API에 대한 캐싱 전략 설정
workbox.routing.registerRoute(
    new RegExp('<https://jsonplaceholder.typicode.com>'),
    new workbox.strategies.StaleWhileRevalidate()
)

// 푸시 알림 이벤트 리스너
self.addEventListener('push', event => {
    const title = 'Get Started With Workbox'
    const options = {
        body: event.data.text(),
    }
    event.waitUntil(
        self.ServiceWorkerRegistration.showNotification(title, options)
    )
})

// 미리 캐시할 자원들을 설정
workbox.precaching.precacheAndRoute(self.__precacheManifest)
위 설정에서는 jsonplaceholder API에 대한 캐싱 전략을 설정하고, 푸시 알림을 처리하며, 필요한 리소스를 미리 캐시합니다.

4. 서비스 워커 구현

src/index.js에서 서비스 워커를 등록하고 푸시 알림을 활성화합니다.
import React from 'react'
import ReactDOM from 'react-dom'
import Root from './components/Root'
import './styles/index.scss'

ReactDOM.render(<Root />, document.getElementById('root'))

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
            .register('/sw.js')
            .then(registration => {
                console.log('SW registered', registration)
                // 푸시 알림 구독
                registration.pushManager.subscribe({ userVisibleOnly: true })
                Notification.requestPermission().then(p => {
                    console.log(p)
                })
            })
            .catch(e => {
                console.log('SW registration failed: ', e)
            })
    })
}

서비스 워커 등록과 푸시 알림

  • navigator.serviceWorker.register('/sw.js'): 서비스 워커를 브라우저에 등록합니다.
  • registration.pushManager.subscribe({ userVisibleOnly: true }): 푸시 알림을 위한 구독 요청을 보냅니다.
  • Notification.requestPermission(): 푸시 알림을 받을 권한을 요청합니다.

테스트 및 확인

  • 위 코드를 구현한 후, 브라우저의 개발자 도구에서 Application 탭을 클릭하고, Service Workers 탭을 확인하여 서비스 워커가 정상적으로 실행되는지 확인할 수 있습니다.
  • 오프라인 모드로 전환 후, 페이지를 새로 고침하면 오프라인 상태에서도 웹 앱이 정상적으로 작동하는지 확인할 수 있습니다.
  • 푸시 알림은 Application 탭의 Service Workers에서 푸시 버튼을 클릭하여 테스트할 수 있습니다.
위와 같은 설정을 통해, 기본적인 PWA 기능을 구현할 수 있으며, 푸시 알림과 오프라인 지원 등의 기능을 제공하는 앱을 만들 수 있습니다.
← Go home