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();
        })
      });
    };
  • 相关阅读:
    利用idea的code inspect功能进行代码静态分析
    AntiSamy测试
    常用git命令
    node 常用命令
    java中byte[] 和16进制字符串互转
    使用idea的条件断点快速定位注解的处理类
    使用数组初始化list
    django连接Mysql数据库
    20分钟快速用django+mysql+pycharm搭建一个自己的web网站学习笔记
    随便谈谈------关于django学习笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5500157.html
Copyright © 2011-2022 走看看