PWA项目示例
准备物料：
- OpenSSL安装包下载；主要介绍Windows 安装openSSL，来实现本地HTTPS服务器。
Mac 和 Linux 实现方式可以参考 openSSL、mkcert。
-
环境要求：
node: v20.5.1
vite: ^4.4.9 -
npm install vite-plugin-pwa -D命令安装vite-plugin-pwa插件时，-D参数的作用是--save-dev。vite-plugin-pwa是一个用于 Vite 项目的插件，用于添加渐进式网络应用程序（Progressive Web App，PWA）的支持。它提供了一组功能，用于生成 PWA 所需的 Web App Manifest 文件、Service Worker 和缓存策略。
-
配置示例：
样板示例注释配置详解：
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
/**
* VitePWA 插件配置
*/
VitePWA({
manifest: {
name: 'My PWA', // 应用程序名称
short_name: 'My App', // 应用程序简称
description: 'My Progressive Web App', // 应用程序描述
theme_color: '#ffffff', // 主题颜色
icons: [
// 应用程序图标配置
{
src: '/icons/icon-192x192.png', // 图标路径
sizes: '192x192', // 图标尺寸
type: 'image/png', // 图标类型
},
{
src: '/icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
shortcuts: [
// 快捷方式配置
{
name: '快捷方式名称',
short_name: '快捷方式简称',
description: '快捷方式描述',
url: '/about', // 快捷方式链接地址
icons: [{ src: '/icons/about-icon.png', sizes: '192x192' }], // 快捷方式图标配置
},
{
name: 'Report issue',
short_name: 'Report',
description: 'Open the issue report page',
url: '/report',
icons: [{ src: '/icons/report-icon.png', sizes: '192x192' }],
},
],
registerType: 'autoUpdate', // 注册类型配置
devOptions: {
enabled: true, // 开发选项配置，启用插件
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'], // Workbox 缓存策略配置
},
}),
],
});
一、示例运行流程
1，创建项目
1， npm init vue@latest
按个人习惯启用 TypeScript、JSX、Vue Router、Pinna、ESLint、Prettier
2，npm i
3, npm i vite-plugin-pwa -D
2，修改配置
修改 vite.config.ts 文件；
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";
export default defineConfig({
plugins: [
vue(),
vueJsx(),
/**
* VitePWA 插件配置
*/
VitePWA({
manifest: {
name: "xuguo PWA示例", // 应用程序名称
description: "xuguo 示例", // 应用程序描述
theme_color: "#00bd7e", // 主题颜色
icons: [
// 应用程序图标配置
{
src: "/12.png", // 图标路径
sizes: "192x192", // 图标尺寸
type: "image/png", // 图标类型
},
{
src: "/12.png",
sizes: "512x512",
type: "image/png",
},
{
src: "/12.png",
sizes: "60x60",
type: "image/png",
},
],
},
shortcuts: [
// 快捷方式配置
{
name: "Open About", // 快捷方式名称
short_name: "About", // 快捷方式简称
description: "Open the about page", // 快捷方式描述
url: "/about", // 快捷方式链接地址
icons: [{ src: "/12.png", sizes: "192x192" }], // 快捷方式图标配置
},
{
name: "Report issue",
short_name: "Report",
description: "Open the issue report page",
url: "/report",
icons: [{ src: "/12.png", sizes: "192x192" }],
},
],
registerType: "autoUpdate", // 注册类型配置
devOptions: {
enabled: true, // 开发选项配置，启用插件
},
workbox: {
globPatterns: ["**/*.{js,css,html,ico,png,svg}"], // Workbox 缓存策略配置
},
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)), // 设置别名
},
},
});
3，配置本地Https
在openSSL安装目录执行命令；否则会报 not found openssl.cnf。
1. 生成私钥文件 (`private-key.pem`)：
./openssl.exe genpkey -algorithm RSA -out private-key.pem
2. 创建证书签名请求文件 (`certificate-signing-request.csr`)：
./openssl.exe req -new -key private-key.pem -out certificate-signing-request.csr
3. 签署证书 (`certificate.crt`)：
./openssl.exe x509 -req -days 365 -in certificate-signing-request.csr -signkey private-key.pem -out certificate.crt
4， 运行项目
1. 打包：
npm run build
2. 运行服务：
npx http-server dist --ssl --cert public/certificate.crt --key public/private-key.pem
npx http-server dist npx 命令不需要安装 http-server 即可执行，把 dist 为服务器访问目录。
5， 访问
