Service Workers get installed and activated in the background, but until we reload the page they don’t take full control in the app. Showing a notification is a good way to let the user know that there is a new version of the app.

In this lesson I’ll show you how you can show a notification when a new service worker is installed and activated.

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(reg => {
reg.onupdatefound = () => {
const sw = reg.installing; sw.onstatechange = () => {
if (sw.state === 'installed') {
if (navigator.serviceWorker.controller) {
app.message = 'New version is available. Reload to activate it.'
app.show=true
} else {
app.message = 'Content is now available offline'
app.show=true
}
}
}
}
})
}

[PWA] Show Notifications when a Service Worker is Installed or Updated的更多相关文章

  1. Service Worker

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

  2. Service Worker MDN英文笔记

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

  3. [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 ...

  4. [PWA] 2. Service worker life cycle

    Once serive worker is registered, the first time we go to the app, we cannot see the logs from servc ...

  5. [PWA] 1. Intro to Service worker

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

  6. PWA - service worker - Workbox(未完)

    Get Started(开始) 只有get请求才能cache缓存吗? Create and Register a Service Worker File(创建和注册 Service Worker) B ...

  7. Service Worker和HTTP缓存

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

  8. JavaScript是如何工作的:Service Worker的生命周期及使用场景

    摘要: 理解Service Worker. 原文:JavaScript 是如何工作的:Service Worker 的生命周期及使用场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...

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

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

随机推荐

  1. favourite和favorite的区别

    同一个词,英式和美式的拼写法而已.通常英式英语里的-our-字母组合,到了美式英语里面都成了-or-字母组合,最常见的有英式的 colour,到美式英语成了 color.

  2. 亚马逊EC2构建代理服务器心血历程

    1.亚马逊上申请一台免费的EC2服务器,有相应的教程,绑定信用卡,预支付1美元,据说可以退回(防止到期后直接扣款,支付后通过修改卡信息,但好象有提示了,说卡不对了,也不管它了,到期后再说,美国人也不是 ...

  3. html5——过渡

    transition:1.开始状态   2.终止状态    3.过渡属性 transition: width 2s, background-color 2s;//属性,时间 transition: a ...

  4. html——行内元素、块元素、行内块元素

    行内元素:span  ,a,  ,strong , em,  del,  ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...

  5. 【sqli-labs】 less52 GET -Blind based -Order By Clause -numeric -Stacked injection(GET型基于盲注的整型Order By从句堆叠注入)

    出错被关闭了 http://192.168.136.128/sqli-labs-master/Less-52/?sort=1' http://192.168.136.128/sqli-labs-mas ...

  6. Python操作数据库及hashlib模块

    一.hashlib模块 hashlib模块,主要用于加密相关的操作,在python3的版本里,代替了md5和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA51 ...

  7. 常见的CPU指令集介绍

    本文摘自网络   一.X86 是微处理器执行的计算机语言指令集,指一个intel通用计算机系列的标准编号缩写,也标识一套通用的计算机指令集合,属于CISC. 1.1.简介 X86指令集是美国Intel ...

  8. iptables详解(2):iptables实际操作之规则查询

    所属分类:IPtables  Linux基础 在阅读这篇文章之前,请确保你已经阅读了如下文章,如下文章总结了iptables的相关概念,是阅读这篇文章的基础. 图文并茂理解iptables 如果你是一 ...

  9. jquery操作元素之间相邻的元素的获取方式

    <!DOCTYPE html><html> <head> <style> .siblings * { display: block; border: 2 ...

  10. hdu 4018 Parsing URL(字符串截取)

    题目 以下引用自百度百科: sscanf 的相关用法 头文件:#include<stdio.h>     1. 常见用法. 1 2 3 charbuf[512]; sscanf(" ...