vue3 vite pwa 적용방법

vite.config.ts

plugins: 에 아래 내용 추가

VitePWA({
      srcDir: "/",
      filename: "sw.js",
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
        type: 'module',
      },
    });

동일한 경로에 sw.js 파일 생성 및 아래내용 추가

self.addEventListener("notificationclick", function (event) {
  console.log("notificación abierta");
});

self.addEventListener("notificationclick", function (event) {
  const channel = new BroadcastChannel("sw-mensajes");
  if (event.action == "aceptar") {
    channel.postMessage({ title: "aceptar" });
  }

  if (event.action == "rechazar") {
    channel.postMessage({ title: "rechazar" });
  }
});

index.html 에 아래 내용 추가

 <title><%= title %></title>
  <link rel="icon" href="/favicon.ico"/>
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

public 폴더에 site.webmanifesft 파일 생성 및 아래내용 추가

{
    "name": "어플리케이션",
    "short_name": "어플",
    "start_url":"/",
    "icons": [
        {
            "src": "/favicon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/favicon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

크롬에서 설치형 마크 뜨는지 확인