1、PWA应用介绍
PWA 是一种通过现代 Web 技术提供类似原生应用体验的 Web 应用。它的核心特性包括：
- 可离线访问：通过 Service Worker 实现离线缓存快速加载
- 利用缓存策略加速资源加载可安装
- 用户可以将 PWA 添加到主屏幕，像原生应用一样使用响应式设计
- 适配各种设备屏幕
PWA 的核心技术包括：
- Service Worker：用于拦截网络请求、管理缓存
- Web App Manifest：定义应用的元数据（如名称、图标）
- HTTPS：确保数据传输的安全性
1.1 Service Worker
Service Worker 是一种运行在浏览器后台的脚本，独立于网页主线程，主要用于拦截网络请求、管理缓存、接受推送通知，接入方式如下。
// 监听install事件，缓存关键资源
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll(['/index.html', '/styles.css', '/app.js']);
})
);
});
// 拦截fetch事件，按需返回缓存或请求网络资源
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
if (response) {
return response; // 返回缓存内容
}
return fetch(event.request).then((response) => {
// 将新资源加入缓存
caches.open('v1').then((cache) => {
cache.put(event.request, response.clone());
});
return response;
});
})
);
});
// 接受推送通知
self.addEventListener('push', (event) => {
const options = {
body: event.data.text(),
icon: '/icon.png',
};
event.waitUntil(
self.registration.showNotification('新消息', options)
);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Worker 示例</title>
</head>
<body>
<h1>Service Worker 示例</h1>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
}
</script>
</body>
</html>上面Demo中缓存使用到了Cache接口，它是由 JavaScript API 驱动的高级缓存，主要 API 方法包括：CacheStorage.open、Cache.add、Cache.put、Cache.match、Cache.delete等。
缓存策略主要有以下几种：
a. 仅缓存
b. 仅网络
c. 缓存优先，回退网络
d. 网络优先，回退缓存
e. 后台更新
1.2 Web app manifests
Web App Manifest 是一个 JSON 文件，用于定义 Web 应用的元数据，如：
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}<!-- HTML中按照如下方式引入即可 -->
<link rel="manifest" href="/manifest.json">主要参数及说明：
- name：应用的全名，显示在安装提示和启动画面中。
- short_name：应用的简称，用于主屏幕图标下方。
- start_url：定义应用启动时加载的 URL，通常设置为首页。
- display：定义应用的显示模式,常用值包括：
- standalone：以独立窗口运行，隐藏浏览器
- fullscreen：全屏显示，隐藏所有
- minimal-ui：显示最小化的浏览器
- browser：以普通浏览器标签页运行
- background_color：定义启动画面的背景颜色，提升用户体验。
- theme_color：定义应用的主题颜色，影响浏览器地址栏和工具栏的颜色。
icons：定义应用图标，支持多种尺寸以适应不同设备，每个图标需要指定 src（路径）、sizes（尺寸）和 type（MIME 类型）。更多详见 MDN
1.2.1 浏览器支持
通过 Web 提示安装 PWA 的支持因浏览器和平台而异。
在桌面上：- Firefox 和 Safari 不支持在任何桌面操作系统上安装 PWA。见下方的将网站安装为应用程序。
- Chrome 和 Edge 支持在 Linux、Windows、macOS 和 Chromebook 上安装 PWA。
移动设备上需要点击右上角下拉菜单中选择install app选项： - 在 Android、Firefox、Chrome、Edge、Opera 和 Samsung Internet Browser 上都支持安装 PWA。
- 在 iOS 16.3 及更早版本上，PWA 只能通过 Safari 安装。
- 在 iOS 16.4 及更高版本上，PWA 可以通过 Safari、Chrome、Edge、Firefox 和 Orion 的分享菜单安装。
1.3、注意事项
1）Service Worker 仅通过 HTTPS 或 localhost 提供
2）如果 Service Worker 的内容包含语法错误， Service Worker 就会被舍弃，要处理有缺陷的 Service Worker，通常需要部署一个基本的 no-op Service Worker，它会在没有 fetch 事件处理脚本的情况下立即安装和激活：
self.addEventListener('install', () => {
self.skipWaiting();
});
self.addEventListener('activate', () => {
self.clients.matchAll({
type: 'window'
}).then(windowClients => {
windowClients.forEach((windowClient) => {
windowClient.navigate(windowClient.url);
});
});
});附：Workbox 是 Google 推出的一个工具库，旨在简化 Service Worker 的开发，下篇文章将描述利用它开发一款PWA应用实践过程。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。