JavaScript深入理解-PWA渐进式应用

WPA-渐进式 web 应用

PWA 是什么

渐进式 Web 应用，提升 web app 浏览体验。

manifest

应用程序清单

基本介绍：

• web app manifest是 PWA 技术集合中的一部分

• web app manifest可以让网站安装到设备的主屏幕，而不需要用户通过应用商店下载

• web app manifest，在一个 JSON 文本文件中提供有关应用程序的信息（名称，作者，图标和描述等等）

• 传统的 web app 入口

  • 网站
  • 书签，收藏夹
  • 直接搜索

• Web app manifest:

  • 可以添加到桌面，有唯一的图标和名称
  • 有启动时的界面，避免生硬的过渡
  • 隐藏浏览器相关的 UI，比如地址栏等等

• 适用步骤：

  • 在项目根目录创建一个 manifest.json 文件
  • 在 index.html 引入 manifest.json 文件
  • 在 manifest.json 文件中提供常见的配置
  • 需要在 https 协议或者在 http://localhost 下访问项目
  • <link rel="manifest" href="manifest.json" />

• 常见配置清单

  • name：应用的指定名称，安装横幅的文字，启动画面的文字
  • short_name：应用的短名称，用于主屏幕显示
  • start_url：指定用户从设备启动应用程序时加载的 URL。可以是绝对路径和相对路径
  • icons：用于指定可在各种环境中用作应用程序图标的图像
  • background_color：用户启动时的背景色
  • theme_color:用于配置应用程序的主题颜色
  • display：用于指定 web app 的显示模式
    • fullscreen：全屏显示
    • standalone
    • minimal-ui

service worker

• 基本介绍
• 标准的 PWA 程序，包括 3 个部分
  • https 服务器或者 http://localhost
  • manifest.json
  • service worker
• service worker 和 web worker
• web worker 的使用
  • 创建：web worker  var worker = new Worker('work.js')
  • 在 web work 中进行复杂的计算
  • 在 web work 计算结束，通过 self.postMessage(msg)给主线程发消息
  • 主线程通过 worker.onmessage=function(msg){}监听消息
  • 主线程也可以用同样的方式给 web worker 进行通讯
• service worker 介绍
  • 一旦 install 就会永远存在，除非手动 unregister
  • 用到的时候可以直接唤醒，不用的时候 自动睡眠
  • 可以变成拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到，包括网络离线状态
  • 离线内容开发者可控
  • 必需在 HTTPS 环境下才能工作
  • 异步实现，内部大都是 Promise 实现
• sevice worker 适用对象
  • 在 window.onload 中注册 service worker，防止与其他资源竞争
  • navigator 对象中内置了 serviceWorker 属性
  • service worker 在老版本的浏览器中不支持，需要进行浏览器兼容
    • if('serviceWorker in navigator'){}
  • 注册 service worker navigator.serviceWorker.register('./sw.js')，返回一个 promise 对象

<script>
  //需要在localhost 或者 HTTPS中才能使用
  // 网页加载完成时注册
  window.addEventListener("load", () => {
    
    // 能力检测
    if ("serviceWorker" in navigator) {
    
      navigator.serviceWorker.register("./sw.js").then((res) => {
    
        console.log(res);
      });
    }
  });
</script>

• service worker 声明周期

  • install 事件会在 service worker 注册成功时候触发，主要用于缓存资源
  • activate 事件会在 service worker 激活的时候触发，主要用于删除旧的资源
  • fetch 事件会在发送请求的时候触发，主要用于操作缓存或者读取网络资源
  • 如果 sw.js 发生了改变，install 事件会重新触发
  • activate 事件会在 install 事件后触发，但是如果现在已经存在 service worker，就会处于等待状态直到 service worker 终止
  • 可以通过self.skipWaiting()方法跳过等待，返回一个 promise 对象
  • 可以通过event.WautUntil()方法扩的参数是一个 promise 对象，会在 promise 结束后才会结束当前生命周期函数，防止浏览器在一步操作之前就停止了生命周期
  • service worker 激活后ÿ