「没有通过全局构造函数创建」，而是暴露了 register()方法，该方法以与 Worker()或 SharedWorker()构造函数相同的方式传递「脚本 URL」。...服务工作线程负责管理自己缓存占用的空间。...在只有 Request 对象或 URL 时使用此方法发送 fetch() 请求，并缓存响应。 2....该方法接收 URL 或 Request 对象的「数组」 3. addAll()会对请求数组中的「每一项分别调用」add() 4....2. type 可能的值是 window、worker 或 sharedworker url： 返回客户端的 URL postMessage()： 用于向「单个」客户端发送消息 Clients 接口也支持以下方法
假设您没有在您的网站中使用HTTPS，一个第三方的脚本就可以从其他的域名注入他自己的 ServiceWorker，然后篡改所有的请求——这无疑是非常危险的。...在本示例中，我还添加了主页和 logo。当有不同的 URL 指向同一个资源时，你也可以将这些 URL 分别写到这个数组中。offlineURL 将会加入到这个数组中。...获取到的资源将会加入到缓存中。 如果第一步和第二步均失败，将会从缓存中返回正确的资源文件。...，获取所有 URL，删除不是页面的 URL，将这些 URL 排序然后将所有缓存的 URL 展示在页面上： // 缓存名称 const CACHE = "::PWAsite", offlineURL...Share API) 使用分享功能，需要满足以下几点： 网站必须基于 HTTPS 注册 Origin Trial，并将生成的 token 加入页面 meta 中 提供 text 或 url 中的一项，且值必须为字符串
然而在移动互联网的时代，不稳定的网络链接在现代网络变得原来越常见。鉴于此，允许网站自己决定离线时的行为变得弥足珍贵，这样用户就不会被网络状态局限。...注册 下方的代码描绘了如何在浏览器客户端当中注册你的Service Worker。...那么这样，你的SW里能通过监听事件获知所有在你的url根目录里发生的请求。一个如 /js/sw.js 这样的路径只会捕获到 http://localhost:3000/js 下的请求。...我们通过调用 open 来获取一个可操作的具体 Cache 对象。 cache.addAll 接收一个url数组，对每一个进行请求，然后将响应结果存到缓存里。它以请求的详细信息为键来缓存每一个值。...Activate事件 这个事件的文档相较而言比较少，但对于你更新SW文件很有帮助，你可以在升级SW文件的时候针对之前的版本执行清理或其他维护操作。
id=201584). self.serviceWorker 在 service worker 中，很难获得对自己的 ServiceWorker 实例的引用。...浏览器供应商对开发人员有意锁定自己的网站感到满意，但我们并不想锁定整个浏览器。...由于用户已经作为顶级页面访问了该网站（例如原始位置在URL栏中，而不是 iframe），因此 Chrome 很高兴在以后允许一个小的，保守的执行窗口。...，因此浏览器或 OS 可以在其他位置（例如 Chrome 中的新标签页）显示此信息。...但是其他获取行为已经存在于页面中，例如 CSP，所以我认为这没什么大不了的。
由于sw不可访问window，在sw中是无法使用ajax或XMLHTTPRequest。同时，fetch是一个异步函数，直接调用它会返回一个Promise。...caches.match(req)将会试图在CacheStorage中匹配请求的url获取值，然后丢给管道同步函数then，传参resp为Cache匹配到的值。...此时管道内将尝试返回resp，如果resp为null或undefined即获取不到对应的缓存，将执行fetch操作，fetch成功后将open打开CacheStorage，并put放入缓存。...在下一次获取同一个URL的时候，缓存匹配到的将不再是空白值，此时fetch不执行，直接返回缓存，大大提升了速度。...由于npm的cdn对于latest缓存并不是持久有效的，所以我们最好还是判断一下url版本中是否以@latest为结尾。
无论网络连接如何，能够使用Web应用程序意味着用户可以在飞机，地铁或连接受限或不可用的地方不间断地操作。 该技术将有助于提高客户端的工作效率，并将提高应用程序的可用性。...这将有助于我们加快加载时间，而不必每次访问同一网站时都必须从服务器获取。 当然，最重要的是，当我们网络不畅时，这些资源将可供我们使用。...网站可以正常工作的前提是能获取到html，css，js等资源。在之前这些资源主要由浏览器管理，对于开发者而言是不可见的。现在通过service worker我们可以掌控这些资源。...注册过程中的详细信息和事件有助于我们更好的掌控它。...我们需要一个单独的Tab来调试service worker线程。 在service worker中，它大部分的工作是在监听的事件中来完成的，比如在install事件中完成资源缓存。
/worker.js'); // 参数是 url，这个 url 必须与创建者同源 Worker 的方法 onmessage 主线程中可以在 Worker 上添加 onmessage 方法，用于监听...（可以是数组、对象、字符串等），可以根据自己的业务选择。.../worker.js'); worker.terminate(); 通信 Worker 的作用域跟主线程中的 Window 是相互独立的，并且 Worker 中是获取不到 DOM 元素的。...中获取从主线程传递过来的数据。...切换到离线模式，131 图片还是能显示，134.png 就获取不到了。 看到这里，大家可能会有疑惑了。这个图片它存到哪里去了？实际上它会把文件自动存到浏览器的 Cache Storage 中。
navigator.credentials: 只读，返回Credentials Container接口，该接口公开请求凭证的方法，并在发生制定的事件(如成功登录或签入)时通知用户代理。...navigator.mediaDevices: 只读，返回对MediaDevices对象的引用，该对象可用于获取有关可用媒体设备的信息。...navigator.plugins: 只读，返回一个PluginArray对象，列出了描述应用程序中安装的插件的插件对象。...navigator.serviceWorker: 只读，返回ServiceWorkerContainer对象，该对象提供对注册、删除、升级以及与相关文档的ServiceWorker对象通信的访问。...navigator.registerProtocolHandler(scheme, url): 该方法允许网站注册它们打开或处理特定URL方案(又名协议)的能力。
) let scrollTop = window.pageYOffset; imgs.forEach((img) => { // 获取元素的大小，及其相对于视口的位置，如 bottom...而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。...，由“协议名 + 主机名 + 路径”构成，俗称 URL；HTTPS 相当于“HTTP+SSL/TLS+TCP/IP”，为 HTTP 套了一个安全的外壳；代理是 HTTP 传输过程中的“中转站”，可以实现缓存加速...变化:监听hashchange或popstate事件响应最新url:创建一个响应式的属性current，当它改变时获取对应组件并显示// 我们的插件：// 1.实现一个Router类并挂载期实例// 2...ServiceWorker 只能在本地环境下或 HTTPS 网站中使用ServiceWorker 有作用域的限制，一个 ServiceWorker 脚本只能作用于当前路径及其子路径；目前该技术通常用来做缓存文件
提及 前端性能优化 ，大家应该都会想到 雅虎军规，本文会结合 雅虎军规 融入自己的了解知识，进行的总结和梳理 ?。 详情，可以查阅我的博客：https://lishaoy.net。...1、浏览器第一次请求 2、浏览器再次请求 从以上两幅图中，可以清楚的了解浏览器 缓存 的过程： 首次访问一个 URL ，没有 缓存 ，但是，服务器会响应一些 header 信息，如： expires、cache-control...第一条线路： 当浏览器再次访问某个 URL 时，会先获取资源的 header 信息，判断是否命中强缓存 （cache-control和expires） ，如命中，直接从缓存获取资源，包括响应的 header...图可知，service worker 工作的流程： 安装： service worker URL 通过 serviceWorkerContainer.register() 来获取和注册。...() 方法来劫持我们的 HTTP 响应，然后你用可以用自己的方法来更新他们。
native特性，算是渐进增强中的增强，在支持的用户环境是可用的（一些浏览器提供了支持，但更广泛的WebView环境在不久的将来可能还是不行）。...launcher=true" } P.S.安装banner是指一个类似于获取权限的弹出面板，用户可以选择添加至主屏幕或取消，满足一定条件的话，Chrome会自动弹出安装banner，具体见Web App...如开篇所说，PWA并没有天生的（首屏）性能优势，Web App适用的常规优化手段仍然是必要的 闪屏（Splash） 从主屏图标进入，可定制的启动过程显示内容包括：标题，背景色和图像。...，发布内容没有任何限制可以随便折腾，以后的博客Demo都会逐步迁移过去（之前一直放在自己的FTP，那可真蠢..） ?...Web App 期望具有离线能力，或类native体验，或者单纯只是想要个主屏图标的Web应用 期望蹭个技术热点/协助推动其发展的Web应用或浏览器供应商 不管应用场景，话说回来，正如zxx某篇关于缓存
本文将介绍如何在Android开发中预防中间人攻击，保护用户数据的安全。 一、中间人攻击概述 在中间人攻击中，攻击者会在通信双方之间插入自己，拦截和篡改数据。...通信双方可能并不知道他们的通信被监听和修改，这使得攻击者可以轻易地获取敏感信息，如用户名、密码、银行卡信息等。...android:usesCleartextTraffic="false"> 使用Retrofit等网络库时，确保请求的URL以https://开头。...禁用弱加密套件，如RC4、MD5等。 使用安全的密钥交换算法，如ECDHE、DHE等。 在Android中，我们可以使用OkHttp库进行SSL/TLS配置。...三、总结 预防中间人攻击是Android网络安全的重要任务。本文介绍了如何在Android开发中使用HTTPS、证书锁定、SSL/TLS最佳实践和主机名验证等方法来防止中间人攻击。
特别是在非浏览器的运行环境中，它们致力于提高各大 Web 平台 API 的兼容性。...他们通过在运行环境之间进行讨论，向规范制定团体（如 WHATWG、W3C）提出新的 Web API 或对当前 Web API 的修改提议，以及对现有运行环境行为的文档化，来完成这些工作。...自首次发布以来，WinterCG 就对以下常见 API 进行了兼容： 数据获取：fetch, URL, Request,Response 文件：Blob,File 流：ReadableStream, WritableStream...能够解析和执行 JavaScript 代码，在 Web 浏览器或其他项目中运行。 Tokio：是 Rust 社区广泛使用的异步运行时，对于基于 Rust 的异步 I/O 或基于网络的应用开发尤为实用。...WinterCG 自定义获取 API。
JS 单线程的机制避免了多线程开发中的复杂场景（如竞态和死锁），但单线程的主要困扰是：主线程同步 JS 执行耗时过久时（浏览器理想帧间隔约 16ms），会阻塞用户交互和页面渲染。 ?...如多个没有依赖关系的同步任务，在单线程上只能串行执行，在多核多线程中可以并行执行。...； 包含只读的 Location，指向 Worker 线程执行的 script url，可通过 url 传递参数给 Worker 环境； 包含只读的 Navigator，用于获取浏览器信息； 支持 setTimeout...Worker 在不同浏览器中的差异 各家浏览器实现 Worker 规范有差异，对比主线程，部分 API 功能不完备，如： IE10 发送的 ajax 请求没有 referer，请求可能会被后端拒绝响应；...在开发 Worker 前端项目，或迁移已有业务代码到 Worker 时，可以通过构建变量区分代码逻辑，或运行时动态判断所在线程，实现同构代码在不同线程环境下运行。
若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200； 若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改...PWA也运用了该文件，不同于manifest简单的将文件通过是否缓存进行分类，PWA用manifest构建了自己的APP骨架，并运用Servie Worker来控制缓存，这也是今天的主角。...serviceworker是如何在生产环境中使用的吧。...使用者 有很多团队也是启用该工具来实现serviceworker的缓存，比如说： 淘宝首页 网易新闻wap文章页 百度的Lavas 基本配置 首先，需要在项目的sw.js文件中，引入workbox的官方...如果网络请求失败，那最后被缓存的 Cache 缓存结果就会被返回到客户端，这种策略一般适用于返回结果不太固定或对实时性有要求的请求，为网络请求失败进行兜底。
前言 在前几天师夷长技以制夷:跟着PS学前端技术文件中，我们提到了WorkBox，然后自己也对这块很感兴趣，所以就利用业余时间进行相关资源的查询学习和实践。...我们需要在脚本 (例如，在 ServiceWorker 中) 中处理缓存更新的方式。...调用navigator.serviceWorker.register()并「传入与当前安装的 service worker 不同的 URL」 调用navigator.serviceWorker.register...当service worker处理fetch请求时，我们「检查fetch事件处理的请求 URL 是否在预缓存资产的数组中」。 如果是，我们从缓存中获取资源，并跳过网络。...如果以后「离线了，就回退到缓存中的最新版本的响应」。 这种策略对于HTML或 API 请求非常有用，当在线时，我们希望获取资源的最新版本，但希望在离线时能够访问最新可用的版本。
本文旨在深入剖析JavaScript在前端缓存策略中的应用，旨在为开发者提供更为实际和详尽的指导，帮助他们更精准地把握并运用这些策略，以优化网站性能。...fetch(event.request); }) );});LocalStorage/SessionStorage缓存策略LocalStorage和SessionStorage提供了在浏览器中存储数据的能力..., JSON.stringify(data)); } // 获取缓存数据 function getCachedData(key) { const data = localStorage.getItem...JSON.parse(data) : null; }资源版本控制在资源URL后添加版本号或时间戳，如script.js?v=1.0，每当资源更新时，更改版本号，以避免浏览器使用旧版本的缓存文件。...综合缓存策略在实际应用中，通常会结合多种缓存策略来实现最优的性能优化，对于不同场景应用不同的缓存搭配，例如下方几种对于不经常变化的静态资源，使用强缓存。对于经常变化的内容，使用协商缓存。
在 auto_reg_var 函数中，通过 location.search 获取了请求参数，并通过 window[key] = value 进行了赋值，此处存在变量覆盖漏洞。...，而登录的域名是auth.hardxss.xhlj.wetolink.com，登录和打开链接是在不同的域名，并且需要盗取的信息在请求中而不是在cookie中。..." href="/sw.js"> 需要注意的是 navigator.serviceWorker.register 中的参数 首先，第一个参数（ scriptURL ）只能为本站中的JS脚本（并且必须是...（如本例中只能访问 /sw-test/ 的子路径），并且， scope 参数不能设置为第一个参数的上层路径（ scope 范围必须要小于 Service Worker 脚本本身的路径范围），几个例子：...=== 'http://localhost/sw/target.html') {//要访问的url（https或localhost） var res = new Response(body
Progressive Web Apps (PWA) 的离线优先策略是通过Service Worker和Cache API实现的，它允许在没有网络连接时仍然可以访问网站的部分或全部内容。1....离线提示和体验当用户离线时，提供友好的离线页面或提示：如app-shell.html），包含基本的布局和样式。...').then((cache) => { return cache.addAll(appShellUrls); }) );});在fetch事件中，优先从缓存中获取App Shell资源...这使得你可以在离线时返回默认值或存储的响应，以提供一致的用户体验：self.addEventListener('fetch', (event) => { if (event.request.url.startsWith
前言 在 iOS 和 Android 移动设备中，Native App 向用户推送通知是很常见的行为，这是重新吸引用户访问应用最有效方法之一。...然而推送通知一直被认为是 Web App 缺少的能力， 申请通知权限 为避免网站滥用 Notification 给用户造成影响，在展示桌面通知之前，首先需要向用户获取通知权限，只有获得用户授权之后...，等等的操作都在MDN 有介绍，接下来的我觉得才可以看看 ServiceWorker 线程中展现通知 不知道ServiceWorker 的肯定知道PWA吧，其实是一个东西，不过我今天并不讲那个东西...，我只是讲一下，如何利用ServiceWorker 和 Notification配合，当有消息通知来之后，如果当你tab 不在当前页面，就跳转到 消息通知的页面，案例可以去看一下 twitte ServiceWorker...传送门 以下操作默认你已经看完上面的，并且已经配置好了 ServiceWorker 的一系列的东西 接下来以我做的项目为例 function focusOrOpenWindow(event)
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
