PWA(Progressive Web App)

웹사이트를 모바일 앱인 것 처럼 설치해서 사용할 수 있는 사이트

그게 장점이 뭔데요?

service worker 라는 파일과 브라우저의 cache storage 를 사용하여, 인터넷 없는 상황에서도 기본 동작 가능. 물론 서버통신이 안된다면 그 기능들은 동작 안함.

service worker

유저가 우리 사이트에 접속하면 html, css, js, 이미지 파일을 서버에서 받아와야하는데, 이걸 중간에 가로채는 역할을 하는 파일.
유저가 위 파일들 요청 시, 파일들이 브라우저 cache storage에 있으면
서버대신에 그 파일들을 보내주는게 service worker 파일의 주된 역할.
그래서 그 파일이 있으면 사이트가 오프라인에서도 잘 동작하고
캐싱같은 개념이라 더 빠르게 사이트를 로드할 수 있음.

푸시알림도 전송이 가능

PWAbuilder 한번 찾아보자.

만들어보기

manifest.json과 service-worker.js 파일 2개만 있으면 브라우저가 PWA로 인식.
Vite에 PWA 셋팅도와주는 라이브러리가 있음. 그거 쓰면 될듯.
아래 코드 터미널에 입력하여 설치.
혹은 PWA 셋팅 완료된 프로젝트 생성도 가능.

npm install vite-plugin-pwa 
npm create @vite-pwa/pwa@latest //프로젝트 생성 시

셋팅

vite.config.js 파일을 열어서 아래처럼 코드를 복붙

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from "vite-plugin-pwa"

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate', //사이트 자동 업데이트
      devOptions: {
        enabled: true //개발중에도 service worker같은 파일 미리보고 싶을때
      },

      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'] //캐싱할 파일들
      },

      includeAssets: ['apple-touch-icon.png'],
      manifest: { //이걸 바탕으로 자동으로 manifest.json 파일을 생성
        name: '테스트용 리액트앱',
        short_name: 'MyApp',
        description: '설명',
        theme_color: '#000000',
        icons: [
          {
            src: 'logo.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'logo.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
    })
  ],
})

확인

npm run build 입력해서 나온 index.html 파일을 미리보기 띄워보기
1. npm run build 터미널에 입력
2. 빌드 후 나타난 dist 폴더를 에디터로 폴더 오픈
3. 터미널 열고 npx serve . 입력하면 미리보기 띄울 수 있음.
안되면 에디터 extension 메뉴에서 live server 검색해서 설치 후 index.html 우클릭해서 live server로 미리보기

결론

서버에 요청이 많이 필요 없는 어플을 간단하게 사용하게 할때 유용한 듯