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();
        })
      });
    };
  • 相关阅读:
    VBOX虚拟化工具做VPA学习都很方便硬件信息完全实现真实模拟
    Dynamics CRM2016 使用web api来创建注释时的注意事项
    Dynamics CRM build numbers
    域控制器的角色转移
    辅域控制器的安装方法
    利用QrCode.Net生成二维码 asp.net mvc c#
    给现有的word和pdf加水印
    利用LogParser将IIS日志插入到数据库
    短文本情感分析
    Dynamics CRM Ribbon WorkBench 当ValueRule的值为空时的设置
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5500157.html
Copyright © 2011-2022 走看看