快速了解Vite PWA

前情提要

通常開發一個專案，都是依據開發需求來決定所運用的技術，而從零到有生成一個APP也是一樣，還需要針對不同的作業系統做開發上的調整，而後續維護也是一個問題，因此有些公司會選擇使用PWA(Progressive Web Application)來做替代方式，雖然他功能受到限制，但對於不想花太多時間開發的人會是個好選擇。 而在玩Vite的過程中發現到Vite PWA這個插件的便利性，今天讓我們來花一點時間玩看看吧。

Vite PWA

• 如果是從新的專案開始的人，可以直接create一個包含PWA範例的專案來實作。

  $ npm create @vite-pwa/pwa@latest my-vue-app -- --template vue
  

• 而我是從舊有專案來實作，那就直接安裝vite-plugin-pwa

  $ npm install -D vite-plugin-pwa
  

配置vite config

1. 首先要去撰寫PWA的基本資訊，而現在有很多輔助的網站可以幫忙生成manifest文件，這邊推薦一個網站來添加Favicon
2. 由於使用Vite PWA的關係，原先要寫在manifest.json的內容就可以在這邊統一去管理，而用來調度取得資料來源的Service Worker，它直接使用chrome的workbox做使用，而關於快取策略可以決定資料來源的優先級，幫助你在不同的情境作出相對的設定。

   import { VitePWA } from 'vite-plugin-pwa'
   export default defineConfig({
     plugins: [
       VitePWA({
      registerType: 'autoUpdate',
      /// 讓dev環境可以測試SW功能
      devOptions: {
        enabled: true,
        type: 'module',
        navigateFallback: 'index.html',
        suppressWarnings: true
      },
      manifest: {
        name: 'todoListEX',
        short_name: 'todoListEX',
        theme_color: '#070809',
        background_color: '#070809',
        display: 'standalone',
        scope: '/',
        start_url: '/',
        icons: [
          {
            purpose: 'maskable',
            src: '/src/assets/icons/"icon512_maskable.png',
            sizes: '512x512',
            type: 'image/png'
          },
          {
            purpose: 'any',
            src: '/src/assets/icons/icon512_rounded.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /someInterface/i, // 接口緩存
            handler: 'CacheFirst',
            options: {
              cacheName: 'interface-cache'
            }
          },
          {
            urlPattern: /(.*?)\.(js|css|ts)/, // 靜態資源緩存
            handler: 'CacheFirst',
            options: {
              cacheName: 'js-css-cache'
            }
          },
          {
            urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 圖片緩存
            handler: 'CacheFirst',
            options: {
              cacheName: 'image-cache'
            }
          }
        ]
      }
    })
     ],
   })
   

搜尋引擎

這邊有個小地方要注意，在public資料夾去新增robot.txt的文件來允許引擎抓取你的應用程式，新增內容如下。

User-agent: *
Allow: /

測試

• 上面都配置完後，在dev環境運行會看到原本多了一個可以下載的Icon。

• 下載後就可以看到類似Agent應用程式的效果了。

結語

透過上述的流程，不用花多久，簡單的PWA就設定完成，而比較詳細的內容可以翻一下官方的文件Vite PWA，裡面有其他更詳細的運用。