PWA（渐进式的web引用）系列核心技术总结

本文将会大体介绍PWA系列技术，但是并不会深入全面到各个细节， 更为深入的内容可以参看 https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

PWA是什么

• 渐进式web引用
• progressive web app , 是提升用户体验的一种方法，让web能够给用户原生应用的体验
• 不是指一项技术，而是引用一系列的新技术进行改进web
• PWA能用现代的web api 以及传统的渐进式增强策略来创建跨平台的web应用程序
• 任何的web app都可以用pwa来实现渐进增强

PWA的优势

• 使用与所有浏览器，因为还是旨在渐进式挣钱开发
• 能够结束service worker 实现离线访问或网络较差的情况下的正常访问
• 可将网站添加到手机主屏幕上，实现类似原生app的效果，获得原生体验，拥有首屏加载动画可以隐藏地址栏等沉浸式体验
• 可以实现消息推送，点击通知可直接打开网站，增加用户粘度

PWA核心技术包括：（一系列web技术）

1. web app mainfest
2. service worker
3. promise / async / await： 异步
4. fetch api: 前端请求，ajax、axios或者Promise的fetch
5. Cache storage
6. 常见的缓存策略： 确定哪些资源需要走缓存，那些资源需要走网络
7. notification： 用来做通知的，在网页下面也可以实现消息通知

接下来我们将一一介绍PWA所涉及的一系列核心技术

web app mainfest

1. 一个程序清单的JSON文件（即项目中引入的manifest.json）， 实现在移动端可以将网站像app一样添加到主屏幕上
2. 可以提供有关引用程序的信息（如名称，作者，图标和描述等）
3. 作用：
   （1）可以添加到桌面，有唯一的图标
   （2）又启动时的动画，避免生硬过渡
   （3）隐藏浏览器相关的UI,比如地址栏和菜单栏等
4. 使用步骤：
   （1）项目下创建manifest.json
   （2）创建index.html， 并引入manifest.json
   （3）在manifest.json中提供常见配置
   （4）需要在https协议或者http://localhost下访问才可以
   （5）用http-server或者anywhere启动测试
5. manifest.json 常见配置如下：

{
   
   
  // 应用的名称， 用户安装横幅提示的名字，和启动画面中的文字
  "name": "HackerWeb",
  // 应用的短名字， 用于主屏幕显示
  "short_name": "HackerWeb",
  // 指定用户从设备启动应用程序时加载的URL, 可以是相对路径或者绝对路径
  "start_url": ".",
  // fullscreen 全屏显示, 无状态栏
  // standalone 看起来像一个独立应用，拥有独立图标和窗口， 可以包含其他UI元素，如状态栏
  // minimal-ui 看起来像独立应用程序，但是会有浏览器地址栏
  // browser 在传统的浏览器标签或新窗口打开
  "display": "standalone",
  // 用户指定启动时的过度背景颜色#fff / red
  "background_color": "#fff",
  // 指定应用程序的主题颜色， 应用顶部那一块的颜色
  "theme_color": "#ff0000",
  // 定义应用程序上下文的导航范围
  // 限制了manifest可以查看的网页范围，如果用户在范围之外浏览应用程序，这返回到正常网页
  "scope": "/myapp/",
  // 提供有关Web应用程序的一般描述
  "description": "A simply readable Hacker News app.",
  // 应用程序的图标，规格有： 48x48， 72x72， 96x96， 144x144， 168x168， 192x192
  "icons": [{
   
   
    "src": "imgs/favicon.png",
    "sizes": "64x64",
    "type": "image/png"
  }],
  // 定义所有Web应用程序顶级的默认方向， 有如下值:
  // any，natural， landscape，landscape-primary，
  // landscape-secondary， portrait，portrait-primary， portrait-secondary
  ​​"orientation": "portrait-primary",
  // 代表可由底层平台安装或可访问的本机应用程序
  "related_applications": [{
   
   
      // Google Play Store 可以找到应用程序的平台。
      "platform": "play",
      // 可以找到应用程序的URL。
      "url": "https://play.google.com/store/apps/details?id=com.example.app1",
      // 用于表示指定平台上的应用程序的ID。
      "id": "com.example.app1"
    }, {
   
   
      "platform": "itunes", // itunes
      "url": "https://itunes.apple.com/app/example-app1/id123456789"
    }]
}

效果如下：

service worker

• pwa的核心技术，可以让网页在离线或者网速比较慢的情况下依然可以访问

• 是一个独立的worker线程，独立于当前网页进程，是一种特殊的 web worker

• 优化网页性能的一个有效方法。除去，cdn , css sprite, 文件合并压缩，缓存，异步加载， 图片懒加载预加载，code spliting等

• 特点：

  1. 浏览器的js是运行在单线程上的，在同一时间内只能处理一件事
  2. web worker 是脱离主线程之外的，所以可以将一些比较耗时的任务交给web worker 做，完成之后通过postMessage方法告诉主线程
  3. web worker 是一个独立的运行环境，不能操作DOM和BOM，全局环境变量为self
  4. web worker 和service worker 都必须在http://localhost或者https服务器环境下才能生效

• 如何使用：

  1. 创建web worker, var worker = new Worker(“work.js”)
  2. 在web work中进行复杂的计算
  3. web work计算结束时，通过self.postMessage(msg)给主线程发消息
  4. 主线程通过worker.onmessage=function () {}监听消息
  5. 主线程也可以用同样的方法来给web work 进行通讯
     实例：
     
     运行结果如下：
     
     浏览器支持情况
     
  </