PWA是基于标准Web技术、通过Service Worker、Manifest和HTTPS实现的渐进式Web应用。其三大基础条件为：必须运行在HTTPS上、包含配置合理的manifest.json文件、成功注册并激活Service Worker；JavaScript贯穿全程，负责逻辑控制、缓存管理、推送交互及硬件访问等核心功能。
PWA（Progressive Web App）是用标准Web技术构建的、能提供类似原生应用体验的网站。它不是某种新框架或语言，而是通过一系列现代Web API（比如Service Worker、Web App Manifest、HTTPS等）组合实现的——JavaScript在其中承担核心逻辑控制、离线策略、缓存管理、推送交互等关键任务。
必须满足的三个基础条件
一个真正的PWA不是靠“加个manifest就叫PWA”，它有硬性门槛：
-
运行在HTTPS上：Service Worker只能在安全上下文注册，本地开发可用
localhost绕过，但上线必须HTTPS -
包含Web App Manifest文件：一个
manifest.json，定义图标、启动页、显示模式（standalone）、主题色等，让浏览器知道“它可以被添加到主屏幕” - 注册并激活Service Worker：这是PWA的灵魂——它是一段独立于页面运行的JS脚本，能拦截网络请求、缓存资源、处理推送、支持后台同步
用JavaScript写一个最简Service Worker
在项目根目录放sw.js，然后在主页面中注册：
// main.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(reg => {
console.log('SW registered:', reg);
});
}
sw.js内容示例（缓存HTML/CSS/JS并离线响应）：
立即学习“Java免费学习笔记（深入）”；
// sw.js
const CACHE_NAME = 'my-pwa-v1';
const urlsToCache = ['/', '/index.html', '/style.css', '/app.js'];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(res => res || fetch(e.request))
);
});
注意：cache.addAll()只缓存GET请求；动态数据（如API）需单独设计策略（比如Stale-While-Revalidate）。
让PWA真正“可安装”和“类原生”
仅靠Service Worker还不够，用户得愿意“添加到主屏幕”。这需要：
-
manifest.json配置合理：至少包含
name、short_name、icons（推荐提供192x192和512x512 PNG）、start_url、display: "standalone" - 页面加载稳定且首屏快：Lighthouse会检测“可安装性”，要求首屏内容不依赖网络、无JS错误、有100ms内可交互的反馈
- 监听beforeinstallprompt事件（可选但推荐）：自己控制安装提示时机，避免浏览器自动弹窗被打断
例如手动触发安装流程：
let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {
e.preventDefault();
deferredPrompt = e;
// 比如在按钮点击时调用 deferredPrompt.prompt()
进阶能力靠JavaScript驱动
PWA不止是离线访问，JavaScript让它活起来：
-
后台同步（Background Sync）：用
navigator.serviceWorker.ready.then(sw => sw.sync.register('send-message'))注册任务，在下次联网时自动执行 -
消息推送（Push API）：前端订阅后，服务端可通过FCM或WebPush协议发通知，Service Worker接收并
self.registration.showNotification()展示 -
访问设备硬件：如
navigator.geolocation、navigator.camera（通过MediaDevices）、navigator.getBattery()等，无需额外权限弹窗（取决于manifest和用户授权）
基本上就这些。PWA不是一蹴而就的标签，而是渐进增强的过程——从一个能离线打开的页面开始，逐步加上安装提示、推送、同步、硬件访问。JavaScript是贯穿始终的胶水，把标准API串成真实体验。
