[PWA] Show Notifications when a Service Worker is Installed or Updated

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相关推荐

Service Worker
Service Worker 随着前端快速发展,应用的性能已经变得至关重要,关于这一点大佬做了很多统计.你可以去看看. 如何降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时是 ...
初识Service Worker
当下PWA比较火,而Service Worker是实现PWA的一项关键技术,今天我们一起了解下关于Service Worker的一些基础知识和适用场景. 什么是Server Worker 我们先来看一 ...
Safari支持Service Worker，PWA还有多久爆发？
作者 | 彭星编辑 | 尾尾在之前的文章<PWA 将带来新一轮大前端技术洗牌?>中,我们回顾了 Web 在移动时代遭遇的两大枷锁,并就PWA是否能真正弥补 Web 劣势进行了分析,同时 ...
PWA进阶：Service Worker一问一答
PWA的核心在于Service Worker,目前中文社区中关于Service Worker的知识深度普遍不够,难以应对实际项目中的问题.例如我想要知道在卸载sw(下文简称sw)后需不需要手动清理ca ...
PWA之 Service worker
渐进式 Web 应用(Progressive Web Apps,也被称为 PWAs)是 Web 技术方面一项令人兴奋的创新.PWA 混合了多项技术,能够让 Web 应用的功能类似于原生移动应用.它为开 ...
PWA 应用 Service Worker 缓存的一些可选策略和使用场景
SAP 电商云 Spartacus UI 提供了将站点作为 PWA 运行的功能. 这提高了用户性能,改善了用户体验,因为它添加了另一个缓存层,并减少了服务器端渲染 (SSR) 服务的负载. PWA 的 ...
PWA - service worker - Workbox（未完）
Get Started(开始) 只有get请求才能cache缓存吗? Create and Register a Service Worker File(创建和注册 Service Worker) B ...
Service Worker ——这应该是一个挺全面的整理
我在之前有空的时候粗略学习了一下 Service Worker :最近有空,所以花时间再去学习了下.我在这里整理了下,希望对大家有帮助. 同时,如果文章中有错误或者描述不当的地方,欢迎大家能够帮我指正 ...
Service Worker的基本使用
环境准备安装http-server npm install -g http-server 准备index.html <head> <title>Minimal PWA&l ...

[PWA] Show Notifications when a Service Worker is Installed or Updated

[PWA] Show Notifications when a Service Worker is Installed or Updated相关推荐

最新文章

热门文章