1. Once serive worker is registered, the first time we go to the app, we cannot see the logs from servcie works. Any only refersh it second time, then we able to see the logs.

  2. Once we change service worker, it doesn't seem that we have change it.

The No1. is because, service worker only take control after it is loaded. But the first time we go to the page, service worker actually is not there, because, the browser need to fetch our assets, css, and Javascript fiels which include our sw.js. So that's why the first time we go to page, we didn't see the logs. But after we refresh the page, the sw.js is already cached. So the service worker can control from now on.

The No2. is because, once we change the code, it will check with service worker and if it is changed, it will become next version of serive worker. BUT it doesn't take control, it WATIS. It won't take control unitl all page use current version are gone. And a refresh doens't help, it because a overlap bewteen window client. Only you close the current page or naviagte to a page that isn't controlled by current service worker. When it does that, the new version of servie worker will take control.

So if you change the code a little bit:

self.addEventListener('fetch', function(event) {
  console.log("yo ",event.request);
});

And then close the current page, then open it again, you will see the new logs come out:

[PWA] 2. Service worker life cycle的更多相关文章

  1. [PWA] 9. Service worker registerion && service work's props, methods and listeners

    In some rare cases, you need to ask user to refresh the browsser to update the version. Maybe becaus ...

  2. 转《service worker在移动端H5项目的应用》

    1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术,也不是一个框架,我们可以把她理解为一种模式,一种通过应用一些技术将 Web App ...

  3. [PWA] 1. Intro to Service worker

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

  4. Service Worker和HTTP缓存

    很多人,包括我自己,初看Service Worker多一个Cache Storage的时候,就感觉跟HTTP长缓存没什么区别. 例如大家讲的最多的Service Worker能让网页离线使用,但熟悉H ...

  5. Service Worker

    Service Worker 随着前端快速发展,应用的性能已经变得至关重要,关于这一点大佬做了很多统计.你可以去看看. 如何降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时是 ...

  6. 浏览器缓存和Service Worker

    浏览器缓存和Service Worker @billshooting 2018-05-06 字数 6175 Follow me on Github 标签: BOM 1. 传统的HTTP浏览器缓存策略 ...

  7. Service Worker基础知识整理

    Service Worker是什么 service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本.它的特性将包括推送消息,背景后台同步, geofencing(地理围栏定位),拦截 ...

  8. Service Worker MDN英文笔记

    前言: 以前学习基础知识的时候总看别人写的入门文章,但有时候还是一脸懵逼,直到自己用心阅读了MDN的英文文档才对基础知识的一些理论有了更深的理解,所以我在边阅读文档的时候边记录下帮助比较大的,也方便大 ...

  9. Service Worker 离线无法缓存Post请求的问题解决

    许多非REST API甚至可以用于读取数据的POST请求:典型的例子是graphql.soap和其他rpcpapi.但是,Post请求不能在一个现成的渐进式Web应用程序中缓存和脱机使用.浏览器的缓存 ...

随机推荐

  1. python走起之第十一话

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  2. Windows Server 2016正式版14393英文版ISO镜像下载:_X64FRE_ZH-CN.ISO

    http://care.dlservice.microsoft.com/dl/download/F/8/3/F83C7D26-787A-4F43-82B0-7C7BF8A12791/14393.0.1 ...

  3. 用于JDBC操作数据库的公共类

    /* * @(#)CommonSql.java 2011-9-5 * * Copyright 2011 Bianjing,All rights reserved. */ import java.sql ...

  4. 【转载】Javascript中的this关键字

    看了这篇文章 http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html 分情况讨论. 情况一:纯粹的函数 ...

  5. 8款最受欢迎的HTML5/CSS3应用及源码

    新的一周开始,小编也将继续为大家分享精彩的HTML5应用,还有CSS3和jQuery方面的东西.今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧. 1.基于HTML5 Ca ...

  6. 传统IO与NIO区别二

    nio是new io的简称,从jdk1.4就被引入了.现在的jdk已经到了1.6了,可以说不是什么新东西了.但其中的一些思想值得我来研究.这两天,我研究了下其中的套接字部分,有一些心得,在此分享.  ...

  7. django连接已有的数据库

    以连接postgresql为例: 1.安装psycopg2,下载地址:http://www.stickpeople.com/projects/python/win-psycopg/ 2.配置setti ...

  8. 【HDOJ】1053 Entropy

    构造huffman编码,果断对字符进行状态压缩. #include <iostream> #include <cstdio> #include <cstring> ...

  9. 【PAT L2-001】最短路计数

    给定一个无向带权网络,无负边,无重边和自环,每个顶点有一个正数权值.首先求特定原点s到终点d的最短路的个数:然后求所有最短路中顶点权值a[i]之和最大的那条,输出这条路径. 可用dijkstra算法求 ...

  10. KNN邻近分类算法

    K邻近(k-Nearest Neighbor,KNN)分类算法是最简单的机器学习算法了.它采用测量不同特征值之间的距离方法进行分类.它的思想很简单:计算一个点A与其他所有点之间的距离,取出与该点最近的 ...