- Infra
광화문앞의 Microsoft 건물에서 진행된 PWA 컨퍼런스에 다녀왔습니다.
PWA라는것은 웹앱을 만들기 위한 모든기술들을 도합해서 프로그레시브 웹앱 이라고 부릅니다.
PWA라는것에 대해 정확히 정해진 규칙은 없습니다. PWA를 위해서는 이 기술만을 사용하세요’라는것이 현재 존재하지 않기 때문이죠.
img 태그 대신 picture를 사용할 수 있수 있죠. img태그를 사용한다고해서 PWA가 아닌것도 아니고 사용하지 않는다고해서 PWA인것도 아닙니다.
현재 사용하는 어떠한 웹도 모두 PWA로 전환이 가능합니다. (아주 특별한 페이지를 제외하고는) jQuery이든 React이든..
PWA에서는 offline지원이 가능합니다. 그리고 offline을 지원할거면 반드시 service worker를 사용해야합니다.
push notification을 사용할 때도 service worker를 사용해야 합니다.
service worker 하나 추가하더라도 사용자에게 더 Fast하고 engaging한 사용성을 제공할 수 있습니다.
PWA의 꽃이라 할 수 있는 service worker에는 2가지 설정이 있습니다.
service worker 그리고 web app manifest
PWA는 모바일도 지원합니다. 즉, 웹앱을 PWA로 만들면, 윈도우, 맥, 안드로이드까지 모두 지원 가능하다는 의미입니다. (아쉽게도 ios는 지원하지 않습니다.)
PWA 프로젝트 생성하기
package init
npm initreact, 번들러, 바벨 설치
npm install --save react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loadersrc, public 2개의 폴더를 만들어주고 src안에 기본적인 파일 2개를 만들어줍니다.
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React MEMO App</title>
</head>
<body>
<div id="app" />
</body>
</html>src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div className="app">
Hello World
</div>
);
ReactDOM.render(<App />, document.getElementById("app"));webpack config, babel 설정
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/public'),
filename: 'index.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};.babelrc
{
"presets": [
"@babel/env",
"@babel/react"
]
}프로젝트 실행을 위해 script 명령어를 추가해줍니다.
package.json 명령어 설정
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},여기까지 하면 기본 프로젝트 설정이 끝납니다.
만약 cRA를 사용한다면 이 모든걸 CRA에서 자동으로 대신 해줍니다!! (..!)
이제 PWA를 설정해보겠습니다.
PWA 설치
npm install --save-dev webpack-pwa-manifestwebpack.config.js 추가
const WebpackPwaManifest = require('webpack-pwa-manifest');
...
plugins: [
new WebpackPwaManifest({
name: '리액트 메모',
short_name: '메모',
description: '리액트로 제작한 메모앱입니다.',
background_color: '#ffffff',
crossOrigin: 'use-credentials',
theme_color: '#eeeeee',
icons: [
{
src: path.resolve('src/assets/Icon.png'),
sizes: [96, 128, 192, 256, 384, 512]
}
]
})
]service worker 추가
npm install --save-dev workbox-webpack-pluginwebpack.config.js 추가
const { GenerateSW } = require('workbox-webpack-plugin');
...
plugins: [
new GenerateSW({
include: [/\.html$/, /\.js$/]
})
]src/index.js 추가
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
})
}service-worker.js 파일은 GeneratorSW 가 생성해준다.
여기까지하면 PWA에 대한 모든 설정이 끝났습니다.
웹 프라우저 url 오른쪽에 보면 + 버튼이 생긴것을 확인할 수 있습니다.