javascript的PWA是什么_如何用JavaScript构建渐进式Web应用？_技术教程

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并离线响应）：

// 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和用户授权）