当前位置:首页 > 博客 >Javascript > 正文

serviceWorker之初体验

时间:2018-08-29 14:42   作者:admin   点击:

第一次听说serviceWorker是在一次分享会上,主要是因为PWA应用(渐进式应用)中,实现离线

自己花时间研究一下,还有个前提就是serviceWoker必须在https中实现

具体介绍:

简书

首先我们在页面上注册serviceWorker

if (navigator.serviceWorker != null) {
    // 使用浏览器特定方法注册一个新的service worker
    navigator.serviceWorker.register('sw.js')
        .then(function(registration) {
            window.registration = registration;
            console.log('Registered events at scope: ', registration.scope);
        }).catch(function(err) { console.log(err) });;
}

这里需要注意的是sw.js文件路径,如果你引入是'/a/sw.js',那么serviceWorker只会监听到'http://域名/a'这个路由下的所有请求

var cacheName = 'v1';
var assetsToCache = [
  '/work/css/style.css',
  '/work/images/bg.jpg',
  '/work/images/img_verification_name.jpg',
  '/work/js/flexible.js',
  '/work/js/jquery-2.2.4.min.js'
];

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(assetsToCache);
    }).then(function() {
      return this.skipWaiting();
    })
  );
})

this.addEventListener('fetch', event => {
//fetch事件在安装成功后,离线请求时响应,在线时,若请求的资源再serviceworker中,则走200 OK (from ServiceWorker),离线时也是这个状态码

  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              // return caches.match();
        })
     );
  }
  else{
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

结果:

TIM截图20180829140525.png


当然还有复杂的用法,比如利用这个实现增量更新等等