[react + pwa + webpack] PWA 적용하기

killi8n·2019년 12월 23일
0

react + pwa + webpack

목록 보기
3/3

PWA 적용하기

1. 노드 모듈 인스톨

pwa에 관련한 웹팩 모듈을 인스톨 해준다.

yarn add -D 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"
}

3. webpack 설정 추가

webpack.config.js

...
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 InjectManifest({
    swSrc: './src/sw.js',
    swDest: 'sw.js',
})
...

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

src/sw.js

workbox.core.skipWaiting()
workbox.core.clientsClaim()

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)

manifest 와 service worker 설정까지 추가하였다.

4. serviceWorker 작동 시키기.

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)
            })
    })
}

개발자 도구를 켜고 Application 탭을 클릭한 후, Sercice Workers 탭을 클릭 하면 서비스 워커가 잘 붙은것을 볼수 있다.
또한 offline 으로 설정 한뒤 새로고침을 해도 새로고침 후 오프라인에서도 앱이 동작하는 것을 볼수 있다.
runTimeCaching 옵션에서 jsonplaceholder URL을 등록하였기 때문이다.

마지막으로 푸쉬 노티피케이션까지도 구현되었다. 테스트는 Application 탭의 Service Workers 아래에 push 버튼을 눌러보면 할수있다.

profile
killi8n

2개의 댓글

comment-user-thumbnail
2019년 12월 24일

구글 라이트하우스를 통해 PWA가 더 필요한 곳을 찾을 수 있습니다.!

1개의 답글