本文將介紹使用 VUE3 框架創建 PWA 應用的過程。相關代碼 https://github.com/sangyuxiaowu/pwalearn

背景

因為工作上的需要，剛好有跨端和離線緩存的需求，就開始深入研究很早之前就關注的 PWA 技術。也剛好趕上微軟、英特爾與谷歌攜手舉辦的“第二屆中國 PWA 開發者日”。有幸可以參加這次盛會，在會上，我們看到了很多新的工具和技術。

Progressive Web Application，全稱“漸進式網頁應用”。理論上來說 APP 可以提供的服務，我們通過 Web 也應該是可以獲取，對我來說更直觀的感受是以前我們需要轉換文件格式（字體，圖片，電子書等）需要下載各種的格式轉換軟件，現在只需要打開一個轉換網站。Web 可以說很方便了，相信每個人的 Web 收藏夾里肯定會有成百上千的書簽，一個網站就是一個服務。但是相對于桌面的 APP 來說，普通的網站沒有獨立的入口和離線使用的能力，PWA 技術的出現剛好彌補了這些差距，甚至在某些方面做到了比 APP 更好，畢竟 Web 可以很方便的更新。

眾所周知，人間一天，前端一年。Web 早已實現對諸多硬件設備的調用和控制，還記得之前某些操作不支持的時候，我們是通過 CefSharp 或是 Electron 來實現，如今的 Web，已不是當年 IE6 的時代。當前的 Web 不僅可以控制 USB，藍牙，還可以調用顯卡資源，實現 VR 和 XR。

• 如果想體驗一下 PWA，可以訪問 Drawio 繪圖應用： https://app.diagrams.net/
• 如果想回顧“第二屆中國 PWA 開發者日”，可訪問： https://live.csdn.net/room/MicrosoftReactor/VG6bKaiW
• 了解更多 Web 能力可前往：https://developer.mozilla.org/zh-CN/docs/Web/API

創建 VUE 項目

我們先使用 npm init vue@latest 創建一個 VUE 的項目，可以按照自己的喜好選擇初始的配置。這里使用的工具目前是 Vite ，Vite 號稱是下一代的前端工具鏈，說不定之后又出來了新的。

這里的插件我啟用了 TypeScript、JSX、Vue Router、Pinna、ESLint、Prettier。

接下來就很熟悉了，進入目錄安裝依賴。

cd pwaone npm i

安裝 PWA 支持

本來要用 vue add PWA 但是我們使用的是 Vite 工具，直接使用其 PWA 插件就可以了。

npm i vite-plugin-pwa -D

編輯 vite.config.js 配置 vite-plugin-pwa，整體文件修改后如下，如果你沒有啟用 Jsx 可以去掉相關配置信息。

import { fileURLToPath, URL } from "node:url";import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import vueJsx from "@vitejs/plugin-vue-jsx"; import { VitePWA } from "vite-plugin-pwa";// https://vitejs.dev/config/ export default defineConfig({plugins: [vue(),vueJsx(),VitePWA({manifest: {name: "PWA 學習",description: "我的第一個 PWA 項目",theme_color: "#00bd7e",icons: [{src: "/App_icon192.png",sizes: "192x192",type: "image/png",},{src: "/App_icon512.png",sizes: "512x512",type: "image/png",},{src: "/App_icon60.png",sizes: "60x60",type: "image/png",},],},shortcuts: [{name: "Open About",short_name: "About",description: "Open the about page",url: "/about",icons: [{ src: "/App_icon192.png", sizes: "192x192" }],},{name: "Report issue",short_name: "Report",description: "Open the issue report page",url: "/report",icons: [{ src: "/App_icon192.png", sizes: "192x192" }],},],},registerType: "autoUpdate",devOptions: {enabled: true,},workbox: {globPatterns: ["**/*.{js,css,html,ico,png,svg}"],},}),],resolve: {alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),},}, });

App_icon192.png 這些文件可以自己放不同大小的圖片 Logo ，會不同的平臺使用，圖片我們放在項目中中的 public 目錄。

這里我們加入了 2 個任務鏈接 shortcuts，具體在 Windows 平臺的顯示形式如下（安卓測試沒有顯示）：

更多的 manifest 配置，可以查看 https://developer.mozilla.org/zh-CN/docs/Web/Manifest

打包測試

npm run build npx http-server dist

通過打包和啟動 http-server 服務器我們就可以在本地訪問我們的 PWA 服務了。

通過瀏覽器的開發者工具，我們可以發現，在 Service Workers 列表中，已經有一個成功注冊了。首次訪問后，再次訪問的可離線的資源也變成由 Service Worker 來響應。我們這里是使用的是插件自行處理的方式，沒有寫自定義的 sw.js 如果有需求也是可以按照官方文檔的說明自己寫，然后自行注冊的。

下圖是緩存存儲的情況

在關閉 http-server 的情況下，我們依然可以訪問這個站點，直到我們清除網站數據。

安裝與卸載

在電腦端的 Edge 和 Chrome 其安裝提示都是在地址欄右邊顯示一個小按鈕，在首次打開網站時會多顯示幾秒幾個諸如 “安裝” 的提示文字。下圖是在 Edge 點擊安裝按鈕后的效果。

安卓系統因使用瀏覽器的差異，表現也不盡相同，下圖使用的是 MIUI 自帶的系統瀏覽器（暗黑模式）。

電腦在安裝后可以直接操作系統的軟件管理列表中看到它，可查看詳情如下：

通過注冊表的搜索（大致在 HKEY_CURRENT_USER\SOFTWARE\Classes\Local Settings\Software\Microsoft\Windows\CurrentVersion\AppModel\Repository\Packages\127.0.0.1-FB67779C_1.0.0.0_neutral__70zmge9146cb2 ），我們可以找到類似如下的軟件注冊信息：

根據注冊表信息，打開軟件安裝目錄，我們可以看到如下的目錄結構：

也就是說 PWA 的 Windows 安裝被打包為了 Windows Store App，除了可以通過瀏覽器來管理外，我們也可以把它作為普通的軟件一樣在系統的應用管理里進行操作。

其他相關

經過幾番摸索和嘗試也發現了一些實際使用中的情況，或許隨著時間的推移或因個體差異會有些出入，還請指正，這里就分享出來大家可以做個參考。

在微信中打開 PWA 也是可以緩存的，可以離線使用，但是大概40分鐘左右就沒有了。

觸發瀏覽器的安裝的提醒需要你使用本地 localhost 或 127.0.0.1 來測試，或者直接 https 部署，這點和 web 調用硬件 API 的要求差不多。

安卓的話，安裝的觸發還是建議使用系統自帶的瀏覽器打開，手機若使用 edge 或者 chrome，需要授權給應用創建桌面快捷方式的權限。

如果你有多個項目開發測試，建議你 PWA 測試緩存完畢卸載或是清除緩存，不然某一天你調試新項目會奇怪這個網頁到底怎么冒出來的。

PWA 應用也可以打包為 APP 上架 Store，你可以前往嘗試 https://www.pwabuilder.com/ 的在線工具

總結

以上是生活随笔為你收集整理的使用 vue 创建你的第一个 PWA 应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。