PWA

一、PWA 简介

一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。
是 Google 在 2015 年提出,2016年6月才推广的项目。是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验。

PWA官网:https://developers.google.com/web/progressive-web-apps/

1.1 PWA关键技术

  • Service Worker (可以理解为服务工厂)
  • Manifest (应用清单)
  • Push Notification(推送通知)
  • Service Worker

1.2 浏览器支持:

顺便带一句:目前只能在 HTTPS 环境下才能使用SW,因为SW 的权利比较大,能够直接截取和返回用户的请求,所以要考虑一下安全性问题。 事件机制 功能(还是比较逆天的) 后台数据的同步 从其他域获取资源请求 接受计算密集型数据的更新,多页面共享该数据 客户端编译与依赖管理 后端服务的hook机制 根据URL模式,自定义模板 性能优化 消息推送 定时默认更新 地理围栏

1.3 生命周期:

  • Parsed (解析成功): 首次注册 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()方法被调用 ( ps: self 是 SW 中作用于全局的对象,这个方法根据英文翻译过来也能明白什么意思啦,跳过等待状态 )、用户已关闭 SW 作用域下的所有页面,从而释放了当前处于激活状态的 worker、超出指定时间,从而释放当前处于激活状态的 worker
  • Activated (激活成功):该状态,其成功接收了 document 全面控制的激活态 worker 。
  • Redundant (废弃):这个状态的出现时有原因的,如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看 一个很不错的全面介绍sw的教程:https://www.villainhr.com/page/2017/01/08/Service%20Worker%20%E5%85%A8%E9%9D%A2%E8%BF%9B%E9%98%B6

1.4 Manifest

Web App Manifest 是一个 W3C 规范,它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有:

  • 能够将你浏览的网页添加到你的手机屏幕上
  • 在 Android 上能够全屏启动,不显示地址栏 ( 由于 Iphone 手机的浏览器是 Safari ,所以不支持哦)
  • 控制屏幕 横屏 / 竖屏 展示
  • 定义启动画面
  • 可以设置你的应用启动是从主屏幕启动还是从 URL 启动
  • 可以设置你添加屏幕上的应用程序图标、名字、图标大小

1.5 Push Notification

Push 和 Notification 是两个不同的功能,涉及到两个 API 。

  • Notification 是浏览器发出的通知消息。
  • Push 和 Notification 的关系,Push:服务器端将更新的信息传递给 SW ,Notification: SW 将更新的信息推送给用户。

二、PWA 注册

2.1 添加注册事件

在网页中添加如下内容:

<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.2 添加 PWA 应用清单信息

在网页头部加入:

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

然后在同一目录下新建 manifest.json 文件如下:

{
    "name": "应用名称",
    "short_name": "应用名称",
    "display": "standalone",
    "icons": [
        {  "src": "/512.png", "type": "image/png", "sizes": "512x512"  },
        {  "src": "/256.png", "type": "image/png", "sizes": "256x256"  },
        {  "src": "/128.png", "type": "image/png", "sizes": "128x128"  },
        {  "src": "/_64.png", "type": "image/png", "sizes": "64x64"  }
    ],
    "start_url": "/",
    "background_color":"#F9F9F9",
    "theme_color": "#3A3F51"
}

注:以上信息根据实际情况修改。

三、Service Worker 配置

3.1 Service Worker 简单配置参考模板

在网页同目录新建 sw.js 文件如下:

//缓存空间名称
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) {});

注:以上为只缓存已定义的文件,不缓存其他。

3.2 Service Worker 更多缓存策略

3.2.1 不缓存策略

注:其余配置与上文简单配置内容一致,此策略与上文一致。

//不缓存策略
self.addEventListener('fetch', function(event) {});

3.2.2 总是更新策略

注:其余配置与上文简单配置内容一致,仅需将 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;
      });
    })
  );
});

3.2.3 先缓存后更新策略

注:其余配置与上文简单配置内容一致,仅需将 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;
      })
    })
  );
});

3.2.4 最佳策略

这里,我们简单的通过文件类型这个点来进行划分,优先情况是缓存 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);
          })
    })
  )
});

更多文档请参阅官方网站。

最后修改:2020 年 03 月 28 日 04 : 40 PM
如果觉得我的文章对你有用,请随意赞赏