2024-08-09

Vue

Vite Pwa 漸進式網路應用程式安裝與設定

Vite Pwa漸進式網路應用程式安裝與設定

Vite 的Pwa功能是在web情況下，開發web就能製作成App的效果，不需要上架app store / google play 也不需要使用安裝 exe檔案，只需要連結就能增加的手機畫面，
Vite PWA
Vite 和生態系統的 PWA 整合零配置和與框架無關的 Vite PWA 插件
做好了網站以後，執行以下指令：

1	npm i -D vite-plugin-pwa

vite.config.js增加

引入vite-plugin-pwa解構VitePWA
plugins內新增VitePWA({ ... })

import { VitePWA } from "vite-plugin-pwa"
export default defineConfig({
  plugins: [
    VitePWA({ registerType: 'autoUpdate' })
    <!-- VitePWA({
       srcDir: "/",
      filename: "vite_pwa.js",
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
        type: 'module',
      },
      strategies: "injectManifest",
      injectRegister: false,
      manifest: false,
      injectManifest: {
        injectionPoint: undefined,
      },
    }), -->
  ],
  server: {
    hmr: {
      overlay: false
    }
  },
})

產生 PWA 資產產生和圖像

PWA 資產產生器

安裝PWA 資產產生和圖像

1	npm install --global vue-pwa-asset-generator

執行指令
剛剛製作的icon路徑產生到public/img/icons檔案夾內

1
2
3

//剛剛製作的icon路徑 =>(產生) ＝> icons
npx vue-pwa-asset-generator -a ./public/logo.png -o ./public/img/icons

終端機回應:產生資料到/public/

產生的檔案內會有一個manifest.json檔

index.html載入manifest.json

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lara Huang 出勤系統</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
    <!--manifest.json 注意路徑--->
    <link rel="manifest" href="/img/icons/manifest.json">
    <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

產生Bug
主要原因是位址路徑錯誤

manifest.json
注意：icons/src路徑必須正確

{
  "name": "Lara Huang",
  "short_name": "Lara Huang",
  "description":"描述",
   "start_url":"/",
  "icons": [
    {
      "src": "./android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./apple-touch-icon-60x60.png",
      "sizes": "60x60",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-76x76.png",
      "sizes": "76x76",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-120x120.png",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "./favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "./favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "./msapplication-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

vite_pwa.js 這個檔案夾不一定要使用

self.addEventListener("notificationclick", function (event) {
  console.log("開啟通知");
});

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

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

打包

1	npm run build

重新運行測試

1	npm run dev

畫面出現標示安裝

Vite Pwa漸進式網路應用程式 安裝與設定

Vite Pwa漸進式網路應用程式安裝與設定