带您一步一步开发一个PWA技术的web app离线应用

带您一步一步开发一个PWA技术的web app离线应用

一、PWA是什么？

随着app的泛滥，技术人员在创求一种新的技术让app开发更快，更新更快，成本更低，他们看上了html5，但是html5在制作web app的过程中有以下问题：

1、留白时间过长。移动端网络非常不稳定，经常会出现弱网环境，这样会导致资源加载速度非常慢，留白时间相对原生会慢很多。

2、没网络就没响应，不具备离线能力，以前只有App能（大量缓冲优化），h5的缓存用的极少。因为资源都在线上服务器,每次访问H5的页面强烈依赖网络，原生因为资源都在应用包里面,就算断网也会给一个相对友好的展示界面和用户提醒。

3、无法全屏访问。H5绝大部分都是跟浏览打交道，但是各大浏览器厂商都会有一个讨厌的头部和一个讨厌的尾部，导致用户的可视区域大大被压缩。原生大家都知道可视区域随意控制。

4、不像APP一样能进行消息推送。

5、手机桌面入口不够便捷，没有自己的启动图标，每次都需要输入网址或者依靠搜索引擎引流。

如果解决以上问题，那么h5将是是远程app开发的一种颠覆，2017年谷歌退出了PWA技术。

PWA全称progressive web app，其核心主要有3块，Manifest、Service Workers和storage

Service Workers是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。这个 API 之所以令人兴奋，是因为它可以支持离线体验，让开发者能够全面控制这一体验。

Service Workers要点：

它是一种 JavaScript 工作线程，无法直接访问 DOM。 服务工作线程通过响应 postMessage 接口发送的消息来与其控制的页面通信，页面可在必要时对 DOM 执行操作。

服务工作线程是一种可编程网络代理，让您能够控制页面所发送网络请求的处理方式，他可以拦截浏览器请求，将资源缓存在浏览器中，离线模式下任然可以访问资源，非常方便，看看下图

要安装服务工作线程，您需要通过在页面中对其进行注册来启动安装。 这将告诉浏览器服务工作线程 JavaScript 文件的位置。

二、bfwstudio中创建一个PWA应用

注意，pwa的应用必须在https或localhost本地下才能执行，本文使用在线webide开发工具bfwstudio，在线使用https进行开发

1、注册一个bfw的社区账号，http://www.bfw.wiki/

2、登录后打开bfwstudio for html，http://studio.bfw.wiki/Studio/Open/lang/html.html

3、新建一个空白项目，取名pwademo

4、首先在根目录下新建一个serviceworker.js，插入一下代码

const version = 'offline-cache-v2'

// Serverice Worker 安装成功后触发该事件
self.addEventListener('install', function (event) {
    // sw.js 有更新，立即生效
    event.waitUntil(self.skipWaiting());
});

// sw.js 有更新时触发该事件
self.addEventListener('activate', function (event) {
    event.waitUntil(
        Promise.all([
            // 更新客户端
            self.clients.claim(),

            // 删除旧版本的缓存对象
            caches.keys().then(function (cacheList) {
                return Promise.all(
                    cacheList.map(function (cacheName) {
                        if (cacheName !== version) {
                            return caches.delete(cacheName)...

点击查看剩余70%