前端 PWA?

什么是PWA

MDN官网对PWA有很明确的定义

Progressive web apps (PWAs) take traditional web sites/applications — with all of the advantages the web brings — and add a number of features that give them many of the user experience advantages of native apps. 

简单地翻译过来就是:PWA像传统的web app一样,但是它更优秀。

PWA是Google推出的技术,你可以在这里找到更为详细的资料。或者前往MDN查看文档。

PWA准备知识

PWA是全新的内容,它不仅仅是全新的API那么简单,更为重要的是,它引入了一系列全新的标准和语法作为基础。在学习PWA之前,你需要保证你已经熟练使用以下的内容:

  1. ES6标准语法
  2. Promise标准,这是最为重要的知识点,如果你还不熟或者没听说过,那么你得好好思考一下了
  3. fetch,全新的获取资源的API,它包括Request、Response、Header和Stream
  4. WebWorker,JavaScript解决单线程的方案
  5. Cache API(缓存API)

PWA的很容易犯错的地方

PWA在线上部署的时候,请确保是在HTTPS下面,而非HTTP。当然,为了便于开发,浏览器支持localhost上面部署。

PWA完成缓存后,很多时候你会发现代码无法变动,或者没有按照预期的那样自动更新worker,这时候不妨在清除缓存试试。

PWA并非支持所有浏览器,事实上,很少浏览器默认支持PWA。这方面Chrome和FireFox做得比较好,因此本文采用Chrome作为开发工具。

一些准备

首先,让我们先来一些简单的准备工作。PWA需要一个服务器,我们使用Koa简单地搭建一个服务器。 首先,创建开发目录,并初始化一些文件:

mkdir pwa-test
cd pwa-test
touch index.html
touch index.js
touch sw.js

// 服务器脚本
touch server.js

// 初始化nodejs项目目录,一路回车
npm init

接着安装一些开发使用的包

npm install koa koa-static --save-dev
//或者
yarn add koa koa-static --dev

接着,我们在server.js里面写入下面这段简单的代码:

const Koa = require('koa');
const Static = require('koa-static');
const path = require('path');  

const app = new Koa();
const staticPath = './';

app.use(Static(path.resolve(__dirname, staticPath)));

app.listen(8080);

然后在index.html里面写入简单的一些内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PWA TEST</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

开始PWA之旅

service worker

PWA最重要的一个部分,service worker。它和传统的Worker相似但又不同。操作Service Worker的方法很简单,只需要简单的register一下。我们接下来介绍一下具体使用。

首先是检测是否支持service worker

// index.js
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(reg => {
        console.log('service worker registed!');
    }).reject(err => {
        console.log('Opooos, something wrong happend!');
    })
}

window.onload = function() {
    document.body.append('PWA!')
}

这段代码使用了Promise,当你register一个文件的时候,它会返回一个Promise。值得注意的是,register接收的文件并非相对于当前文件所在路劲的路劲,而是根路径的相对路径。换句话来说,如果你的pwa应用在https://www.example.com/pwa上运行,那么你register的sw.js并非是./sw.js,而应该是/pwa/sw.js

现在我们已经注册了一个service Worker,但是它还没有任何内容。接着我们在sw.js写入以下代码:

// sw.js
self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/index.js',
                '/index.html',
                '/'
            ]);
        })
    );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
        .then(function (response) {
            // 检测是否已经缓存过
            if (response) {
                return response;
            }

            var fetchRequest = event.request.clone();

            return fetch(fetchRequest).then(
                function (response) {
                    // 检测请求是否有效
                    if (!response || response.status !== 200 || response.type !== 'basic') {
                        return response;
                    }

                    var responseToCache = response.clone();

                    caches.open('v1')
                        .then(function (cache) {
                            cache.put(event.request, responseToCache);
                        });

                    return response;
                }
            );
        })
    );
});

self在Worker里面相当于Global,这里我们注册了两个事件:installfetch。这两个事件分别对应的是service Worker安装以及下载文件的时候时候调用。

首先是install,当你register一个文件之后,install会被调用,它意味着这个文件要被安装到service Worker中去了。install事件的event里面有个waitUntil的函数,它接收一个Promise作为参数。它保证了在传入的Promise执行完之后才完成安装。

waitUntil里面,我们使用了caches。这是一个全局变量,我们使用open打开一个缓存,我们假设这个缓存库叫做v1,如果没有,它会自动创建。

caches.open('v1')同样返回一个Promise,它的回调函数接收一个cache,也就是对应的缓存库。接着,我们使用addAll添加了/index.js/index.html这两个文件。记住,cache上的操作应该返回,不然waitUntil接收不到什么时候完成安装的指令。

另一个事件fetch是做什么用的呢?它会’拦截‘网页的fetch请求。这样一来,我们就可以拦截网页的部分或者全部fetch请求,然后看看这些请求所请求的文件在我们的缓存里有没有,有的话就直接从缓存里拿,不用下载了。这也是PWA最重要的功能之一。

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
        .then(function (response) {

            if (response) {
                return response;
            }

            var fetchRequest = event.request.clone();

            return fetch(fetchRequest).then(
                function (response) {

                    if (!response || response.status !== 200 || response.type !== 'basic') {
                        return response;
                    }

                    var responseToCache = response.clone();

                    caches.open('v1')
                        .then(function (cache) {
                            cache.put(event.request, responseToCache);
                        });

                    return response;
                }
            );
        })
    );
});

首先,当产生fetch请求时,fetch事件被调用。fetch事件的event里面同样有一个特殊的属性,那就是request。和nodejs里面的那个request类似,它代表了一个请求。

我们首先在缓存里查找这个request以前存过没有,调用了match函数,它返回一个Promise,这个Promise成功时调用一个response作为参数的回调函数。如果在缓存里找到了请求对应的文件,那么response不为undefined,那么直接返回就行了。

但是问题来了,我们怎么告诉主线程:“这个文件下载过,我的cache里面有,直接来拿就行了”。event里面还有个方法,是event.respondWith的方法。它接受一个Promise作为参数,这个Promise的成功回调应该是一个response

如果没有找到,那么就需要从服务器下载下来,当然,我们同样也希望把这个文件加入缓存,免得每次都下载。

我们使用fetch而非ajax的重要原因是,fetch天然的支持RequestResponse,并且是使用的Promise。这和service Worker是一套的。

fetch接收一个request作为请求,并且在回调函数里面返回这个请求的response

值得注意的是,requestresponse都是流,和nodejs的Stream类似。因此如果我们直接把event.request传给fetch,那么request就不能复用了。于是我们复制一个request来请求,这样就能复用了。当请求成功的时候(fetch的请求成功并不等于是得到了数据,和ajax不同,只有当出现错误导致这次请求失败的时候,才不是成功的。其余情况,就算请求到的是404,也算成功),我们判断下response有没有收到东西,并且是200成功的,另外不能是跨域获得的(也就是response.type == 'basic')。

好了,现在从服务器得到了这个响应了,我们只需要把它加入我们的缓存里面就行了。这里我们调用了cache.put来缓存这个请求的响应。

最后,一定不要忘记,返回这个response!并且为了复用,返回的应该是clone后的!因为event.respondWith需要告诉主线程:“这个请求我们已经拿到了(不管是从缓存中拿到的还是从服务器拿到的),你接受这个响应就行了!”

万事俱备

我们现在都准备好了,让我们看看能不能运行。打开终端,运行服务器脚本

nodejs ./server.js

打开localhost:8080,不出意外你应该能看见PWA!

现在,我们停止服务器脚本,再次刷新页面。页面上应该同样会显示PWA!

一些问题

  1. 怎么更新service Worker呢?

    很简单,你只需要更改sw.js就行了,它会在下次联网时主动检测并进行比对,如果不同,那么会重新安装。

  2. 怎么更新缓存后的脚本或文件呢?

    这需要你自己手动的检测了,你可以开发一个检测更新的接口,然后手动的再次请求并更新部分文件

  3. 有没有什么成功的案例可以借鉴呢?

    有,用chrome打开Vue中文官网,会提示你加入桌面,同意之后,你就会发现pwa的神奇之处了。

  4. 我的PWA怎么手机上不支持?

    你需要安装chrome或者Firefox,并且授予它一些基本的权限,比如允许创建桌面图标

  5. 看起来pwa没有什么啊,不就是允许离线访问了吗?

    No!pwa可不止这些内容哦!pwa甚至可以调用一些原生APP才可以调用的接口,也可以像原生的APP那样推送消息哦!

  6. 太棒了,我怎么继续学习呢!

    你有两个选择,MDN上有文档,但是简体中文没有,只有繁体中文。PWA官网,需要科学上网。



掘金


与本文有关的文章

express/ multer 上传图片文件 html图片延迟加载 一段奇葩Javascript代码引发的思考 JavaScript两个变量交换值(不使用临时变量) ES6中Math对象的部分扩展 JavaScript中为什么string可以拥有方法? 前端js中经常出现的算法总结 canvas粒子瀑布 canvas纺纱飘带 JavaScript求最长公共子串 JavaScript中的__proto__ JS判断访问设备或型号 js获取url?后的参数 js键盘keyCode对照表 页面鼠标滚动事件 对象克隆或拷贝不是赋值 URL参数含有中文出现乱码 es6常用的的语法大集合 js中的this关键字 js中实现 a*寻路算法 js中用 '==' 还是 '===' web性能优化 reflow(回流)与repaint(重绘) 7年前端大神总结出的js经验 scroll事件常用到的场景,以及判断 js中深度拷贝与浅拷贝 requirejs基础知识 判断参数是什么类型?array?object? 有趣的js基础选择题 js中哪些值能作为if的条件,if使用小技巧 js中键盘按下事件keydown js中的!function到底是什么意思? AMD与CMD的区别到底在哪? Array与Math属性 方法一览 js中的栈与堆 jquery为动态添加生成的元素添加绑定事件 delegate 自己常用的正则(regexp)整理 57秒读完《10 分钟学会 JavaScript 的 Async/Await》 最简单的数组去重 js中数字调用方法 jq或者原生js动态加载js文件方法 个人常用封装的js插件 select默认选中某个option 正则表达式提取cookie 原生ajax写法 js倒计时方法 js 时间戳相关操作方法 html关于页面跳转url带参数 indexOf,charAt,subString的简要区别 JS页面返回带参数或者保持原有位置 js中的钩子机制(hook) vue中的addClass removeClass &#x(unicode编码后的汉字)JS转译方法-nodejs爬虫转译乱码 es6/7 js数组深拷贝和数组合并方法 【html5】原生JS控制video的播放和暂停切换 前端 fetch 前端 PWA? js处理手机号|身份证中间替换成 * 号 js时间戳转换为本地时间 timestamp>localtime es6中 数组位置对换 js 数组对象循环各种方法以及性能对比 js实用黑科技之生产随机数 js加密之AES es6遍历对象方法 js删除字符串的的方法 JS中的Array长度最大可以设置为多少? html img加载失败的话替换成默认图片 图片压缩插件 lrz.bundle.js js手机号中间四位变成*号 javascript 到底要不要加分号 酷炫烟雾效果的前端js插件 waterpipe.js js稀奇古怪问题之指向 现代浏览器和触摸设备上重新排序拖放列表 - Sortable.min.js 一个监听键盘的js库 - hotkeys.js canvas操作图片合成 或文字叠加 并导出base64 字符转换-unicode <=> ASCII js删除某一个指定元素 禁止 百度ueditor过滤script link js正则效验金额最多两位小数 原生js获取元素offsetTop值不准确? 浏览器控制台跳过debugger 打乱数组顺序的两种方法 js 中的 bind介绍 原生js移除元素 document.removeElementById ?? js string进制互转 input 点击选择全部文本 点击全选 js点击复制input的值 JS/JQ获取各种屏幕的高度和宽度 闭包之[[Scopes]]属性 JS操纵html5 audio 播放以及暂停 原生js 给dom添加 onmouseenter ontouchstart 事件 Js charCodeAt fromCharCode parseInt js位操作教程 js byte[] 和string 相互转换 UTF-8 data URI 转 image data 原生JS实现 addClass removeClass hasClass JS实现为动态添加的元素增加事件 js查找页面中alert弹窗位置 JS实现Jquery的addClass,removeClass,changeClass,toggleClass HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换 JavaScript如何转换二进制数据显示成图片 Uint8Array转成可用的imgurl es6数组快速删除指定元素 支付宝小程序与微信小程序的不同点对比 JS数组按数字的大小排序 js对象数组按照对象属性排序 js点击按钮播放音乐
回到顶部