PWA 基础学习

1、PWA 是什么？

　　PWA 是 Progressive Web App 的缩写，从字面翻译过来就是 渐进式 Web App。

　　渐进式翻译过来就是慢慢的，不是一蹴而就的。这里的指的是 Wab App 更安全、性能更好，体验更完善。

　　总结的说，PWA 就是应用了新的一些技术对 Web App 进行改进，使得它在安全、性能、体验三个方面有更好的提升，

　　PWA 就是一个概念。用技术使 Web App 应用更好。

　　特定：

　　可靠 -- 在不稳定的网络环境中，也可以瞬间加载并展示

　　体验 -- 加载速度快，可以先给展示页面

　　粘性 -- 可以在桌面创建入口，并不需要去下载

　　　　　　可以借助缓存，是体验更好

　　　　　　可以给用户发送离线通知。

　　新技术 ：

　　App Manifest -- 描述应用的相关信息，实现添加入口到桌面

　　Service Worker -- 使得 javascript 可以开启一个独立的线程

　　Notifications API -- 给用户提送信息展示在桌面

　　Push APi  --  允许web应用接收服务推送的消息

　　Background Sync --  后台同步，属于 service worker 的功能。网站关闭的时候，在后台执行。

2、Service Worker

　　浏览器中 javascript 运行在一个线程上，同一时间只能做一件事情。

　　Service Worker 可以脱离主线程，在一个独立的线程中工作。完成一些复杂的事情。

　　特点：

　　拥有一个独立的线程，可以和主线程交互

　　一点被创建拥有存在，除非被终止

　　需要的时候直接可以唤起，不需要的时候睡眠

　　可以拦截代理请求和返回、缓存文件

　　可以接收服务端推送的消息

　　

　　使用

　

  // 注册一个 serviceWorker
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/sw.js', {scope: '/'})
      .then(function (registration) {
        // 注册成功
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
      .catch(function (err) {
        // 注册失败:(
        console.log('ServiceWorker registration failed: ', err);
      });
  });

　　

　　1、serviceWorker.register 方法注册一个 Service Worker 。

　　参数 /sw.js ：在 /sw.js  注册一个 Service Worker

　　scope ： 需要拦截操作的的作用域