zoukankan      html  css  js  c++  java
  • [PWA] 1. Intro to Service worker

    Service worker stays between our browser and noetwork requests. It can help to fetch data from cache and cache the data from Internet.

    To get our service worker, we need to :

    1. Register the service worker.

    Service worker in our code is just a javascirpt file. 

    Once the page loaded, we want to register our serivce worker:

    IndexController.prototype._registerServiceWorker = function() {
      // TODO: register service worker
      if(!navigator.serviceWorker) return;  // Check whether service worker is available
      navigator.serviceWorker.register('/sw.js') // register the service worker, locate in ../sw/index.js
          .then( (reg) => {
              console.log("SW registered"); // success
          })
          .catch( (err) => {
              console.log("SW faild");  // Wrong
          })
    };

    In register() function, it can take second param, which is scope, for example:

      navigator.serviceWorker.register('/sw.js', {
             scope: '/foo/'
        })
          .then( (reg) => {
              console.log("SW registered");
          })
          .catch( (err) => {
              console.log("SW faild");
          })    

    SO service worker will available only in the '/foo/' scope and its child scope, such as: '/foo/bar', but NOT '/foo', so the ending '/' is very important. Normally, we don't need to add scope, we want our service worker listeren to the root scope, so it is available to all the child components.

    2. Our service worker file:

    // sw.js
    
    self.addEventListener('fetch', function(event) {
      console.log(event.request);
    });

    Once you fetch the page seond time (first time service work did cache stuff), second time you will see in the console, there are lots of requests log out.


    Of course, service worker have other event listeners:

    self.addEventListener('install', function(event) {
      // ..
    });
    
    self.addEventListener('activate', function(event) {
       // ..
    });
    
    self.addEventListener('fetch', function(event) {
      console.log(event.request);
    });

    [Notice] Service worker only works for HTTPS and localhost. 

    Reference: Link

  • 相关阅读:
    sublime text在Linux下build出现'ascii' codec can't decode byte 0xe4 in position 0的解决办法
    sublime text的verilog插件——verilog automatic
    Ubuntu Lucid Installation Guide
    vim之perlsupport的小修改
    python笔记
    sublime text中ctags使用注意事项
    2021年终总结
    wp7学习站点
    WPF中调用Winform控件
    Xen Cloud Platform 系列:NFS 存储库(四)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5495592.html
Copyright © 2011-2022 走看看