由于工作需要，我需要跨平台和离线缓存功能，因此深入研究了之前关注的 pwa 技术。恰逢微软、英特尔与谷歌共同举办的“第二届中国 pwa 开发者日”，我有幸参加了这次盛会，期间我们看到了许多新的工具和技术。
Progressive Web Application，即“渐进式网页应用”，理论上可以通过 Web 实现 APP 提供的所有服务。对于我来说，更直观的感受是，以前需要转换文件格式（如字体、图片、电子书等）时，必须下载各种转换软件，而现在只需打开一个转换网站即可。Web 确实非常方便，相信每个人的 Web 收藏夹里都有成百上千的书签，每个网站就是一个服务。然而，相较于桌面 APP，普通网站缺乏独立入口和离线使用能力，PWA 技术的出现恰好填补了这一差距，甚至在某些方面超过了 APP，因为 Web 可以非常方便地进行更新。
众所周知，Web 技术发展迅速，已能调用和控制多种硬件设备。记得以前某些操作不支持时，我们通过 CefSharp 或 Electron 来实现，而现在的 Web 已不再是 IE6 的时代。当前的 Web 不仅可以控制 USB、蓝牙，还可以调用显卡资源，实现 VR 和 XR。
我们首先使用
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)),
},
},
});我们在这里添加了两个任务链接
shortcuts，在 Windows 平台的显示形式如下（安卓测试未显示）：
更多
manifest配置，请查看 https://www.php.cn/link/6ba927e95e97f5564105147a9d188931
打包并测试：
npm run build npx http-server dist
通过打包和启动 http-server 服务器，我们可以在本地访问我们的 PWA 服务。
使用浏览器的开发者工具，我们可以发现，Service Workers 列表中已经成功注册了一个。首次访问后，再次访问的可离线资源也由 Service Worker 来响应。我们这里使用的是插件自动处理的方式，没有编写自定义的
sw.js文件。如果有需求，也可以按照官方文档的说明自行编写并注册。
DM建站系统汽车保养维修HTML5网站模板,DM企业建站系统。是由php+mysql开发的一套专门用于中小企业网站建设的开源cms。DM系统的理念就是组装，把模板和区块组装起来，产生不同的网站效果。可以用来快速建设一个响应式的企业网站( PC，手机，微信都可以访问)。后台操作简单，维护方便。DM企业建站系统安装步骤：第一步，先用phpmyadmin导入sql文件。 第二步：把文件放到你的本地服务器
下图是缓存存储的情况：
在关闭 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.php.cn/link/e9527aec68523b8ceb74e12b8685b96a 的在线工具。
