什么是 PWA ：Progressive Web Apps

什么是 PWA ：Progressive Web Apps

谷歌给以 Service Worker API 为核心实现的 web 应用取了个高大上的名字：Progressive Web Apps （PWA，渐进式增强 WEB 应用），并且在其主要产品上进行了深入的实践。那么，符合 PWA 的应用特点是什么？以下为来自谷歌工程师的解答。

Progressive Web Apps 是:

• 渐进增强 – 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则
• 响应式用户界面 – 适应任何环境：桌面电脑，智能手机，笔记本电脑，或者其他设备
• 不依赖网络连接 – 通过 Service Workers 可以在离线或者网速极差的环境下工作
• 类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验，因为它是建立在 app shell model 上的
• 持续更新 – 受益于 Service Worker 的更新进程，应用能够始终保持更新
• 安全 – 通过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改
• 可发现 – 得益于 W3C manifests 元数据和 Service Worker 的登记，让搜索引擎能够找到 web 应用
• 再次访问 – 通过消息推送等特性让用户再次访问变得容易
• 可安装 – 允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店
• 可连接性 – 通过 URL 可以轻松分享应用，不用复杂的安装即可运行

Progressive Web Apps 优势:

PWA 是一种理念，使用多种技术来增强 Web Apps 的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。它比原生应用更轻量，但是却比现有的 Web Apps 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」（虽然依然是基于浏览器的技术），能够把 PWA 网站添加到你的桌面上，不管是 PC 操作系统还是手机操作系统，类似于一个原生应用一样，并且拥有媲美原生应用的体验。而微信支付宝等小程序更封闭，是 Web 的子集。

生命周期：

• Parsed （解析成功）： 首次注册 Service Worker (SW) 时，浏览器解决脚本并获得入口点，如果解析成功，就可以访问到 SW 注册对象，在这一点中我们需要在 HTML 页面中添加一个判断，判断该浏览器是否支持 SW
• Installing （正在安装）： SW 脚本解析完成之后，浏览器会尝试进行安装，installing 中 install 事件被执行，如果其中有 event.waitUntil ()方法，则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功，如果 Promise 被拒绝，则安装失败，SW会进入 Redundant（ 废弃 ）状态
• Installed / Waiting （安装成功/等待中）： 如果安装成功，SW 将会进入这个状态
• Activating （正在激活）： 处于 waiting 状态的 SW 发生以下情况，将会进入 activating 状态中：当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting() 方法被调用 、用户已关闭 SW 作用域下的所有页面，从而释放了当前处于激活状态的 worker、超出指定时间，从而释放当前处于激活状态的 worker
• Activated （激活成功）： 该状态，其成功接收了 document 全面控制的激活态 worker
• Redundant （废弃）： 这个状态的出现时有原因的，如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看

PWA 关键技术

• Service Worker
  Service Worker 是 Chrome 团队提出和力推的一个 WEB API，用于给 web 应用提供高级的可持续的后台处理能力。该 WEB API 标准起草于 2013 年，于 2014 年纳入 W3C WEB 标准草案，当前还在草案阶段
  Service Worker 最主要的特点是：在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求，它的特点：
  • 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
  • 运行于浏览器后台，可以控制打开的作用域范围下所有的页面请求
  • 单独的作用域范围，单独的运行环境和执行线程
  • 不能操作页面 DOM。但可以通过事件机制来处理
• Manifest
  Web App Manifest 是一个 W3C 规范，它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有：
• 能够将你浏览的网页添加到你的手机屏幕上
• 在 Android 上能够全屏启动，不显示地址栏 （ 由于 Iphone 手机的浏览器是 Safari ，所以不支持哦）
• 控制屏幕 横屏 / 竖屏 展示
• 定义启动画面
• 可以设置你的应用启动是从主屏幕启动还是从 URL 启动
• 可以设置你添加屏幕上的应用程序图标、名字、图标大小
• Push Notification
  Push 和 Notification 是两个不同的功能，涉及到两个 API 。
• Notification 是浏览器发出的通知消息。
• Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。

PWA 技术的实现

1. 添加注册事件
在网页中添加注册JS：

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

2. 添加 PWA 应用清单信息

• 在网站根目录下新建 manifest.json

  {
       
  "name": "无垠鲲",
  "short_name": "无垠鲲",
  "description": "鲲之大，无垠...",
  "icons": [
  {
       
  "src": "https://www.neosey.com/favicon.ico",
  "sizes": "64x64",
  "type": "image/png"
  },
  {
       
  "src": "https://www.neosey.com/favicon.ico",
  "sizes": "128x128",
  "type": "image/png"
  },
  {
       
  "src": "https://www.neosey.com/favicon.ico",
  "sizes": "256x256",
  "type": "image/png"
  },
  {
       
  "src": "https://www.neosey.com/favicon.ico",
  "sizes": "512x512",
  "type": "image/png"
  }
  ],
  "start_url": "/",
  "background_color": "#E0E3DA",
  "theme_color": "#E0E3DA"
  }
  

注：name 和 short_name 为网站标题，description 为网站描述，src 为图标地址
<link rel="manifest" href="./manifest.json">

3. Service Worker 配置

//缓存空间名称
var CACHE_VERSION = 'sw_v1';
//需缓存的文件
var CACHE_FILES = [
'/',
'/aaa.html',
'/bbb.jpg'
];
//监听安装事件
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_VERSION)
    .then(cache => cache.addAll(CACHE_FILES)
      .then(() => self.skipWaiting())
    ));
});

//监听激活事件
self.addEventListener('activate', function (event) {
  event.waitUntil(
    caches.keys().then(function (keys) {
      return Promise.all(keys.map(function (key, i) {
        if (key !== CACHE_VERSION) {
          return caches.delete(keys[i]);
        }
      }));
    })
  );
});

//不缓存策略
self.addEventListener('fetch', function(event) {});
注：以上定义为只缓存已定义的文件，不缓存其他。

4. Service Worker 更多缓存策略

• 总是更新策略注：其余配置与上文简单配置内容一致，仅需将 fetch 事件修改如下。

  //总是更新策略
  self.addEventListener('fetch', function(event) {
  event.respondWith(
  caches.open(CACHE_VERSION).then(function(cache) {
  return fetch(event.request).then(function(response) {
  cache.put(event.request, response.clone());
  return response;
  });
  })
  );
  });
  

• 先缓存后更新策略注：其余配置与上文简单配置内容一致，仅需将 fetch 事件修改如下。

  //先缓存后更新策略
  self.addEventListener('fetch', function (event) {
  event.respondWith(
  caches.open(CACHE_VERSION).then(function (cache) {
  return cache.match(event.request).then(function (response) {
  var fetchPromise = fetch(event.request).then(function (networkResponse) {
  cache.put(event.request, networkResponse.clone());
  return networkResponse;
  })
  return response || fetchPromise;
  })
  })
  );
  });
  

• 最佳策略
  这里，我们简单的通过文件类型这个点来进行划分，优先情况是缓存 js/css 文件。这样通过在 FILE_LISTS 添加想要缓存的文件类型即可。之后，我们只要在 message 中更新原来的 document 即可。
  注：此策略与上文简单配置配置内容不一致，以下为该策略配置示例：

  //最佳策略
  var CURRENT_CACHES = {
       
  prefetch: 'prefetch-cache-v' + 1,
  };
  var FILE_LISTS = ['js','css','png'];
  var goSaving = function(url){
       
  for(var file of FILE_LISTS){
       
  if(url.endsWith(file)) return true;
  }
  return false;
  }
  self.addEventListener('fetch', function(event) {
       
  event.respondWith(
  caches.match(event.request).then(function(resp) {
       
  return resp || fetch(event.request).then(function(response) {
       
  // 检查是否需要缓存
  var url = event.request.url;
  if(!goSaving(url))return response;
  console.log('save file:' + url);
  // 需要缓存,则将资源放到 caches Object 中
  return caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
       
  console.log('update files like' + event.request.url);
  cache.put(event.request, response.clone());
  return response;
  });
  });
  })
  );
  });
  self.addEventListener('message',event =>{
       
  console.log("receive message" + event.data);
  // 更新根目录下的 html 文件。
  var url = event.data;
  console.log("update root file " + url);
  event.waitUntil(
  caches.open(CURRENT_CACHES.prefetch).then(cache=>{
       
  return fetch(url)
  .then(res=>{
       
  cache.put(url,res);
  })
  })
  )
  });
  

体验 PWA

到现在为止就已经为网站配置好了 PWA 的技术，在支持 PWA 技术的浏览器上体验吧！