service worker learn

gistfile1.txt

//Service Worker实现离线应用
//app.js
if(navigator.serviceWorker){
  navigator.serviceWorker.register('sw.js',{
    scope:'/'
  }).then(function(reg){
    console.log(reg);
  }).catch(function(e){
    console.log(e);
  })
}else{
  console.log("No supported");
}

//sw.js
self.addEventListener('install',function(event){
  event.waitUntil(
    caches.open('app-v1')
    .then(function(cache){
      console.log('open cache');
      return cache.addAll([
        './app.js',
        './index.html'
      ])
  }));
})

self.addEventListener('fetch',function(event){
  event.respondWith(
    caches.match(event.request)
    .then(function(res){
      if(res){
        return res;
      }else{
        //fetch请求网络
        fetch(url).then(function(res){
          if(res){
            //对于新请求到的资源进行存储
          }else{
            //用户提示
          }
        })
      }
  }));
})

gistfile2.txt

//Service Worker实现页面间通信
//msgapp.js
if(navigator.serviceWorker){
  var sendBtn=document.getElementById('send-msg-button');
  var msgInput=document.getElementById('msg-input');
  var msgBox=document.getElementById('msg-box');
  
  sendBtn.addEventListener('click',function(){
    //主页面发送信息到service worker
    navigator.serviceWorker.controller.postMessage(msgInput.value);
  })
  
  navigator.serviceWorker.addEventListener('message',function(event){
    msgBox.innerHTML+=('<li>'+event.data.message+'</li>');
  })
  
  navigator.serviceWorker.register('msgsw.js',{
    scope:'/'
  }).then(function(reg){
    console.log(reg);
  }).catch(function(e){
    console.log(e);
  })
}else{
  console.log("No supported");
}

//msgsw.js
self.addEventListener('message',function(event){
  var promise=self.clients.matchAll().then(function(clientList){
    var sendID=event.source?event.source.id:'unknown';
    clientList.forEach(function(client){
      if(client.id==sendID){
        return;
      }else{
        client.postMessage({
          client:senderID,
          message:event.data
        })
      }
    })
  });
  event.waitUntil(promise);
})