zoukankan      html  css  js  c++  java
  • [PWA] 10. Trigger a version update

    When the refersh button is clicked, we need to tell the waiting service worker to replace the current service worker right away. Then we refresh the page load the latest cache from the new cache db. 

    There are three new components to help:

    Service worker can all skipwaiting() while it is "waiting" or "installing".

    self.skipWaiting()

    Then the waiting service worker should take over right away.

    So we want to call it function when user click refresh button in the notification.

    Then how can we send the signal from our page to waiting servcie worker?

    // from a page:
    reg.installing.postMessage({foo: 'bar'});
    
    // in the service worker:
    self.addEventListener('message', function(event){
        event.data; // {foo: 'bar'}
    })

    The page gets event when the value chanages, means a new service worker take over, we will use this as a signal to reload our page:

    navigator.serviceWorker.addEventListener('controllerchange', function(){
        // navigator.serviceWorker.controller has changed
    })

    --------------------------------------------------------

    Our page: send single to service worker ask it to reload:

    IndexController.prototype._updateReady = function(worker) {
      var toast = this._toastsView.show("New version available", {
        buttons: ['refresh', 'dismiss']
      });
    
      toast.answer.then(function(answer) {
        if (answer != 'refresh'){
          // tell the service worker to skipWaiting
          worker.postMessage({message: 'skipWaiting'})
        }
    
      });
    };

    Service worker: listen to the message event and call skilWaiting():

    // TODO: listen for the "message" event, and call
    // skipWaiting if you get the appropriate message
    self.addEventListener('message', function(event){
        if(event.data.message == "skipWaiting"){
            self.skipWaiting();
        }
    })

    The on our page, listen to controllerchange event, insdie load the page:

    IndexController.prototype._registerServiceWorker = function() {
      if (!navigator.serviceWorker) return;
    
      var indexController = this;
    
      navigator.serviceWorker.register('/sw.js').then(function(reg) {
        if (!navigator.serviceWorker.controller) {
          return;
        }
    
        if (reg.waiting) {
          indexController._updateReady(reg.waiting);
          return;
        }
    
        if (reg.installing) {
          indexController._trackInstalling(reg.installing);
          return;
        }
    
        reg.addEventListener('updatefound', function() {
          indexController._trackInstalling(reg.installing);
        });
    
        // TODO: listen for the controlling service worker changing
        // and reload the page
        navigator.serviceWorker.addEventListener('controllerchange', function(){
          window.location.reload();
        })
      });
    };
  • 相关阅读:
    WSS 3.0和MOSS 中的Web Parts
    WSS3.0 和 MOSS 的版本号小结
    设置firefox的默认google搜索.com而不是.hk
    wcf web service遇到"Could not load file or assembly App_Web..."问题
    ASP .NET readonly texbox 后台不能读取问题的解决办法
    2009年底泰国游总结
    把Silverlight的WCF service配置地址放到web.config中
    gvim编辑xml更新
    法意蜜月之旅总结
    法意蜜月之旅签证、交通、酒店篇
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5500157.html
Copyright © 2011-2022 走看看