云+社区翻译社腾云阁「腾讯云的1001种玩法」征文活动腾讯云

PWA的探索与应用

2019-01-11  本文已影响2人  a3aac2d1b674

本文由云+社区发表

PWA（Progressive Web App）起源背景

传统的Web网页存在以下几个问题：

Native app：

PWA概念的提出

2016 年Google I/O 大会上提出一个 Next Web Generation 的概念。PWA是在传统Web应用的基础上，结合Manifest和service worker，完善Web应用的一些能力，比如：

PWA技术点

Web App Manifest

Web App Manifest 技术实现了将PWA网页应用 添加至桌面的功能，但该项技术目前仍处于实验性阶段，各浏览器支持度不高

img

image.png

PWA 站点部署的 manifest.json文件满足以下条件时会自动显示横幅：

- short\\_name （主屏幕显示）
- name （安装横幅显示）
- icons （必须包含一个 mime 类型为 image/png 的图标声明）
- start\\_url （应用启动地址）
- display （必须为 standalone 或 fullscreen）
- 站点注册 Service Worker。
- 站点支持 HTTPS 访问。
- 同一浏览器中站点至少被访问两次，间隔至少为 5 分钟。

Service Worker

​ PWA应用的离线体验、定期的后台同步以及推送通知等功能的实现依赖于Service Worker技术，下图为目前SW技术的支持度。

img

SW具有以下特征：

Service Worker生命周期

img

Service Worker 支持的事件

img

Service Worker 的工作原理

Service Worker是基于注册、安装、激活等步骤

注册

if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
    navigator.serviceWorker.register('/jslearning/sw.js') // 默认作用域为jslearning下，也可以通过设置scope参数进行设置
        .then(function (registration) {
            // 注册成功
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        })
        .catch(function (err) {
            // 注册失败:(
            console.log('ServiceWorker registration failed: ', err);
        });
});
}

安装

this.addEventListener('install', function(event) {
  console.log('V1 installing…');
  //需要缓存的重要的高优先级资源
  var vipUrlsToPrefetch = [
'./index.html'
  ];
  //次重要的资源
  var urlsToPrefetch = [
'./icon.png'
  ];
  event.waitUntil(
caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
  //urlsToPrefetch非重要资源，即使有资源加载失败也不影响Service Worker安装
  cache.addAll(urlsToPrefetch);
  //vipUrlsToPrefetch中资源全部请求成功，Service Worker安装事件才顺利完成，可以进入激活事件
  return cache.addAll(vipUrlsToPrefetch);
})
  );      
});

激活

//Service Worker激活事件
this.addEventListener('activate', function(event) {
  //在激活事件中清除非当前版本的缓存避免用户存储空间急剧膨胀
  event.waitUntil(caches.keys().then(function(cacheNames) {
console.log('V1 activate');
return Promise.all(cacheNames.map(function(cacheName) {
    if (cacheName !== OFFLINE_CACHE_NAME) {
      if(cacheName.indexOf(OFFLINE_CACHE_PREFIX) != -1) {
        return caches.delete(cacheName);
      }
    }
}));
  }));
});

Service Worker更新

Service Worker缓存策略

​ Service Worker缓存策略大部分在fetch与install时间中定义，对于某些固定不变的静态资源，可以在Service Worker初次安装的install事件中将其缓存，但资源过大或者网络不佳都会造成资源并未全部下载成功而导致Service Worker安装被中断安装失败。SW主要有以下几类缓存策略：

// 渐进式缓存
var addToCache = function(req) {   
  return fetch(req.clone()).then(function(resp) {   
    var cacheResp = resp.clone();
    if (!resp.ok) {
      return resp;
    }
    caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
      cache.put(req.clone(), cacheResp);
    });
    return resp;
  });
};
 
this.addEventListener('fetch', function(event)  {
  event.respondWith(
     caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
          return cache.match(event.request);
      }).then(function(response) {
        if (response) {
            return response;
        } else {
            return addToCache(event.request);
        }
    })
  ); 
});

PWA应用可以通过开发者工具中的Application进行查看调试，如下图所示：

img

PWA优缺点总结

优点

缺点

PWA应用

参考文献

此文已由作者授权腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

上一篇 下一篇

猜你喜欢

热点阅读