---
# 8.0 做成APP+PWA+GA
---
# 8.0 做成APP+PWA+GA

## google analytic
1.

2.建立資源

3.填到出現ID

[搭配這插件vite-plugin-radar，上剛取得的ID即可使用](https://www.npmjs.com/package/vite-plugin-radar)
npm i vite-plugin-radar

---
## 圖案處理

1. npm i -D vite-plugin-pwa
2. 下載512px的Logo 推薦下方網站
https://www.flaticon.com/free-icon/
https://realfavicongenerator.net/

3. [用這插件輸出圖](https://www.npmjs.com/package/vue-pwa-asset-generator)
npx vue-pwa-asset-generator -a ./public/512pximg.png -o ./public/img/icons(用npx 是指跑一次)


4.更新index.html (全為了IOS)

       <meta charset="UTF-8" />
    <!-- 多三種 系統能自己決定要哪個 -->
    <link rel="icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#42b883">
    <meta name="msapplication-TileColor" content="#42b883">
    <title>firstapp</title>
     <meta name="apple-mobile-web-app-status-bar-style" content="#42b883">
     <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/img/icons/apple-touch-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="76x76" href="/img/icons/apple-touch-icon-76x76.png">
     <link rel="apple-touch-icon" sizes="120x120" href="/img/icons/apple-touch-icon-120x120.png">
     <link rel="apple-touch-icon" sizes="152x152" href="/img/icons/apple-touch-icon-152x152.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon-180x180.png">

5. 在 vite.config.js 加入 PWA 設定

import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
  plugins: [
    VitePWA({
      // https://web.dev/add-manifest/
      manifest: {
        // APP 名稱
        name: 'Name of your app',
        short_name: 'Short name of your app',
        // APP 說明
        description: 'Description of your app',
        // APP 主題顏色
        theme_color: '#ffffff',
         // APP 顯示範圍
        scope: './',
        // APP 開始畫面網址
        start_url: './',
        // 顯示模式
        // browser: 瀏覽器
        // fullscreen: 全螢幕，隱藏所有瀏覽器 UI
        // standalone: 隱藏標準瀏覽器 UI ，如 URL 欄
        // minimal-ui: 有最小導覽列 UI
        display: 'standalone',
        // icon 路徑，./ 代表 public
        icons: [
          {
            src: 'android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

記得把標題編輯好

6. 在 main.js 註冊 service worker
// 觸發自動更新

import { registerSW } from 'virtual:pwa-register'
registerSW({
  onNeedRefresh () {},
  onOfflineReady () {}
})()

--
## 測社群分享

https://chrome.google.com/webstore/detail/social-share-preview/ggnikicjfklimmffbkhknndafpdlabib

1. [協助生成meta 語法給html並貼上](https://metatags.io/)

2. 名稱 說明對應一樣

3. 照下方網址改後面就能抓到圖
https://raw.githubusercontent.com/applefi87/pomodoro/master/tomato.png

https://developers.facebook.com/tools/debug/?locale=zh_TW
https://cards-dev.twitter.com/validator