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();
        })
      });
    };
  • 相关阅读:
    JSON以及Java转换JSON的方法(前后端经常使用处理方法)
    让cocos2dx支持并通过arm64 编译
    matlab7安装后的常见问题
    Open SSH原理
    Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization
    12C -- 配置EM Express的端口
    ORA-16179: incremental changes to "log_archive_dest_1" not allowed with SPFILE
    ORA-16019: cannot use LOG_ARCHIVE_DEST_1 with LOG_ARCHIVE_DEST or LOG_ARCHIVE_DUPLEX_DEST
    11g新特性-SQL Plan Management
    11g新特性-自动sql调优(Automatic SQL Tuning)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5500157.html
Copyright © 2011-2022 走看看