文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

Web worker 特别适用于后台跑脚本。现在的网页都可以注册多个 Worker，让不同的任务在各自独立的环境中完成。...这意味着网站可以获得用户的许可来发送通知，然后依靠Service Workers接收消息并执行消息，即使浏览器关闭。...，用于在终端弱网或无王情况下同步后台的数据或继续前端的请求消息 由于service worker在浏览器关闭后仍然运行着，所以即使用户没有网络或关闭客户端，service worker仍会存储相应的请求...当没有互联网连接时，PWA 会使用 Service Worker 来消除对Web服务器的依赖。 快速：流畅的动画和交互效果，应用程序拥有原生的体验，没有笨拙的网页滚动。...推送交互：推送通知等功能可以主动让用户了解最新信息。 后台加载：网页关闭，PWA 仍然可以在后台运行获取数据更新（当然有限制）。

28220

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

通过 PUSH API，当订阅了推送服务后，可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息，即使用户已经关闭了页面。...版本更新 更新静态资源:缓存的资源随着版本的更新会过期, 所以会根据缓存的字符串名称(这里变量为 cacheStorageKey, 值用了 "minimal-pwa-1")清除旧缓存, 可以遍历所有的缓存名称逐一判断决决定是否清除...如果 /sw.js 内容有更新，当访问网站页面时浏览器获取了新的文件，逐字节比对 /sw.js 文件发现不同时它会认为有更新启动 更新算法，于是会安装新的文件并触发 install 事件。..., 这样之后打开页面都会使用版本更新的缓存 return self.clients.claim(); }) ) }) 在新安装的 Service Worker 中通过调用 self.clients.claim...如果你希望在安装原生应用之前，提前体验功能和内容，轻量化的 PWA 应用会是一个非常不错的选择。 参考资料 浏览器兼容 manifest.json参数详解 Service Worker API

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

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

然后在 HTML 文件当中引入配置: 添加 Service Worker Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。...借助 Service Worker, 可以在注册完成安装 Service Worker 时, 抓取资源写入缓存: 调用 self.skipWaiting() 方法是为了在页面更新的过程当中, 新的 Service...处理动态缓存 网页抓取资源的过程中, 在 Service Worker 可以捕获到 fetch 事件, 可以编写代码决定如何响应资源的请求: 真实的项目当中, 可以根据资源的类型, 站点的特点, 可以专门设计复杂的策略...: 在新安装的 Service Worker 中通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。...从 DevTools 可以看到, 普通页面刷新时, 列表当中的静态资源都是从 Service Worker 获取的: 更新页面 页面被缓存之后, 就需要适当处理缓存失效时页面的更新。

2.7K50

将你的博客升级为 PWA 渐进式Web离线应用

Service Worker Service Worker 是 PWA 中最重要的概念之一，它是一个特殊的 Web Worker，独立于浏览器的主线程运行，特殊在它可以拦截用户的网络请求，并且操作缓存，...当网站上打开的页面关闭时，旧 Service Worker 将会被终止，新 Service Worker 将会取得控制权。...接着在 activate 事件发生时，通过执行 self.clients.claim() 方法，更新所有客户端上的 Service Worker。...当 Service Worker 安装完成后并进入激活状态，会触发 activate 事件。通过监听 activate 事件你可以做一些预处理，如对旧版本的更新、对无用缓存的清理等。...) }) 处理动态请求缓存 在 Service Worker 的作用域中，当有网络请求时发生时，fetch 事件将被触发。

64610

如何使用浏览器工具调试PWA

这样你就可以在浏览器中模拟一个设备了。我们选择Android设备，因为最新的PWA只有在Android上才能完全展示出它的潜力。...强制离线模式，反映在应用程序中。 在设备模式屏幕下，离线也是强制的，除网络节流。 重新加载更新：当调试时，这个非常有用。Service Workers首次加载时会将其安装在设备上。...但是，即使您更新Service Workers，直到旧的Service Workers可以被删除为止，也就网页也不会使用 - 也就是说，直到用户关闭指向网络应用程序的所有选项卡。...此复选框才强制更新。 绕过网络可以完全关闭Service Worker启用的缓存。 当您希望从网络直接访问时，这会阻止应用程序使用缓存的资源。调试时也非常有用。...像Chrome一样，当用Cache API使用被“开发工具”的“网络”面板中的Service Worker缓存的资源时，在Transferred列下列出了『Service Worker』： ?

3.6K40

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

2、当应用有可用的更新时，可以只更新发生改变的那部分内容。相比之下，对于一个原生应用而言，即便是最微小的改动也需要强制用户去进行热更新或者再次下载整个应用。    ...csr是证书请求文件，用于申请证书，在制作csr文件的时，必须使用自己的私钥来签署申，还可以设定一个密钥。    ...Worker后，Service Worker开始进行安装，安装成功之后，会在worker中触发install事件；如果安装失败，则进入废弃状态。    ...如果Service Worker逻辑文件更新（相关资源文件变动或者内部逻辑更新等），Service Worker会重新安装，如果这个时候，页面依然存在激活状态下的worker（旧的Service Worker...），那么新的worker会进入waiting状态进行等待，直到我们主动去操作worker强制其更新，或者等待用户关闭所有页面，这个时候新的worker才会进入到激活状态。

67220

在项目中使用Service Worker 与 PWA

引言 最近next项目有使用pwa技术，使用起来也不复杂，目前浏览器的兼容性也比较良好 Service Worker是浏览器中独立于网页运行的脚本，而PWA（渐进式Web应用程序）是一种Web应用程序...然后，在 Service Worker 中，我们通过监听 install 事件来缓存这些资源，并在 fetch 事件中拦截网络请求，从缓存中返回资源。这样，即使在离线时，页面仍能够加载所需资源。...在本例中，可以看到 Service Worker 文件位于域的根目录，这意味着 Service Worker 范围将是这个域下的。...在这个状态可以更新 Service Worker。 用户导航至站点时，浏览器会尝试在后台重新下载定义 Service Worker 的脚本文件。...当网站上当前打开的页面关闭时，旧 Service Worker 将会被终止，新 Service Worker 将会取得控制权。

29010

开发一个渐进式Web应用程序（PWA）前都需要了解什么？

Service Worker可以在基于浏览器的 web 应用中实现如离线缓存、消息推送、静默更新等 native 应用常见的功能，以给 web 应用提供更好更丰富的使用体验。...你可以打开Chrome DevTools – Application - Service Worker 中检查SW是否已经启用。...window对象代表浏览器窗口。如果SW在navigator 中可用，则在页面加载时立即注册SW。...在Chrome开发者工具中，你可以检查缓存（在Cache Storage中）是否被URLS_TO_PRECACHE数组中的静态文件填充。 ?...在获取/传输过程中，你的用户即便关闭标签，乃至关闭整个浏览器，也不会清除传输任务。当用户再次打开浏览器后，传输过程将恢复。这个API也可以将传输的进度可以显示给用户，用户可以取消或暂停这个过程。 ?

1.6K20

PWA 的探索与应用

PWA是在传统Web应用的基础上，结合Manifest和service worker，完善Web应用的一些能力，比如： 添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏 实现离线缓存功能，即使用户手机没有网络...Service Worker 支持的事件 [h8fubjhexm.png] install：Service Worker 安装成功后被触发的事件， 在事件处理函数中可以添加需要缓存的文件 activate...fetch ：当浏览器在当前指定的 scope 下发起请求时，会触发 fetch 事件，并得到传有 response 参数的回调函数。fetch 事件特别重要，因为它能够定义你的缓存策略。...通过 PUSH API，当订阅了推送服务后，可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息，即使用户已经关闭了页面。...SW线程字节不同，浏览器则考虑更新SW线程。

3.1K90

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

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

76110

它比微信小程序早出现半年，却不曾引爆技术圈｜TW洞见

Alex写道： 在昨天的晚餐上，我和Frances列举出了新型应用的几个特征： 响应式：适应任何形态因素 不依赖网络：在Service Worker（H5中的新技术，appcache的升级版）的支持下能够离线使用...像本地应用一样交互：采用“壳+内容”模式来实现类似本地应用的浏览和交互体验 保持最新：始终透明的升级到最新版，这要感谢Service Worker提供的升级机制 安全：通过TLS（这是Service...Worker所要求的）来防止通讯被窥探 可发现的：具有像“应用”一样的唯一标识，这要感谢W3C的Manifest文件格式，它在“Service Worker”中注册的scope能允许搜索引擎发现这些应用...本地应用可以推送通知，而Web应用只有在浏览器打开状态下才行 本地应用可以离线使用，只要做适当的设计就可以不受网络环境的影响 本地应用可以访问更加丰富的功能，比如更大的本地存储空间 那么，它们能否合二为一呢...离线存储技术 可能有人还记得一项叫AppCache的技术，它已经废弃了，现在被Service Worker所取代。

1.1K80

PWA---新生代手机APP

因此，它不会阻塞浏览器脚本的运行，同时也无法直接访问浏览器相关的API（例如：DOM、localStorage等）。此外，即使在离开你的Web App，甚至是关闭浏览器后，它仍然可以运行。...Service Worker有一个非常重要的特性：你可以在Service Worker中监听所有客户端（Web）发出的请求，然后通过Service Worker来代理，向后端服务发起请求。...要实现这点，可以通过特性检测，在index.js中来注册我们的Service Worker（sw.js）： ?...我们需要一个资源列表，当Service Worker被激活时，会将该列表内的资源缓存进cache。 ? 可以看到，首先在cacheFiles中我们列出了所有的静态资源依赖。...由于浏览器判断sw.js是否更新是通过字节方式，因此修改cacheName会重新触发install并缓存资源。

68630

Service Worker 入门指南

Service Worker 简介 Service Workers 本质上是一种能在浏览器后台运行的独立线程，它能够在网页关闭后持续运行，能够拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源...这个方法也可以用于检测进行的任务是否成功。在服务工作线程中，这个方法告诉浏览器事件一直进行，直至 promise resolve，浏览器不应该在事件中的异步操作完成之前终止服务工作线程。...通常情况下，开发者希望当 Service Worker 一检测到更新就直接激活新的 Service Worker。如果不想等所有的终端都关闭再打开的话，只能通过 skipWaiting 的方法了。...它等同于 Network 窗格中的离线模式。 「Update on reload」：复选框可以强制 Service Worker 线程在每次页面加载时更新。...「Update」：按钮可以对指定的 Service Worker 线程执行一次性更新。 「Push」：按钮可以在没有负载的情况下模拟推送通知。 「Sync」：按钮可以模拟后台同步事件。

1.8K30

PWA 方案相关技术分享

在开发过程中，发现 PWA 方案的主要核心技术在于 Service Worker，我下面将从 PWA 方案的简介、PWA 方案的相关技术等2个方向简单介绍一下我对于本次开发的收获。...当用户打开我们站点时（从桌面 icon 或者从浏览器），通过 Service Worker 能够让用户在网络条件很差的情况下也能瞬间加载并且展现。...在介绍 Service Worker 之前，需要一些必要的知识储备，下面首先介绍的是使用 Service Worker 技术时还涉及的相关其他技术 API，主要有全局作用域 self、Cache Storage...而 Service Worker 是走的另外的线程，可理解为在浏览器背后默默运行的一个线程，脱离浏览器窗体，因此，window 以及 DOM 都是不能访问的，此时我们可以使用之前讲到的 self 访问全局上下文...； 网页抓取资源的过程中, 在 Service Worker 可以捕获到 fetch 事件, 编写代码如何响应资源的请求； 最后一步是更新静态资源的功能。

72620

为 vue 项目添加 PWA 支持

安装 PWA 插件 如果你已经在使用@vue/cli，那么可以直接在可视化界面中安装 PWA 插件 否则，可以通过vue add @vue/pwa命令来安装 该插件会使用谷歌的 PWA 框架 Workbox...配置manifest.json 位于public/manifest.json，安装插件时自动生成，参考 Web App Manifest 进行配置 引导用户添加 PWA 应用 在应用中可以自行通过提示等方式引导用户手动添加...Service Worker 的更新 这是开发 PWA 应用时需要考虑的一个重要问题 由于 Service Worker 的更新机制（扩展阅读：【Service Worker】生命周期那些事儿），直接单纯的刷新页面并没有结束当前...注：以下方法中提到的registerServiceWorker.js是由 PWA 插件在src目录中自动生成的，其作用是注册 SW 以及提供其生命周期钩子，具体可以看该 npm 包 register-service-worker...中我们可以如下所示在updated()函数中加入一些内容，询问用户是否愿意重载页面以更新应用，若用户同意则向 waiting 状态的 SW 发送{type:'SKIP_WAITING'}消息，并在新 SW

3.5K00

PWA 入门

PWA 在没有出实现时，可以通过右键“另存为”添加到桌面，但添加到桌面是一个 HTML 文件，当你点击访问时会跳转到浏览器加载。频繁访问某个站点时，我们一般会把它收藏起来。...它可以创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。...service-worker 有了 service worker 可以让网页在离线情况下依然可以访问，这极大地提升了 web app 的用户体验。...在浏览器控制台输入 caches 就可以访问到这个对象。...重写 fetch 事件 写完了 install 和 activate 函数后，可以把远端的数据放入缓存中，还可以更新缓存，但我们的程序还不能离线访问，还需要告诉 service worker 让它用这些缓存内容来做点什么

1.4K20

Progressive Web Apps

native特性，算是渐进增强中的增强，在支持的用户环境是可用的（一些浏览器提供了支持，但更广泛的WebView环境在不久的将来可能还是不行）。...能够体验到HTTPS与HTTP环境在获取用户授权方面的差异 类native增强 通过引入Web App Manifest配置文件来实现类native增强，在支持PWA的浏览器生效（在不支持的环境最坏结果也就是多请求一个...但service worker自身也应该看做“增强”项，在不支持service worker的环境应该跳过缓存机制保证基本的页面体验，简单的特征检测方案如下： if ('serviceWorker' in...，所以install事件处理器中的请求不会走缓存，而是直接进入网络 注销service worker不会清掉缓存，cache key不变的话，之后还会拿到旧的缓存内容 默认新注册的service worker...在页面重新载入之后才会生效，除非做特殊处理 另外，我们的简版实现还存在一些问题，例如： 缓存版本控制依赖一个静态的cache key，每次更新service-worker.js都要修改这个key 一旦cache

1.1K40
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券