我是如何将博客改造成一个PWA应用-原创手记-慕课网

课程推荐：
本文向您推荐了慕课网的专栏课程《从0到1 实战朋友圈移动Web App开发》（立即学习），希望小伙伴们能通过这门课程收获满满，祝大家学习进步。

本文将介绍一下如何借助PWA技术，将博客保存到桌面功能，首先我们需要对PWA扫盲。
随着互联网技术的发展，web应用已经越来越流行，技术的发展越来越迅速，尤其是移动互联网的到来使得HTML5技术，hybrid混合开发，更加火爆起来，但是web应用没能摆脱PC时代的一些根本性的问题，所需的资源依赖网络下载，用户体验始终要依赖浏览器，这让web应用和Native应用相比尤其在移动手机端的体验，总让人感觉"不正规"，而PWA技术的到来，让下一代web应用终于步入正轨！

1. 什么是PWA？

图片描述

PWA(progressing web app)，渐进式网页应用程序，是Google在2016年GoogleI/O大会上提出的下一代web应用模型，并在随后的日子里迅速发展。
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

2. PWA的特点

渐进式：适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。
自适应：适合任何机型：桌面设备、移动设备、平板电脑或任何未来设备。
连接无关性：能够借助于服务工作线程在离线或低质量网络状况下工作。
离线推送：使用推送消息通知，能够让我们的应用像 Native App 一样，提升用户体验。
及时更新：在服务工作线程更新进程的作用下时刻保持最新状态。
安全性：通过 HTTPS 提供，以防止窥探和确保内容不被篡改。

对于我们移动端来讲，用简单的一句话来概况一个PWA应用就是，我们开发的H5页面增加可以添加至屏幕的功能，点击主屏幕图标可以实现启动动画以及隐藏地址栏实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能。
这些特点和功能不正是我们目前针对移动web的优化方向吗，有了这些特性将使得 Web 应用渐进式接近原生 App，真正实现秒开优化。

3.Service Worker介绍

Service Worker 是一个基于HTML5 API ， Web Worker 的基础上加上了持久离线缓存和网络代理能力，结合Cache API面向提供了JavaScript来操作浏览器缓存的能力，这使得Service Worker和PWA密不可分。

Service Worker概述：

一个独立的 worker 线程，独立于当前网页进程。
一旦被 install，就永远存在，除非被手动 unregister。
即使chrome（浏览器）关闭也会在后台运行。
必须在 HTTPS 环境下才能工作。
提供拦截浏览器请求的接口。

用到的时候可以直接唤醒，不用的时候自动睡眠

Service Worker生命周期：

注册（register）：这里一般指在浏览器解析到JavaScript有注册Service Worker时的逻辑，即调用navigator.serviceWorker.register()时。
安装中( installing )：这个状态发生在 Service Worker 注册之后，表示开始安装。
安装后( installed/waiting )：Service Worker 已经完成了安装，这时会触发install事件，在这里一般会做一些静态资源的离线缓存。
激活( activating )：在这个状态下没有被其他的 Service Worker 控制的客户端，允许当前的 worker完成安装，并且清除了其他的 worker 以及关联缓存的旧缓存资源，等待新的 Service Worker 线程被激活。
激活后( activated )：在这个状态表示Service Worker激活成功，会触发activate事件回调，在这里一般会清除上一个版本的静态资源缓存，或者其他更新缓存的策略。这代表Service Worker已经可以处理功能性的事件fetch (请求)、sync (后台同步)、push (推送)，message（操作dom）。
废弃状态 ( redundant )：这个状态表示一个 Service Worker 的生命周期结束。

图片描述

Service Worker支持的事件：

图片描述

Service Worker浏览器兼容性：

图片描述
Service Worker作为一个新的技术，那么就必然会有浏览器兼容性问题，从图上可以看到对于大部分的Android来说支持性还是很不错的，尤其是chrome for Android，但是对于iOS系统而言11.3之前是不支持Service Worker的，这可能也是Service Worker没能普及开来的一个原因，但是好消息是苹果宣布后续会持续更新对Service Worker的支持，那么前景还是很值得期待的。

4. 开始改造我们的博客应用：

使用此功能，我们首先需要满足一些条件：

使用PC端的Chrome，45版本以上。
如果是window操作系统，需要在chrome://flags/里面将Desktop PWAs开启，如果是mac系统，则不需要。

图片描述

完成上面操作时候，就可以开始改造了，先看下我们的改造效果：

在Chrome地址栏chrome://apps/，或者是桌面双击图标：
图片描述
双击打开之后效果如下：

添加manifest.json配置页面参数：

添加到桌面快捷方式功能本身是PWA应用的一部分，他让我们的应用看起来更像是一个Web App，我们在博客的根目录文件夹下新建manifest.json文件：

{
	"name": "吕小鸣",
	"short_name": "吕小鸣",
	"icons": [{
		"src": "https://avatars2.githubusercontent.com/u/7931760?s=192&v=4",
		"type": "image/png",
		"sizes": "192x192"
	}],
	"start_url": "/",
	"scope": "/",
	"display": "standalone",
	"background_color": "#181818",
	"theme_color": "#181818"
}

然后，需要将manifest.json文件在html中进行引入：

<link rel="manifest" href="manifest.json">

添加sw.js：

由于我们这次只需要简单的将安装桌面功能引入，所以这个sw.js可以暂时先简单的监听fetch事件，代码如下：

self.addEventListener('fetch', function (e) {

    console.log('现在正在请求：' + e.request.url);

});

然后，我们需要在index.html里面把Service Worker注册进来：

<script type="text/javascript">

if ('serviceWorker' in navigator) {
  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)
      })
  })
}
</script>

运行博客查看效果

我们可以首先通过Chrome的右上角的选项，会出现一个安装的选项，效果如下：
图片描述

点击安装后，会出现确认安装弹窗，如下图：
图片描述

点击安装之后，我们的博客项目就可以在桌面双击打开啦！

自定义PWA应用弹窗

如果按照上面的操作，你的应该是支持PWA的，然是用户访问你的博客并不知还可以通过右上角更多选项，将你的博客安装到本地，所以我们可以通过自定义弹窗来实现这个效果。

首先将弹窗的UI用html和css进行实现，代码如下：

<div class="pwa-tips" id="pwaTips">
	吕小鸣的前端博客正在使用PWA，是否安装到桌面？
	<span id="closepwaTips" class="close">x</span>
</div>

然后，借助beforeinstallprompt事件，我们可以判断当前浏览器是否安装过当前域名的PWA应用，代码如下：

var dfdPrompt = null;
window.addEventListener('beforeinstallprompt', function (e) {

    // 存储事件
    dfdPrompt = e;
    // 显示按钮
    $('pwaTips').show();

    // 阻止默认事件
    e.preventDefault();
    return false;
});

然后，我们给pwaTips绑定click事件，来触发安装操作，代码如下：

pwaTips.addEventListener('click', function (e) {
    if (dfdPrompt == null || e.srcElement.classList.contains('close')) {
        return;
    }
    // 通过按钮点击事件触发横幅显示
    dfdPrompt.prompt();
    // 监控用户的安装行为
    dfdPrompt.userChoice.then(function (choiceResult) {
        // 这里可以获取到用户点击的结果，我们默认用户都是同意安同装的

    });
    // 隐藏tip
    $('pwaTips').hide();
    dfdPrompt = null;
});

Ok，这样我们就完成了自定义PWA的提示弹窗，当然具图的UI你可以自定义，效果如下：
图片描述

用户点击之后，就会出现上一步的弹窗，我们的自定义UI就完成啦。

5. 结语：

到此，我们就将博客改造成了一个简单的PWA应用，如果我们在sw.js里面在多些一些逻辑，例如缓存文件等等，那么就可以利用Service Worker的缓存，将项目改成一个真正的离线应用了。
当然，本文相关的知识点讲解还是比较简单，如果大家比较感兴趣，可以学习一下这篇专栏，绝对收获不浅～
图片描述