1. PWA란?

PWA(Progressive Web Apps)는 Google Chrome 엔지니어 Alex Russell씨가 2015년에 고안한 개념으로 알려져 있습니다. 특징으로서 네이티브 앱과 같은 유저 체험을 WEB로 제공하는 것이 목적입니다.

PWA의 특징

FAST : 성능이 좋고 가벼운 동작

Integrated : OS와 통합된 사용자 경험

Engaging : 앱과 같은 경험 제공

Reliable : 오프라인에서도 작동하는 편리성

PWA를 실현하는 API

PWA를 실현하기 위해 중심이 되는 기능을 제공하는 것이 「Service Worker」입니다.

Service Worker

Service Worker는 "백그라운드에서 실행되는 프로그래밍 가능한 네트워크 프록시"입니다. Service Worker를 이용하면 웹 페이지의 오프라인 대응을 비롯해 캐시, 백그라운드 동기화, Push 알림 기능을 제공합니다. 다만 조건으로서 localhost 접속 이외는 HTTPS의 사용이 필수가 되고 있습니다.

캐시

Service Worker는 웹 페이지에서 요청 리소스가 캐시에 있으면 캐시된 리소스를 반환합니다. 그 때 통신하지 않기 때문에 고속으로 동작하고 통신 비용이 발생하지 않습니다.

백그라운드 동기화

오프라인 상태에서 사용자가 수행한 동작을 캐시하고 온라인에서 콘텐츠를 동기화할 수 있습니다. 예를 들어 채팅 서비스를 사용하고 있어 전파가 나빠지는 경우가 있습니다만, 오프라인에서도 메시지를 송신해 두면 전파 환경이 좋아져 온라인이 된 타이밍으로 동기할 수 있습니다.

푸시 알림

Service Worker는 웹 앱에서도 푸시 알림을 보낼 수 있습니다. 웹 페이지가 활성 상태가 아니더라도 서버에서 푸시를 받고 사용자에게 알림을 보낼 수 있습니다.

2. PWA와 Vue.js의 환경 구축

vue-pwa-boilerplate

vue-pwa-boilerplate 를 사용해 환경 구축해 갑니다.
vue-pwa-boilerplate는 Vue.js에서 PWA로 개발하기위한 편지지이며 필요한 환경을 갖추고 있습니다.
vue-pwa-boileraplate을 사용하려면 "vue-cli"가 필요하므로 설치합시다.

$ npm install -g vue-cli
$ vue init pwa my-project
$ cd my-project
$ npm install
$ npm run dev

실행하면 브라우저가 자동으로 시작되고 http://localhost:8080/를 호출합니다. 처음은 이런 화면입니다.



PWA화하기 위해서는 빌드가 필요합니다. npm으로 빌드합니다.

npm run build

빌드하면 dist/ 디렉토리가 생성됩니다.
이제 Service Worker가 등록된 상태로 빌드됩니다.

Service Worker의 동작을 확인하기 위해 Web Server for Chrome을 도입합니다.dist 디렉터리에 빌드된 여러 파일이 나오므로 경로를 지정하여 엽니다.

Workbox 플러그인

Workbox 은 PWA화에 필요한 Service Worker를 좋은 느낌으로 해주는 플러그인입니다. 페이지 및 파일과 같은 캐시의 생존 기간을 지정할 수 있습니다.

Workbox를 설치합니다.

npm install workbox-webpack-plugin --save-dev

webpack의 플러그인이므로 설정 파일을 변경합니다.

webpack.prod.conf.js

// const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const workboxPlugin = require('workbox-webpack-plugin') // 追加


// 省略


// 削除
// new SWPrecacheWebpackPlugin({
//   cacheId: 'my-pwa',
//   filename: 'service-worker.js',
//   staticFileGlobs: ['dist/**/*.{js,html,css}'],
//   minify: true,
//   stripPrefix: 'dist/'
// })

// 追加
 new WorkboxPlugin.GenerateSW({
   cacheId: 'easy-wallet',
   globDirectory: config.build.assetsRoot,
   globPatterns: ['**/*.{html,js,css,png}'],
   swDest: path.join(config.build.assetsRoot, 'service-worker.js'),
   skipWaiting: true,
   clientsClaim: true,
   runtimeCaching: []
 })

파라미터의 개요는 이하와 같다.

· skipWaiting
Service Worker가 기다리는 lifecycle stage를 건너 뛰는지 여부

· clientsClaim
ServiceWorker가 활성 상태가 되었을 때 즉시 클라이언트 제어를 시작하려면 true

· runtimeCaching
캐시 전략, 대상 파일의 캐시 설정하려면 추가

다시 npm run build 빌드합니다. Service Worker의 캐시가 남아 있으므로 한 번 지우고 다시 읽습니다.

이상입니다.