Progressive Web Apps 基础
Source: Dev.to
请提供您希望翻译的具体文本内容，我将为您翻译成简体中文。
介绍：那么，这个 PWA 究竟是什么？
想象一个像应用一样运行的网站。听起来很简单，对吧？真正的魔法在于“怎么做”。PWA 本质上是一套现代网页技术和设计原则，使开发者能够构建提供 类似应用体验 的网页应用。
- 它们是 渐进式 的，因为借助渐进增强，无论用户选择何种浏览器，都能正常工作。
- 它们从基本功能开始，如果浏览器支持，则逐步叠加更高级的特性。
可以这么想：普通网站就像明信片——你寄出，它就到达。而 PWA 则像一封精心制作的信件，里面藏有额外的惊喜。它的设计目标是无论在何种网络或设备上，都能保持吸引力、可靠性和速度。
前置条件：获取 PWA 需要哪些准备？
在我们开始打造自己的 PWA 佳作之前，先来聊聊必备要素。你不需要披风或秘密基地，但对一些网页开发基础的扎实理解肯定能让过程更顺畅。
- HTML、CSS 和 JavaScript 精通 – 结构、样式和交互的核心。
- Web API 的了解 – PWA 利用现代浏览器 API（离线存储、后台任务、推送通知等）。
- 基本的服务器端知识 (可选但推荐) – 对缓存策略和数据管理很有帮助。
- 现代浏览器 – Chrome、Firefox、Safari、Edge 都对 PWA 有出色支持；请在多个平台上进行测试。
- 冒险精神和实验精神 – PWA 的目标是突破网站功能的边界。
大咖：采用 PWA 的优势
为什么你还要费心去使用 PWA？理由多得数不清，而且非常有说服力。下面我们来拆解一下它的精彩之处。
1. 可靠性 – 你的站点，脱机也能用
还记得那次想要获取重要信息，却只收到 “无网络连接” 提示吗？PWA 可以让这种烦恼成为过去。
离线功能 由 Service Workers 提供支持，它们是 PWA 世界里的无声超级英雄。它们会缓存关键资源（HTML、CSS、JavaScript、图片），使得即使没有网络——或网络不稳——应用仍能加载并运行。
概念性 Service Worker (sw.js)
// sw.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js',
'/images/logo.png'
// Add other essential assets here
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
// Serve from cache if available, otherwise fetch from network
return response || fetch(event.request);
})
);
});2. 速度 – 闪电般的性能
没人喜欢慢吞吞的网站。PWA 通过缓存资源和优化加载来实现高速体验。
- App Shell 模型 – 先提供一个最小化的 HTML/CSS/JS 外壳，然后动态加载内容。用户能够立即看到页面的基本视觉，即使所有数据尚未全部获取。
- 优化缓存 – 智能的缓存策略让后续访问更快，因为大部分内容已经本地存储。
3. 互动性 – 将 App 体验带到 Web
这正是 PWA 在弥合原生 App 与网页之间差距时大放异彩的地方。
- 添加到主屏幕 – 用户可以通过将 PWA 添加到设备的主屏幕来“安装”它，效果和原生 App 一致。这样就拥有了熟悉的图标和专属的浏览体验。
- 推送通知 – 即使浏览器未打开，也能向用户发送新品、特惠或重要更新的提醒，是重新激活用户的强大工具。
请求通知权限 (main.js)
// main.js
if ('Notification' in window) {
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('Notification permission granted.');
// You can now schedule or send notifications
}
});
}准备好构建你的第一个 PWA 了吗？
掌握了上述概念、前置条件和优势后，你已经可以开始动手实验了。记住：PWA 的核心是渐进式增强——先从简单实现起步，然后随着浏览器支持的提升逐步加入更丰富的功能。祝编码愉快！
PWAs 的优势
1. 离线能力与可靠性
- Service Workers 使资产和 API 响应能够被缓存，从而让应用在离线或网络不稳定的情况下仍能运行。
- Background Sync 可以将操作（例如发送消息）延迟到网络恢复后再执行。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(() => console.log('Service Worker registered'))
.catch(err => console.error('SW registration failed', err));
}2. 推送通知
推送通知即使在应用未打开时也能保持用户的参与度。
if ('Notification' in window && 'serviceWorker' in navigator) {
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('Notification permission granted.');
} else {
console.log('Notification permission denied.');
}
});
}3. 后台同步
如果用户在离线时执行了操作（例如发送消息），Background Sync 会在网络恢复后自动完成该操作。
4. 可发现性与可访问性：两全其美
- Search Engine Optimization (SEO)： PWAs 可以被搜索引擎索引，用户能够通过自然搜索找到它们。
- No App‑Store Friction： 用户可以直接从浏览器“安装” PWA，省去应用商店下载的障碍。
5. 跨平台兼容性：单一代码库，适配多设备
一次开发，随处部署。PWAs 能在任何兼容的浏览器上运行，相比维护分别的 iOS 与 Android 原生应用，可节省时间和资源。
PWA 的缺点
1. 硬件访问受限
- 受限的 API： 高级相机控制、蓝牙、通讯录等可能不可用或受限。虽然新兴的浏览器 API 正在缩小差距，但仍缺乏原生级别的硬件访问能力。
- 后台任务限制： 后台同步和推送通知功能强大，但仍不及原生应用的稳健后台处理能力。
2. 浏览器兼容性细节
- 旧版浏览器： 使用非常老旧浏览器的用户可能无法获得完整的 PWA 体验。渐进增强可以在一定程度上缓解，但仍需考虑此因素。
- iOS 特性： 过去对某些 PWA 功能的支持较慢，尽管情况正在改善。务必在 iOS 与 Android 上都进行测试。
3. 低端设备上的性能
缓存庞大或 JavaScript 负载沉重的复杂 PWA 在低端或老旧设备上可能表现不佳。需要进行细致的优化。
4. 安全性考虑
PWA 必须使用 HTTPS，这本身有助于安全，但开发者仍需保护数据、管理身份验证，并防范常见的 Web 漏洞。
核心 PWA 功能解析
1. Service Workers：后台魔术师
Service Workers 在后台运行，独立于网页本身，充当浏览器与网络之间的代理。
- **离线缓存：**拦截网络请求并返回缓存的响应。
- **推送通知：**即使页面未打开也能接收通知。
- **后台同步：**在网络恢复后再执行延迟的操作。
2. Web App Manifest：身份卡
一个 JSON 文件，提供 PWA 的元数据，告诉浏览器在“安装”后应用应如何表现。
name/short_name：显示名称。icons：针对不同设备分辨率的图标集合。start_url：应用启动时打开的 URL。display：控制 UI 外观（standalone、fullscreen等）。theme_color/background_color：为浏览器 UI 设置样式。
示例（manifest.json）：
{
"name": "My Awesome PWA",
"short_name": "AwesomeApp",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#007bff",
"background_color": "#ffffff"
}在 HTML 中链接 manifest：
<link rel="manifest" href="/manifest.json">3. HTTPS：安全基础
PWA 需要 HTTPS。这保证了数据完整性和隐私，并且使 Service Worker 功能得以运行。
结论：拥抱进步的未来！
Progressive Web Apps 不仅仅是一个流行词——它们代表了网页开发的重大演进。通过提供可靠性、速度和类原生的体验，PWA 让开发者能够创建令人愉悦的产品，既满足用户，又实现业务目标。虽然它们有一定局限，但在大多数使用场景中，优势往往超过缺点。无论你的目标是提升用户参与度、改善性能，还是跨平台触达用户，PWA 都是现代开发者工具箱中的强大利器。
因此，勇敢前行，敢于实验，开始构建不仅仅是功能性的、而是真正 progressive 的网络体验。网络的未来已经到来，它看起来极其像一个应用！祝编码愉快！