首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

PWA 的探索与应用

Service Worker PWA应用的离线体验、定期后台同步以及推送通知等功能的实现依赖于Service Worker技术,下图为目前SW技术的支持度。...activated:在这个状态可以处理功能性的事件 fetch (请求)、sync (后台同步)、push (推送)。...fetch :当浏览器在当前指定的 scope 下发起请求,会触发 fetch 事件,并得到传有 response 参数的回调函数。fetch 事件特别重要,因为它能够定义你的缓存策略。...也就是说,你可以决定何时使用缓存数据,何时使用网络请求来的数据。 push:push 事件是为推送准备的。...通过 PUSH API,当订阅了推送服务后,可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息,即使用户已经关闭了页面。

3.1K90

PWA - 令人惊奇的web用户体验新方法

被打开PWA 会展示一个有吸引力的闪屏。chrome 提供了可选选项,可以使 PWA 得到全屏体验。...安全:PWA使用https进行通信加密,防止了被第三方获取数据以及数据被篡改 推送:做到不打开网页的前提下,推送新的消息 可安装:能够将 Web像 APP 一样添加到桌面,可以主屏幕上创建图标 为什么是渐进式...一旦被 install,就永远存在,除非被 uninstall 可编程拦截代理请求和返回,缓存文件,缓存的文件可以被网页进程取到(包括网络离线状态) 能客户端推送消息 出于安全的考虑,必须在 HTTPS...环境下才能工作 异步实现,内部大都是通过 Promise 实 Service Worker 的缓存机制是依赖 Cache API 实现的 依赖 HTML5 fetch API 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求...如果你希望安装原生应用之前,提前体验功能和内容,轻量化的 PWA 应用会是一个非常不错的选择。 参考资料 浏览器兼容 manifest.json参数详解 Service Worker API

2.5K10
您找到你想要的搜索结果了吗?
是的
没有找到

Service Workers - JavaScript API 简介

除了使用本地开发环境调试(如域名使用 localhost) 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求 单独的作用域范围,单独的运行环境和执行线程 不能操作页面 DOM。...服务工作者启用以下功能,这些功能也是 PWA的核心: 离线功能 定期后台同步 推送通知 离线功能 Service Worke 通过缓存资源和拦截网络请求来提供离线功能,这些请求可以与先前缓存的资源一起使用...定期后台同步 正如在引言中已经提到的那样,Service Worker 与其他服务工作者一个单独的线程上运行,所以即使关闭页面,它们也可以执行其代码。 此功能对于执行后台同步和提供推送通知很重要。...例如,如果我要安排5个“message”类型的后台同步,则只有最后一个会通过。 因此,在这种情况下,每个标签都应具有唯一的标识符。 定期后台同步 定期后台同步解决与正常后台同步不同的问题。...该API可用于在后台更新数据,而不必等待用户。 这对很多应用程序都很有用。有了这项技术,用户可以没有互联网连接的情况下阅读最新的新闻文章。

92320

Web前端性能优化(三)

浏览器存储因为HTTP请求无状态,当这一次 HTTP 请求结束之后,这个链接就关闭了,而下一次需要发起这个请求,服务端不会知道这个请求是和之前某一个请求,来自同一个客户端的,不能跟踪 HTTP 请求的会话和发生情况...,但对于存储更大量的结构化数据来说,这种方法不太有用,而 IndexDB 是一种低级 API,用于客户端存储大量结构化数据,该 API 使用索引来实现对该数据的高性能搜索,在网络状态不好,无法获取数据数据...Lighthouse,可以检测网站是否符合 PWA,还能查看网站的可靠性、速度等性能优化指标,安装该插件需翻墙Service Worker 是一个脚本,浏览器独立于当前网页,将其在后台运行,为实现一些不依赖页面或者用户交互的特性打开了一扇大门...未来这些特性将包括推送消息,背景后台同步,geofencing(地理围栏定位),但它将推出的第一个首要特性,就是拦截和处理网络请求的能力,包括以编程方式来管理被缓存的响应,查看当前浏览器上 运行的 Service...;如果是最新的,则相应 HTTP 304 ,浏览器会继续使用原先保存的该资源的副本,这样在网络上传输的数据就会大大减少,同时也减轻了服务器的负担Etag 是服务器端响应请求用来说明资源服务器端的唯一标识

66030

开发一个渐进式Web应用程序(PWA)前都需要了解什么?

window对象的navigator 属性中是否可用。...如果SWnavigator 中可用,则在页面加载立即注册SW。...在这一步中,我们使用这个选项来拦截HTTP请求和响应,直接从缓存为用户提供闪电般快速的响应。 Service Worker安装期间进行预缓存 当用户第一次访问你的网站,SW会开始自行安装。...现在,Service Worker将拦截HTTP请求,并从缓存中即时加载相应的资源,而不是服务器发出网络请求。 现在,如果我们在网络选项卡中设置离线模式,我们的应用也依然能正常访问。...后台传输 Background Fetch API是SW的后台功能,它允许用户在后台下载大文件、视频和音乐等资源。获取/传输过程中,你的用户即便关闭标签,乃至关闭整个浏览器,也不会清除传输任务。

1.6K20

穿上App外衣,保持Web灵魂——PWA温故

Web Application Manifest,即通过一个清单文件浏览器暴露 web 应用的元数据,包括名称、icon 的 URL 等,以备浏览器使用,比如在添加至主屏或推送通知暴露给操作系统,从而增强...,用于终端弱网或无王情况下同步后台数据或继续前端的请求消息 由于service worker浏览器关闭后仍然运行着,所以即使用户没有网络或关闭客户端,service worker仍会存储相应的请求...,并在有可用网络连接发起数据同步。...后台加载:网页关闭PWA 仍然可以在后台运行获取数据更新(当然有限制)。 本机可安装性:可以安装 Web 应用程序,无需通过本机应用程序商店来进行。...另外小程序可以共享用户数据,提供更便捷的登录和数据传输。 PWA可以几乎所有现代浏览器上运行,具有广泛的设备和平台支持。

37120

项目中使用Service Worker 与 PWA

支持后台同步 Service Worker 允许在后台执行任务,例如数据同步或推送通知。这使得应用程序可以不干扰用户的情况下执行一些重要的操作。 4....然后, Service Worker 中,我们通过监听 install 事件来缓存这些资源,并在 fetch 事件中拦截网络请求,从缓存中返回资源。这样,即使离线,页面仍能够加载所需资源。...2.安装 需要在网页进行注册来安装,安装前需要检查是否支持 serviceWorker,如果支持,每次页面加载就调用 register(),浏览器将会判断是否已注册。...用户导航至站点,浏览器会尝试在后台重新下载定义 Service Worker 的脚本文件。...当网站上当前打开的页面关闭,旧 Service Worker 将会被终止,新 Service Worker 将会取得控制权。

31610

PWA 入门: 写个非常简单的 PWA 页面

然后 HTML 文件当中引入配置: 添加 Service Worker Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。...借助 Service Worker, 可以注册完成安装 Service Worker , 抓取资源写入缓存: 调用 self.skipWaiting() 方法是为了页面更新的过程当中, 新的 Service...处理动态缓存 网页抓取资源的过程中, Service Worker 可以捕获到 fetch 事件, 可以编写代码决定如何响应资源的请求: 真实的项目当中, 可以根据资源的类型, 站点的特点, 可以专门设计复杂的策略...在这个 Demo 当中, 被缓存的资源是无法发起请求判断是否被更新的, 只有 sw.js 会自动根据 HTTP 缓存的机制尝试去判断应用是否被更新。...这种情况下存在 Caches API 和 HTML caching 两层缓存, 需要进行清理才能完成更新。

2.7K50

构建离线web应用(一)

在这样的场景下,开发商需要做的就是保持用户对产品的好感,在其网络恢复与其互动。如果信号很差,开发商需要通过一些手段保持用户的耐心,不至于在请求过程中用户直接关闭 web 应用。...如果想让用户离线场景下依然保持打开 web 页面,你需要在用户打开 web 应用并且有网络连接做一些“后台任务”,这个“后台任务”会搜集 web 页面最近一次运行需要的一些资源,以备离线使用。...简而言之,service worker 就是一些在后台运行逻辑的 worker。它没有权限操作 DOM,但是可以调用其它的 API (例如 IndexDB 以及 Fetch API)。...Fetch Fetch 不是一个必需的生命周期,但它提供了拦截请求资源的方法。当发送请求,首先会触发这样的事件: // ....如果没有,那么我们调用 fetch api 去发送 HTTP 请求该资源。

1.6K100

Service Worker 入门指南

Service Worker 简介 Service Workers 本质上是一种能在浏览器后台运行的独立线程,它能够在网页关闭后持续运行,能够拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源...,从而实现拦截和加工网络请求、消息推送、静默更新、事件同步等一系列功能,是 PWA 应用的核心技术之一。...如果已有 SW 安装着,新的 swUrl 发起请求,获取内容和和已有的 SW 比较。如没有差别,则结束安装。...「Update on reload」:复选框可以强制 Service Worker 线程每次页面加载更新。...「Push」:按钮可以没有负载的情况下模拟推送通知。 「Sync」:按钮可以模拟后台同步事件。 「Unregister」:按钮可以注销指定的 Service Worker 线程。

1.8K30

PWA---新生代手机APP

你可以把Service Worker简单理解为一个独立于前端页面,在后台运行的进程。因此,它不会阻塞浏览器脚本的运行,同时也无法直接访问浏览器相关的API(例如:DOM、localStorage等)。...此外,即使离开你的Web App,甚至是关闭浏览器后,它仍然可以运行。它就像是一个Web应用背后默默工作的勤劳小蜜蜂,处理着缓存、推送、通知与同步等工作。...方法服务端发起请求,并返回请求结果给浏览器 ?...fetch事件会监听所有浏览器的请求。e.respondWith()方法接受Promise作为参数,通过它让Service Worker浏览器返回数据。...caches.match(e.request)则可以查看当前的请求是否有一份本地缓存:如果有缓存,则直接浏览器返回cache;否则Service Worker会向后端服务发起一个fetch(e.request

69030

PWA 入门

PWA 没有出实现时,可以通过右键“另存为”添加到桌面,但添加到桌面是一个 HTML 文件,当你点击访问时会跳转到浏览器加载。频繁访问某个站点,我们一般会把它收藏起来。...它可以创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。...respondWith 有了 respondWith 函数,再结合 cache.match(request) 本地缓存中匹配数据。...如果缓存里没有,才服务器发请求。 当然,也可以使用其他策略,比如在有网就主动请求服务器的数据,如果断网了,则使用缓存中的数据。...因此更新文件后,最好重新设置一下 CACHE_NAME 的内容,就像发布新版本一样。 Notifications API 消息通知 API 是一个独立的模块,它允许网页最终用户显示系统通知。

1.5K20

天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践

HTTPS服务     首先PWA要求站点的请求方式为HTTPS,如果是生产环境,可以通过为Nginx服务器配置SSL的方式进行适配,但是线下环境测试PWA就有点费劲了,所以通过openssl工具为本地域名...csr是证书请求文件,用于申请证书,制作csr文件的,必须使用自己的私钥来签署申,还可以设定一个密钥。    ...Service Worker还具有这些特点:只能在Https下使用、运行在浏览器后台,不受页面刷新影响、更强大的离线缓存能力(使用Cache API)、请求拦截能力、完全异步,不能使用同步API、持续运行...通过caches.match检查请求是否命中了缓存,如果命中,则直接返回缓存给用户,防止重复请求,节约资源。如果没有命中,则将使用fetch方法请求网络资源并返回给用户。...,看应用清单有没有读出你的 PWA 应用信息配置文件:     随后serviceWorker标签下检查serviceWorker是否正确运行:     接着访问站点,地址栏即可添加PWA应用:

68420

下一代的web应用-pwa,它将成为你未来的核心竞争力!

的出现 显著提高应用加载速度 Web应用可以离线环境下使用 Web应用能够像原生应用一样被添加到主屏 web应用能在未被激活发起推送通知 web应用与操作系统集成能力进一步提高...PWA的优势 根据提示或手动添加到主屏幕 全屏幕打开,不受困于浏览器的UI 无法访问网络,可以像原生应用一样照常执行 像原生一样发起推送通知 PWA模型将继约20年前横空出世的...2.可编程的web worker 3.像一个位于浏览器与网络之间的客户代理,可以拦截、处理、响应流经的HTTP请求 4.配合Cache Storage api,可以自由管理HTTP请求文件粒度的缓存...的最核心的技术,将带来离线优先的架构革命 Push Notification Push Api的出现让推送服务具备了web应用推送消息的能力 Push Api不依赖web应用与浏览器UI存活,所以即使...web应用与浏览器未被用户打开,也可以通过后台进程推送消息并调用Notification API向用户发出通知 总结 PWA的技术未来可期,作为前端,我们很有必要掌握这门技术,未来的几年里,必然成为你的核心竞争力

76710

备受乔布斯推崇的 PWA,为什么还没有杀死原生应用?

尽管如此,因为 Web 开发者滥用 Web Push API(例如,新闻网站在你第一次访问网站请求获取通知权限),以至于人们越来越讨厌这些东西。...因此,某些情况下,Chrome(和其他浏览器)会自动阻止推送通知请求——这导致希望合法使用通知功能的开发者更难请求访问该功能。...已安装的 PWA 可以被自动授予对 Push API 的访问权限。 只对已安装的 PWA 开发 Push API 访问权限,一般的网站不能请求访问该权限。 将权限请求绑定到多个浏览器 API。...例如,安装好以后,PWA 可以请求获得对 Push API、Geolocation API 或 Microphone API 的自动访问权限——用户可以通过切换来分别允许或禁止它们。...或者更简单一点, PWA 请求权限时,不让 Chrome 自动阻止推送通知。

1.4K10

前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【下篇】

使用 preload 前,遇到资源依赖进行加载: image.png 使用 preload 后,不管资源是否使用都将提前加载: image.png 可以看到,preload 的资源加载顺序将被提前...//dosomething } 从零编写一个react框架 数据持久化存储 PWA,渐进式web应用 将数据资源储存在缓存中,每次请求前判断是否Service Worker中,如果没有再请求网络资源...所以要确保安全,目前PWA并不成熟,浏览器兼容性还是不那么好,但是它用起来是真的很舒服 另外一种持久化存储方案: localStorage image.png 浏览器API有localStorage.getItem...有类似将js文件缓存写入localStorage 然后通过与服务端对比版本号再决定是否更新js文件 还有进入首页,将详情页的模版先存入localStorage 当进入详情页时候直接取出,然后发请求,...(原始服务器),然后代理原始服务器转交请求并将获得的内容返回给客户端。

60720

JavaScript工作原理(八):Service Workers,生命周期和应用案例

当Service Worker被注册,它会提示浏览器在后台启动Service Worker安装步骤。...一旦处于Service Worker控制之下,它将处于以下状态之一: 它将处理从页面发出网络请求或消息发生的fetch和message事件 它将被终止以节省内存 以下是生命周期的外观: ervice...这些是install事件处理需要采取的步骤: 打开缓存 缓存我们的文件 确认是否缓存了所有必需的资源 这是一个简单的installService Worker内: var CACHE_NAME =...为了避免两个版本的Web应用程序同时运行在不同的选项卡上 – 这在网络上实际上非常常见,并且可能会创建非常糟糕的错误(例如,浏览器中存储数据存在不同模式的情况)。...后台同步 – 允许您推迟操作,直到用户具有稳定的连接。这样,您可以确保无论用户想要发送什么,实际上都会发送。 定期同步(未支持) – 提供管理定期后台同步功能的API

98210

PWA介绍及快速上手搭建一个PWA应用

[99a97bd9ly1fqrdlf0xgtj21kw0du495.jpg] 事件机制 [99a97bd9ly1fqrdlhciwgj20gm04kjre.jpg] 功能(还是比较逆天的) 后台数据的同步...从其他域获取资源请求 接受计算密集型数据的更新,多页面共享该数据 客户端编译与依赖管理 后端服务的hook机制 根据URL模式,自定义模板 性能优化 消息推送 定时默认更新 地理围栏 生命周期 [99a97bd9ly1fqrdlku2zdj20lg06g74c.jpg...] Parsed ( 解析成功 ): 首次注册 SW ,浏览器解决脚本并获得入口点,如果解析成功,就可以访问到 SW 注册对象,在这一点中我们需要在 HTML 页面中添加一个判断,判断该浏览器是否支持...借助 SW 注册完成安装 SW ,抓取资源写入缓存中。使用了一个方法那就是 self.skipWaiting( ) ,为了页面更新的过程当中,新的 SW 脚本能够立刻激活和生效。...研究PWA门槛不低,部署的服务器要求HTTPS,ServiceWorker涉及API众多,需要单独学习,另外npm中也已经有这个包了https://www.npmjs.com/package/web-pwa

2.2K130

更真、更强、更快的Web应用-Progressive Web Apps

(图:Service Worker、Web Page 环境不一致) Service Workers是以事件驱动的方式代理请求,使用Service Workers可以处理推送通知、同步基础数据、方便Web...选择其中Cache then Network场景,数据请求链路可以控制为如下路径; ?...(图:Cache API) Push APIWeb应用程序提供对服务器发送的通知的脚本访问,浏览器发送通知到服务器。 ?...这意味着应用的外壳不需要每次使用时都被下载,而是只异步加载需要的数据,以达到UI保持本地化。通过动态API,也可以达到实时加载和定期更新内容,所以使web能拥有如下特性:负载快、缓存、动态显示内容。...移动端性能:同一期的chrome版,现在桌面版还是移动版的5-10倍。

1.7K70
领券