什么是PWA
PWA 即渐进式 Web 应用程序（Progressive Web App），是一种利用多种现代 Web 技术构建的，能够提供类似原生应用体验的 Web 应用。以下是关于 PWA 的详细介绍：
特点
-
渐进式增强：PWA 采用渐进式增强的策略，这意味着它可以在各种不同性能和功能的设备与浏览器上运行，从最简单的功能手机浏览器到最先进的桌面浏览器，都能为用户提供基本可用的体验，并在支持更多特性的环境中展现出更强大的功能。
-
类似原生应用的体验 ：
- 安装便捷性：用户可以像安装原生应用一样，将 PWA 添加到设备的主屏幕上，通过点击图标直接启动，无需在浏览器中输入网址来访问。
- 界面与交互：具备与原生应用相似的界面和交互方式，响应式设计让它能适应各种屏幕尺寸，提供流畅的操作体验，如触摸手势、动画效果等。
- 离线访问：借助 Service Worker 技术，PWA 能够在离线状态下运行，即使没有网络连接，用户仍然可以使用之前缓存的页面和功能，例如下载好的文章、图片等内容依然可以查看。
- 推送通知：支持向用户推送通知，就像原生应用一样，可以及时提醒用户有新的消息、内容更新或其他相关事件，增加用户的参与度和留存率。
-
跨平台兼容性：基于 Web 技术构建，使用 HTML、CSS 和 JavaScript 等通用的 Web 开发语言，因此可以在多种操作系统和设备上运行，如安卓、iOS、Windows 等，大大降低了开发成本和维护难度，开发人员无需为不同平台开发多个版本的应用。
-
安全性：要求必须使用 HTTPS 协议进行数据传输，确保数据的安全性和完整性，防止数据在传输过程中被窃取或篡改。
指南前提
1. 我的网页应用不需要访问网络服务
2. uniapp 已经打包好网页应用 部署文件，这是我的部署文件目录
目标
将网页应用一键安装到手机桌面及电脑桌面，即便处于无网络状态，应用也能运行
1. 创建manifest.json文件
{
// PWA 的名称，它将显示在设备的主屏幕、应用启动器等位置。
"name": "出口计算",
// PWA 的简短名称，当空间有限时，如在设备主屏幕上图标下方显示的名称，会优先使用短名称
"short_name": "出口计算",
// PWA 在不同设备和场景下使用的图标。可以指定多种尺寸的图标，以适应各种屏幕分辨率和设备类型
"icons": [
{
"src": "static/logo.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "static/logo.png",
"sizes": "512x512",
"type": "image/png"
}
],
// 通常是应用的首页或主要入口点指定 PWA 启动时加载的 URL。通常是应用的首页或主要入口点
"start_url": "/index.html",
// 有多种模式可供选择，如`fullscreen`（全屏显示）、`standalone`（类似原生应用）、`minimal-ui`（简约模式）
"display": "standalone",
// 启动时的背景颜色，在应用启动瞬间或加载过程中显示。
"background_color": "#ffffff",
// 定义 PWA 的主题颜色，它将影响浏览器的地址栏、任务栏等界面元素的颜色。
"theme_color": "#000000"
}
manifest.json文件放到根目录下
2. 创建service-worker.js文件
// 表示缓存的名称。在 Service Worker 的生命周期中，缓存名称用于标识不同版本的缓存，以便在更新缓存策略时能够区分新旧缓存。
const CACHE_NAME = 'my-site-cache-v1';
// 该数组包含了一系列需要被缓存的文件路径, 就是没有网络时能够加载的文件，从而实现离线加载的效果
// 这个是 重点 重点 重点
const urlsToCache = [
'/',
'/index.html',
'static/economy.png',
'static/economy1.png',
'static/first.png',
'static/first1.png',
'static/logo.jpg',
'static/logo.png',
'static/index.2da1efab.css',
'static/js/chunk-vendors.33095592.js',
'static/js/index.d9e92b04.js',
'static/js/pages-index-index.db2941e1.js',
'static/js/pages-index-index~pages-second-index.d7e90aff.js',
'static/js/pages-second-index.00c859f3.js',
];
// Service Worker 安装时，将指定的文件列表缓存起来，以便在后续的网络请求中使用
self.addEventListener('install', function (event) {
// 安装Service Worker时，缓存文件
event.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll(urlsToCache);
})
);
});
// Service Worker 接收到网络请求时，尝试从缓存中获取资源，如果缓存中没有，则向服务器发起请求，
self.addEventListener('fetch', function (event) {
// 拦截网络请求，尝试从缓存中获取资源
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
service-worker文件放到根目录下
3. 修改index.html文件
3.1 引入manifest.json文件
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<title>expressDelivery</title>
<script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script>
<!-- 引入manifest.json语句 -->
<link rel="manifest" href="manifest.json">
<link rel=stylesheet href=/static/index.2da1efab.css>
</head>
3.2 注册service-worker.js文件
<body><noscript><strong>Please enable JavaScript to continue.</strong></noscript>
<div id=app></div>
<script src=/static/js/chunk-vendors.33095592.js></script>
<script src=/static/js/index.d9e92b04.js></script>
// 注册Service Worker
<script defer>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(function (registration) {
console.log('Service Worker注册成功');
})
.catch(function (error) {
console.log('Service Worker注册失败：', error);
});
}
</script>
</body>
