画布 1
PWA是什么
  入门
    渐进式Web应用（PWAs）是使用现代API构建并增强的Web应用，具有更高的性能、可靠性和可安装性，可在任何设备上运行，具有统一的代码库。
    当下
      如今的web应用
        不需要打包
        不需要额外的内容审核
        更低的延迟
        直接访问最新的版本
        交互式的查看内容
      如今的App
        离线下工作
        独立的平台
        可访问物理设备
          拍照
          USB
          蓝牙
        媒体播放等
      对比
        Web
          Linkability（可链接性）
          默认可访问
          无处不在
          易于部署
          易于更新
          任何人都可以发布
        平台应用程序
          离线可用
          高性能
          设备集成
          独立体验
          已安装图标
          丰富可靠
    需求
      Web应用 = 原生应用
        问题
          应用商店的管制
          商店
            App Store
            Google Play
            Microsoft Store
        能力问题
      挑战
        跨浏览器兼容性
          版本限制
            Windows 10和11
              Google Chrome (from version 73)
              Microsoft Edge (from version 79)
              Microsoft Store
            ChromeOS
              Chrome browser (from version 72)
              Play Store (from version 85)
            macOS, Linux, and Windows 7 and 8.x
              Google Chrome (from version 73)
              Microsoft Edge
          设备限制
            iOS与iPadOS
              Safari (since iOS 11.3)
              AppStore (since iOS/iPadOS 14, with some limitations)
            Android
              Firefox
              Google Chrome
              Samsung Internet
              Microsoft Edge
              Opera
              Brave
              Huawei Browser
              Baidu
              UCWeb
              Play Store (from version 72 with Google Chrome installed
              or browsers compatible with TWA)
              Galaxy Store
              Managed Play iframe for enterprise distribution
            其他
              Game consoles
              Smart TVs
              Smartwatches
              Cars
        对PWA的认识
          UX设计
      PWA应用
        案例
          Hulu
            视频流媒体服务
          JD.ID
            电子商务平台
          Clipchamp
            桌面级别功能的在线视频编辑器
          Gravit Designer
            桌面级别矢量设计工具
        应用方向
          流媒体平台
          云游戏
          远程计算
        相关技术
          WebRTC
          WebAssembly
          GamePad APIs
    入门策略
      让其可安装
        提供manifest文件
      关注一个功能
        推送？
        通知？
      构建一个简单的版本
      从头开始
      升级应用
        发布到商店
    PWA检查表
      核心要求
        快速启动，保持快速
        在任何浏览器中工作
        适应任何屏幕尺寸
        提供自定义离线页面
        可安装
      更进一步的实践
        提供离线体验
        在可用的地方使用强大的功能
          推送消息
          WASM
          webGL
        通过搜索可发现
          规范URL
        与任何输入类型一起使用
          不依赖屏幕尺寸
        为权限请求提供上下文
          地址位置
          通知
          凭证等
    能力
      增强
        快捷方式
        启动画面
        全屏支持
      检测
        检测用户是在浏览器中还是在独立模式下使用您的 PWA
          matchMedia()
        检测应用程序的安装状态
          appinstalled
        检测用户从浏览器到 PWA 窗口
        测用户是否已安装与您的 PWA 相关的应用程序
      操作系统集成
        文件系统
        网址处理
        URL协议处理
        分享
        联系人选择
      窗口管理
        窗口调整
          大小
          标题
          标签
          控件覆盖
        多窗口放置
        屏幕唤醒锁
        虚拟键盘
      实验特性
        chrome
        firefox
        safari
        各家不一样
  架构
    SPA
      优点
        大多数是页面内原子级别更新
        客户端依赖项在启动时加载
        由于使用缓存，后续加载很快
      缺点
        初始加载成本高
        性能取决于设备硬件和网络连接
        需要额外的应用程序复杂性
      应用场景
        适用的场景
          实时数据更新仪表
          第三方验证
          依赖客户端上下文
            连接硬件
          应用程序比较小
        不适用的场景
          初始负载性能非常重要的场景
          中低功能设备
    MPA
      优点
        大多数是全页面更新
        初始渲染速度非常重要
        客户端脚本可以作为一个增强功能
      缺点
        次要视图需要另一个服务器调用
        上下文在视图之间不会保留
        需要服务器或预渲染
      应用场景
        适合的场景
          新闻
          电子商务
          初始渲染比较重要的场景
        不适合的场景
          需要重新下载、重新解析的场景
  基础
    响应式Web设计
      流式网格
      灵活的媒体
      媒体查询
    进步式增强
      从标准的HTML、CSS和JavaScript开始
      添加具有适当回退的功能层
    设备检测
      应避免基于User-Agent字符串进行设备检测
    本质设计
      将移动作为用户体验的关注点
      强调设计过程中的内容和核心功能
    Web性能
      设置性能指标
        Loading
          FCP
            First Contentful paint
              第一次内容绘制
            FCP是指浏览器在首次渲染HTML文档中的第一块内容（如文本、图像、SVG等）时的时间点
          LCP
            Largest Contentful Paint
              最大内容绘制
            最大的可见元素在页面加载时呈现的时间点
          FID
            First Input Delay
              首次输入延迟
            指用户首次与页面交互（如点击链接、按钮等）时到页面响应用户操作的时间差
          CLS
            Cumulative layout Shift
              累计布局位移
            指页面中所有元素在加载过程中发生的不期望的移动的总和。这些移动可能会导致用户在页面加载过程中的困惑和不良体验。CLS主要用来度量页面的视觉稳定性。
        Interactive
        Visual Stability
  应用设计
    窗口设计
    图标
    主题
    显示模式
      全屏
      单体
      最小用户界面
    桌面设计
    CSS最佳实践
      媒体查询
    应用体验
      user-select
      强调色
      系统字体
      拉动刷新
      安全区域
    链接
  核心概念
    资源和数据
      PWA应用与Web相同之处
        HTML 用于内容和初始页面渲染。
        JavaScript 用于逻辑，包括运行WebAssembly模块（编译后的代码）和渲染2D和3D硬件优化图形的能力。
        CSS 用于布局、样式和动画。
        网络格式的图片，如PNG、JPEG、WebP和SVG。
        网络格式的视频，如MPEG-4和WebM。
        Web字体。
        JSON或其他格式的数据。
      缓存方案
        Web Storage
        IndexedDB
        Cache storage
        WebSQL和ApplicationCache
          这两个解决方案已被弃用
      Service Workers
        负责上面的数据传递
        消息处理
        离线使用上面的数据
        后台更新逻辑
      资源策略
        缓存策略
          预缓存
          按需缓存
          API与Web服务
        更新策略
          全部
          局部
          持续更新
        缓存限制
          Chrome
            80%用户磁盘空间
            StorageManger API
          Internet Explorer 10
            250M
            超过10M会提示用户
          FireFox
            50%可用磁盘空间
          Safari
            1GB左右
            200MB增量增加限制
              如果站点存储的数据超过某个阈值，浏览器会提示用户授权使用更多的数据
    Service Workers
      为什么要使用？
        加载时间缩短 0.1 秒也可以将转化率提高多达 10%。
      数据存放
        Cache Storage
        IndexedDB
      注册方式
        代码
          if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
        验证
          调试工具
            Chrome
              Application->Service Workers
            Safari
              Develop->Service Workers
      事件监听与能力
        不仅仅用于代理或服务 HTTP 请求
        后台代码执行
        网络推送通知
        处理付款
    缓存
      版本要求
        浏览器
      内容
        主页面 HTML（您应用的 start_url）
        用于主用户界面的 CSS 样式表
        用户界面中使用的图像
        渲染用户界面所需的 JavaScript 文件
        数据，如 JSON 文件，用于呈现基本体验
        Web 字体
        对于多页面应用程序，其他 HTML 文档，您希望快速或离线提供服务
      缓存时机
        Service Workers安装时
        第一页加载后
        当用户导航到某个部分或路径时
        当网络空闲时
      示例应用
        代码
        演示地址
    服务
      本地拦截请求
        代码
          self.addEventListener("fetch", event => {
console.log(`URL requested: ${event.request.url}`);
});
      本地响应请求
        代码
          // fetch event handler in your service worker file
self.addEventListener("fetch", event => {
const response = .... // a response or a Promise of response
event.respondWith(response);
});
          模拟响应
            const simpleResponse = new Response("Body of the HTTP response");
const options = {
status: 200,
headers: {
'Content-type': 'text/html'
}
};
const htmlResponse = new Response("<b>HTML</b> content", options)
        策略
          缓存优先
          网络优先
          重新验证缓存
          仅网络
          仅缓存
          自定义
      链接
    离线数据
      存储
        IndexedDB
          idb
        WebStorage
          StorageManager
        CacheStorage
      兼容性
        WebStorage
          chrome
            4
          firefox
            3.5
          edge
            12
          safari
            4
        FileSystem Access
          Chrome
            86
          firefox
            111
          edge
            86
          safari
            15.2
        StorageManager
          Chrome
            55
          firefox
            57
          edge
            79
          safari
            15.2
  安装更新相关
    安装
      常规好处
        在启动器、主屏幕、开始菜单或启动板中有一个图标。
        当用户在其设备上搜索该应用程序时出现。
        在操作系统中有一个单独的窗口。
        支持特定功能。
      标准
        manifest文件
        图标
        注册service worker
        离线使用
      桌面安装
      iOS安装
        head
          <link rel="apple-touch-icon" href="/icons/ios.png">
        步骤
          打开位于浏览器底部或顶部的共享菜单。
          单击添加到主屏幕。
          确认应用名称；该名称是用户可编辑的。
          单击添加。在 iOS 和 iPadOS 上，网站和 PWA 的书签在主屏幕上看起来是一样的。
      安卓安装
    Web Manifest.json
      基本字段
        name
          PWA 的全名
        short_name
          12 个字符以内
        icons
          src
          type
          sizes
        start_url
        display
          fullscreen
          standalone
          minimal-ui
        id
          其他 PWA 进行唯一标识
      图标
        512*512
        其他
          192
          384
          1024
    安装提示
      beforeinstallprompt事件
    更新
      更新内容
        应用程序数据
        已有资源
        manifest
        元数据
      更新方法
        Fetch
        WebRTC
        WebSockets
        Chrome独有
          Background synchronization
          Web periodic background sync
          background fetch
          web push
    Workbox
      Workbox 可以帮助您管理资产缓存和服务需求
        管理上面的Service Worker的
      库
        workbox-routing
        workbox-strategies
          workbox-expiration
        workbox-precaching
        workbox-window
          在窗口上下文中运行的模块
        Workbox Build
          npm模块，生成完整的service worker
          注入预缓存清单，并复制workbox文件
        Workbox CLI
        workbox-sw
      其他库
        sw-tools
        upup
  工具与调试
    Chromium DevTools
    Firefox 开发者工具
    Safari Web Inspector
  复杂性管理
    核心点
      一个角色、一个任务、一个概念或一个维度
      只有一个实例或者执行一个操作
    复杂性
      主线程
        绘制页面
        监听和响应事件
        加载和卸载页面
        管理媒体、安全性和身份验证
      使用workers来减少复杂性
        专用
        共享
        服务工作者
  功能扩展
    能力
      What web can do today
      Can I use 或者 MDN
    强大的web能力
      WebRTC
      地理信息
      推送消息
      应用程序安装
      WebAssembly
      WebGL
        WebXR