文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

在项目中使用Service Worker 与 PWA

文件限制 出于安全考虑，worker 线程无法读取本地文件。它们加载的脚本必须来自网络，并且必须与主线程的脚本同源。 什是Service Worker？....catch(function(error) { console.log('Service Worker 注册失败：', error); }); } // 在 Service...它包括以下几个阶段: 下载 安装 激活 1.下载 用户首次访问service worker控制的网站或页面时，service worker会立刻被下载。...event.waitUntil() 方法接受一个promise，并使用它来知道安装需要多长时间，以及它是否成功。 如果成功缓存了所有文件，那么将安装 Service Worker。...如果其中的一个文件下载失败，那么安装步骤将失败。如果缓存文件列表过长，将会增大失败的几率。

1.4K10

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

Service Worker生命周期 对于Service Worker，基本设置的步骤如下： 首先应注册SW，如果SW已注册，浏览器会根据于安装事件自动开始安装。 安装SW后，它将收到激活事件。...虽然注册一个SW很简单，但在有些情况下我们依然会遇到无法注册Service Worker的问题，我们来简单看看无法注册SW的原因都有什么并如何解决： 您的应用程序无法在HTTPS下运行。...skipWaiting()函数强制等待中的Service Worker成为活动的Service Worker。...在这一步中，我们使用这个选项来拦截HTTP请求和响应，直接从缓存为用户提供闪电般快速的响应。 在Service Worker安装期间进行预缓存 当用户第一次访问你的网站时，SW会开始自行安装。...如果所有文件都已被成功缓存，SW就会被安装。但如果其中一个文件无法下载，则安装步骤将会失败。

2.3K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    PWA 的探索与应用

    Service Worker 支持的事件 [h8fubjhexm.png] install：Service Worker 安装成功后被触发的事件， 在事件处理函数中可以添加需要缓存的文件 activate...message：Service Worker 运行于独立 context 中，无法直接访问当前页面主线程的 DOM 等信息，但是通过 postMessage API，可以实现他们之间的消息传递，这样主线程就可以接受...Service Worker安装 cache.addAll(urlsToPrefetch); //vipUrlsToPrefetch中资源全部请求成功，Service Worker安装事件才顺利完成...Service Worker缓存策略 Service Worker缓存策略大部分在fetch与install时间中定义，对于某些固定不变的静态资源，可以在Service Worker初次安装的...install事件中将其缓存，但资源过大或者网络不佳都会造成资源并未全部下载成功而导致Service Worker安装被中断安装失败。

    3.7K90

    ServiceWorker工作机制与生命周期：资源缓存与协作通信处理

    如果注册成功，service worker就会被下载到客户端并尝试安装或激活（见下文），这将作用于整个域内用户可访问的URL，或者其特定子集。...JS 文件的目录的 object： Serivce Worker 的配置项，可选填，其中比较重要的是 scope 属性，它是 Service Worker 控制的内容的子目录 Service Worker...installing 注册完 Service Worker 之后，浏览器会为我们自动安装它，因此我们就可以在 service worker 文件中监听它的 install 事件了。...activated 同样的，Service Worker 在安装完成后会被激活，所以我们也可监听 activate 事件。...Worker 的时候，把 scope 设置为非 origin 目录，那么在 service worker 文件中，我无法获取到 Origin 路径对应页面的 client。

    2.1K20

    web渐进式应用PWA

    由于允许 Web 应用程序脱机工作的是 Service Worker，这意味着 Service Worker 是渐进式 Web 应用强制要求的部分。...站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问 当 manifest 文件发生改变时，资源请求本身也会触发更新 3.创建一个 Service Worker Service...Service Worker 和 Web Worker不是同一个东西 ,不要搞混淆了 Install 事件 该事件将在应用安装完成后触发。...我们也可以将一些非必要的缓存文件（installFilesDesirable）。这些文件在安装过程中将会被下载，但如果下载失败，不会触发安装失败。...waitUntil方法保证了 service worker 不会安装直到其相关的代码被执行。

    1.8K10

    WorkBox 之底层逻辑Service Worker

    ; 在我们的工作线程JavaScript文件中，添加一个事件侦听器，以处理从主线程发送的消息，使用self对象的onmessage属性。我们可以使用event.data属性访问消息中发送的数据。...如果service worker的内容包含「语法错误」，注册会失败，并丢弃service worker。 service worker在一个作用域内运行。...如果传递给event.waitUntil的Promise被「拒绝，安装将失败」。如果发生这种情况，service worker将被「丢弃」。...属性，以查看是否是图像请求。...更好的是，这是一个规定的行为，因此所有支持Service Worker的浏览器都会观察到它。 检查缓存内容 如果无法检查缓存，就很难确定缓存策略是否按预期工作。

    1.9K20

    咱们worker有力量-在浏览器中实现多线程和离线应用

    (一种二进制数组，配合XHR、File API、Canvas等读取字节流数据用) onmessage属性应被指定一个事件处理函数，用于接收传递过来的消息；也可以选择使用 addEventListener...Service Worker ? Service Worker 基于 Web Worker 的事件驱动，提供了用来管理安装、版本、升级的一整套系统。...类似，需要小心 service worker 脚本里的全局变量： 每个页面不会有自己独有的worker 安装 在 service worker 注册之后，install 事件会被触发 在 install...回调中，一般执行以下任务： 打开制定版本的缓存 缓存文件 确认所有需要的资源是否被缓存 如有指定的任何缓存文件无法下载，则安装步骤将失败 更新 更新 service worker 所在的 JavaScript...在这个步骤进行缓存管理，而不是在之前的安装阶段进行，原因在于：如果在 install 步骤中清除了任何旧缓存，则继续控制所有当前页面的任何旧 service worker 将突然无法从缓存中提供文件 self.addEventListener

    2.9K80

    认识浏览器缓存

    . --> 其中，html标签中指定manifest属性的值即为缓存清单文件，浏览器第一次打开app的时候会读取这个文件，然后会读取里面的配置做相应的缓存处理。...其次缓存的使用也加快了页面加载的速度，而且也减轻了服务器的压力。 2.1.2 Service Worker 作为H5离线缓存的替代方案，Service Workers横空出世。...在说service worker之前，先通过图3看一下service主要的工作流程： [图3 Service Worker简单工作流程图] >1 注册 注册worker是指将service worker...，如果worker有更新，那么激活逻辑将会在新worker安装之后，并且当前没有页面正在使用老的worker时候进行激活。...worker的工作原理和提供的能力，service worker更适合以下工作场景： 1）需要精准控制资源缓存的 2）需要精准定制资源的回包内容和针对请求做特殊处理的需求 注：service worker

    1.8K61

    PWA 方案相关技术分享

    假设当前域名下所有的覆盖式发布的静态资源和接口数据全部存储在同一个 cacheName 里面，业务部署更新后，无法识别旧的冗余资源，单靠前端无法完全清除。...Service Worker的生命周期 Service Worker 注册时候的生命周期是这样的： 下载注册的JS文件，并解析执行 安装注册 安装成功或等待 激活中 激活成功 销毁 一旦安装完成，如果注册的...用线把整个流程链接起来： 其中任何一个步骤失败都将进入销毁（redundant）。...Service Worker 的对应的事件名 self.addEventListener(‘install’, function(event) { / 安装后… / }); self.addEventListener...head 中， Service Worker 主要操作是： 注册完成安装 Service Worker 时, 抓取资源写入缓存

    1.1K20

    Service Worker初探

    在注册Service Worker之后，Service Worker会马上进去installing的生命周期进行安装，同时会进入Service Worker的install事件中。...如果在installing中，有任何资源加载失败，都会导致安装失败，Service Worker会直接进入废弃状态。...回到安装的时候，如果当前的页面已经存在了一个激活的Service Worker的时候，在新的Service Worker安装完成，会进入Waiting状态。...CacheStorage因为Service Worker的作用域问题，只能控制范围内的缓存，无法控制cdn和在其他域下的接口数据。 缓存模式 缓存模式主要探讨了一个关于缓存利用率和更新的权衡问题。...来处理发送信息的操作。 如果发送信息失败，这个同步事件过一段时间将会再次尝试发送。当event.lastChance属性为true时，将会放弃尝试。

    1.6K20

    JS 中 service workers 的简介

    Service Worker 生命周期 注册生命周期包括三个步骤： 下载 安装 激活 当用户首次访问您的网站时，会立即下载service worker文件并尝试安装。...如果安装成功，则激活service worker。在用户访问另一个页面后刷新当前页面之前，service worker文件中的任何功能都不可用。...浏览器事件 一旦service worker被安装并激活了，它就可以开始拦截网络请求和缓存资源。这可以通过监听service worker文件中浏览器发出的事件来完成。...self关键字是一个只读的全局属性，service workers使用它来访问自己。...就像第一次安装一样，只有当用户导航到另一个页面或刷新当前页面时，新的service worker的功能才能使用。 我们可以做的事情就是监听activate事件，并删除旧的缓存资源。

    1.1K30

    JS 中 service workers 的简介

    Service Worker 生命周期 注册生命周期包括三个步骤： 下载 安装 激活 当用户首次访问您的网站时，会立即下载service worker文件并尝试安装。...如果安装成功，则激活service worker。在用户访问另一个页面后刷新当前页面之前，service worker文件中的任何功能都不可用。...浏览器事件 一旦service worker被安装并激活了，它就可以开始拦截网络请求和缓存资源。这可以通过监听service worker文件中浏览器发出的事件来完成。...浏览器发出以下事件： install 当安装service worker程序时将发出install activate 成功注册和安装service worker程序后将发送active。...self关键字是一个只读的全局属性，service workers使用它来访问自己。

    1.1K20

    Service Worker的应用

    Service Worker的应用 Service worker本质上充当Web应用程序、浏览器与网络(可用时)之间的代理服务器，这个API旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作...性能增强，比如预取用户可能需要的资源，比如相册中的后面数张图片。 可以配合App Manifest和Service Worker来实现PWA的安装和离线等功能。...另外写完相关代码后建议重启一下服务，之前我就遇到了无法缓存的问题，包括disk cache和memory cache，要重启服务才解决。...之后便是从caches取出这个CACHE_NAME的key标识的cache，之后使用cache.addAll将数组中的path告诉cache，在第一次打开的时候，Service worker会自动去请求相关的数据并且缓存起来...这个terminated的时机有如下几种方式，1、关闭浏览器一段时间。2、手动清除Service Worker。3、在sw安装时直接跳过waiting阶段。

    89010

    service worker 使用

    安装 service worker 注册后，浏览器就会尝试安装并激活它，并且在这里完成静态资源的缓存。...为了避免 service worker 缓存自己导致死锁无法升级，通常将 sw.js 本身的缓存直接交给 HTTP 服务器缓存。...但是此时已经处于激活状态的旧的 service worker 还在运行，新的 service worker 完成安装后会进入 waiting 状态，直到所有已打开的页面都关闭。...当 service worker 安装完成后，会接收到一个激活事件（activate event）。激活事件的处理函数中，主要操作是清理旧版本的 service worker 脚本中使用资源。...service worker 事件 install: service worker 安装成功后被触发的事件，在事件处理函数中可以添加需要缓存的文件。

    1.9K32

    JavaScript工作原理（八）：Service Workers，生命周期和应用案例

    基本上，Service Worker是一种网络工作者，更具体地说，它就像一个Shared Worker： Service Worker在它自己的全局脚本上下文中运行 它没有绑定到特定的网页 它无法访问DOM...安装 您的Web应用程序想要安装Service Worker，您必须先注册它，您可以在JavaScript代码中进行注册。...在安装阶段，最好加载和缓存一些静态资源。资源成功缓存后，Service Worker安装完成。如果没有成功（加载失败） – Service Worker将重试。...一旦安装成功，您将知道静态资源位于缓存中。 在安装阶段，最好加载和缓存一些静态资源。资源成功缓存后，Service Worker安装完成。如果没有成功（加载失败） – Service将重试。...目前还没有Service Worker，浏览器无法事先知道是否会有安装的Service Worker。

    1.9K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券