1. vite-plugin-pwa

npm i -D vite-plugin-pwa

1. 아이콘 이미지 생성

PWABuilder

Favicon & App Icon Generator

1. 아이콘으로 사용할 이미지 선정
2. 위 사이트 접속하여 아이콘 생성
	2-1. 왼쪽 사이트는 아이콘 생성 시 옵션으로 배경색 커스텀 가능
			 android, iOS, windows에 대해 모든 사이즈별 아이콘 제공 및 icons.json 제공
	2-2. index.html 에 추가할 코드 제공 및 manifast.json 제공

1. vite.config.js 파일 수정

[Web] 웹개발 환경구축

Vite PWA

// 240312 계속 수정중
// 각 기능이 뭘 의미하는지 다 알진 못함 😭
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { VitePWA } from 'vite-plugin-pwa'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: "autoUpdate",
      devOptions: {
        enabled: true
      },
      manifest: {
        name: '생선가게',
        short_name: '생선가게',
        start_url: '/index.html',
        dislpay: 'standalone',
        icons: [
	        {
		        // src, 이미지 경로
		        // size, 이미지 크기 (48, 72, 96, 128, 144, 152, 192, 384, 512)
		        // type, 이미지 타입
	        }
        ]
        // 아래에 더 작성해야함
      }

    }),
  ],
})

1. PWA Builder Studio 설치

설치 가능한 웹 앱을 구성하기 위한 Manifest 설정하기

✨✨미비한 부분 잘 도와준다고 한다.✨✨

아으~~ 어려웡

GitHub - Team928/BID: 🛍 라이브 스트리밍을 활용한 개인 경매 플랫폼

GitHub - andongmin94/kkakka: SSAFY 2학기 공통 프로젝트 우수상 (24.02.16)

✨manifest 셋팅에 대해…✨

1. manifest.json 파일을 만들어서 /public 에서 관리하기
   1. 이 방법 사용하면 vite.config.js에 따로 코드 작성할 필요 없다
   2. npm i -D vite-plugin-pwa 할 필요 없다
   3. service-worker.js 내가 추가해줘야 한다.
2. vite.config.js ( 혹은 vite.config.ts ) 에서 plugins에 VitePWA 플러그인 추가해서 관리하기
   1. devOptions : { enabled: true } 하면 dev-dist 폴더 생긴다 거기에 service-worker.js 알아서 생긴다
   2. 대신 코드 너무 길다!!!! 못 알아먹겠다. ( 분석하기 힘듦 )

근데 service-worker는 필요하다. ( 백그라운드 알림 때문에 )

웹 알림은 백엔드 딴에서 SSE로 처리가 가능하다고들 한다. ( 잘 모름 )

근데 이건 아마 서비스를 사용중인 경우에 알림을 주는게 아닐까?