不用會寫app也能做出web app：Vue3+PWA

Published in

Wendy Loops

Sep 14, 2023

PWA (Progressive Web Application)簡單來說就是不用進APP開發，只用web開發就可以製作出類似app效果的網站，不需要上架app store/google play，也不需要請使用者安裝exe檔，只需要連結就可以增加的手機主畫面上，使用體驗都像app一樣方便直觀。

安裝

前提是已經做好網站了，現在要來安裝pwa！
Vite PWA：https://vite-pwa-org.netlify.app/

npm i -D vite-plugin-pwa

修改vite.config.js

import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
  plugins: [
    VitePWA({ registerType: 'autoUpdate' })
  ]
})

因為要做成web app，所以我們要為自己做的網站設計一個icon，這樣增加到手機主畫面時才有icon，我是用canvas拉一個512*512的png檔，並且存進public資料夾中。

之後再安裝一個套件，可以直接產生各種大小的icon跟路徑文件

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

安裝完成後，在終端機輸入以下指令：

npx vue-pwa-asset-generator -a ./public/pwa-logo.png -o ./public/img/icons
                               (剛剛製作的icon路徑)       (欲輸出的資料夾路徑)

資料夾內就會自動產生各種大小的icon，也幫你命名好，還有一份很重要的manifest.json檔。

接著到index.html匯入pwa設定：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="#FF6B81">

    <title>今天健什麼</title>
    <meta name="description" content="Your app description">

    <link rel="icon" href="/pwa-logo.png" type="image/svg+xml">
    <link rel="alternate icon" href="/pwa-logo.png" type="image/png" sizes="16x16">
    <link rel="apple-touch-icon" href="/pwa-logo.png" sizes="180x180">
    <link rel="mask-icon" href="/pwa-logo.png">

    // manifest.json要匯入
    <link rel="manifest" href="/public/img/icons/manifest.json">
</head>

Vite PWA｜web app 加入主畫面

Edit description

youtube.com

就可以用手機加入主畫面了！

不過手機體驗上跟桌機不同，尤其是iphone上面那條資訊列顏色可能會跟你的網頁顏色不搭，所以在剛剛index.html中可以在這裡修改顏色：

<meta name="theme-color" content="#FF6B81"> // 修改顏色

使用PWA可以提升使用者體驗，也可以優化SEO，不用做APP也能做出app-like的網頁，讚讚！

我做的健身YT隨選網站：https://lienyun.github.io/workout-app/#/

不用會寫app也能做出web app：Vue3+PWA

安裝

Vite PWA｜web app 加入主畫面

Edit description

Written by Wendy Chang