cra(create-react-app)+pwa(progressive web app) 만들기

사용자 편의성을 고려해 react로 개발하던중 캐싱, 설치, 푸쉬알림이 가능한 구글의 pwa에 대해 알게되었습니다. 만들고 있는 웹 서비스에 적용하고 싶었고, 아래는 제가 적용한 방법입니다. react에 pwa를 부착하고 싶으신 분들은 한번쯤 읽어보세요.

 

1. create-react-app ‘파일명’을 이용해 cra를 설치합니다.

 

2. 생성된 public폴더안에 worker.js 파일을 생성해주고 아래 코드를 넣어주세요.

var CACHE_NAME = 'pwa-task-manager';
var urlsToCache = [
  '/',
  '/completed'
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update a service worker
self.addEventListener('activate', event => {
  var cacheWhitelist = ['pwa-task-manager'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

 

3. pubilc/index.html에 아래 코드를 추가해주세요.

 <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('worker.js').then(function(registration) {
            console.log('Worker registration successful', registration.scope);
          }, function(err) {
            console.log('Worker registration failed', err);
          }).catch(function(err) {
            console.log(err);
          });
        });
      } else {
        console.log('Service Worker is not supported by browser.');
      }
    </script>

 

4. src/index.js에 serviceWorker를 unregister -> register로 변경해주세요.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.register();

 

5. 구글 개발자 도구를 키고, audit탭에서 Progressive web App을 클릭하고 generate report를 누릅니다.

 

6. 짠하고 pwa가 구축이 됬다는 페이지가 나옵니다(https는 보안을 다루기에 추후에 다룰 예정입니다.)

주소창 옆에 +버튼을 눌러 설치를 해보시거나, 인터넷을 꺼도 인터넷이 연결되지 않았다는 문구가 뜨지 않으니 놀랍네요ㅎㅎ. 캐싱, https, 푸쉬알림은 다음 포스팅에서 다루겠습니다.