Web前端开发技术

Appearance

PWA ​

元信息 ​

  • 目标：理解 PWA 是让 Web 应用获得离线可用、可安装、类原生体验的一组技术集合——三大支柱（Service Worker、Web App Manifest、HTTPS）及"渐进增强：支持则增强，不支持仍是普通网站"的底线
  • 关键概念：PWA、Service Worker、Web App Manifest、离线可用、可安装、渐进增强
  • 关联阶段：cp4
  • 常见误区：以为 PWA 是另一种要单独开发的应用形态（它就是普通网站加装三件套）；以为离线就是把页面整体存到本地（资源走 Cache API、业务数据走 IndexedDB，由 SW 拦截请求编程决定）；以为配上 Manifest 图标就是 PWA（离线兜底的实质在 Service Worker 的缓存策略）

PWA：Web 应用的"原生化"补课 ​

Progressive Web App——让 Web 应用获得离线可用、可安装、类原生体验的一组技术集合。渐进指：支持则增强，不支持仍是一个普通网站。

三大支柱 ​

  • Service Worker：一段独立于页面的后台脚本，充当"网络代理"——可拦截请求、返回缓存，是离线能力的核心。本质是事件驱动的可编程缓存层
  • Web App Manifest：一个 JSON 清单（名称、图标、主题色），让站点可"安装"到主屏幕，以独立窗口启动，看起来像原生 App
  • HTTPS：Service Worker 只在安全上下文注册
import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox

与课程主线的呼应 ​

  • 离线的底气来自本地存储——Cache API 存资源，IndexedDB 存业务数据
  • PWA 重新回答了客户端API的元命题：Web 平台的能力边界不断向原生 App 推进（推送通知、文件系统访问等）
  • 部署起点见实训：github pages部署——静态托管站点即可加装 PWA

素材 ​