[PWA] Vue에 PWA 적용하기

PWA란?

• PWA는 Progressive Web Apps의 약자입니다.
• Web App을 만드는 접근방식 중 하나입니다.

PWA를 왜 적용해야하나요?

• 캐싱을 활용하여 오프라인에서도 작동합니다.
• 설치를 할 수 있어 앱처럼 접근할 수 있습니다.

PWA 적용하기

최종 디렉토리 구조

이미 있는 Project에 PWA 추가

• vue가 존재하는 Root Directory로 이동합니다.

vue add @vue/pwa

registerServiceWorker.js

• 캐시를 저장 할 수 있는 공간입니다.
• Cookie의 Proxy 역할을 합니다.
  • Client -> ServiceWorker -> Server로 요청합니다.
  • 캐싱되어 있다면 오프라인에서도 정작 파일을 받을 수 있습니다.
• 보안이 중요하기 때문에 https로 설정된 호스트나 localhost에서만 작동합니다.

if (process.env.node == '나중에 요청될 디렉토리 파일 이름') {
  // front server로 실행 할 경우 development
  // back server와 같이 실행 할 경우 production
}

// main.js에 자동으로 추가됩니다. 사용하니 제거하지 않습니다.
import './registerServiceWorker'

sw.js 파일 생성하기

• install 등 service-worker가 수행할 기능을 정의하는 파일입니다.
  • 주의) service-worker.js라는 이름으로 파일명을 설정할 경우 build할 때 생성되는 service-worker.js와 파일이 겹쳐 작동을 제대로 하지 않습니다.
• public 폴더에 생성합니다.

const CACHE_NAME = 'version-1';

// cache 목록 (자신이 캐싱할 목록을 설정합니다.)
const urlsToCache = [
  'index.html',
  'favicon.ico',
];

// cache 목록 등록 및 install 시 cache 목록이 다운
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});


// keep fetching the requests from the user
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) return response;
        return fetch(event.request);
      })
  );
});

self.addEventListener('activate', function(event) {
  const cacheWhitelist = []; // add cache names which you do not want to delete
  cacheWhitelist.push(CACHE_NAME);
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

service-worker 등록

• public에 존재하는 index.html에 아래의 script를 추가합니다.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('sw.js').then(function (registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function (err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

manifest.json 등록

• 기본적으로 manifest.json이 등록되어 있습니다.
• custom으로 등록하는 방법
  • public 폴더에 manifest.json 생성
  • manifest.json에 올바른 값을 입력
  • index.html 파일에 링크를 추가

// manifest.json
{
  "short_name": "app name",
  "name": "splash screen name",
  "icons": [
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#3367D6",
  "display": "standalone",
  "theme_color": "#3367D6",
  "scope": "/"
}

shor_name: 다운 된 앱 이름
name: splash에 나타나는 이름
icons: 아이콘
start_url: 맨 처음 접속 시 어디로 이동할지
background_color: 배경색
display: 기본 화면 (가로, 세로)
teheme_color: 테마 색
scope: 영역

<!-- index.html에 추가 -->
<link rel="manifest" href="<%= BASE_URL %>manifest.json">

• 아래와 같이 작성해도 됩니다.

<!-- index.html에 추가 -->
<link rel="manifest" href="manifest.json">