他基于h5的web worker，所以绝对不会阻碍当前js线程的执行，sw最重要的工作原理就是 1、后台线程：独立于当前网页线程； 2、网络代理：在网页发起请求时代理，来缓存文件； 兼容性 ?...也可以在Application的Cache Storage中查看缓存的具体内容： ? 如果是具体的断点调试，需要使用对应的线程，不再是main线程了，这也是webworker的通用调试方法： ?...serviceworker是如何在生产环境中使用的吧。...使用者 有很多团队也是启用该工具来实现serviceworker的缓存，比如说： 淘宝首页 网易新闻wap文章页 百度的Lavas 基本配置 首先，需要在项目的sw.js文件中，引入workbox的官方...precache对应的是在installing阶段进行读取缓存的操作。它让开发人员可以确定缓存文件的时间和长度，以及在不进入网络的情况下将其提供给浏览器，这意味着它可以用于创建Web离线工作的应用。
需刷新后 看效果） ctrl + c 结束node服务 再次刷新页面（从缓存里面读取 依然显示页面） 简介 背景 有一个困扰 web 用户多年的难题——丢失网络连接。...之前的尝试 — AppCache — 看起来是个不错的方法，但是，它假定你使用时会遵循诸多规则，如果你不严格遵循这些规则，它会把你的APP搞得一团糟。...Service Worker是浏览器在后台启动的一条服务Worker线程 功能和特性： 1.一个独立的 worker 线程，且只有一个。...2.一旦被 install，就永远存在，除非被 uninstall 3.需要的时候可以直接唤醒，不需要的时候自动睡眠（此处有坑） 4.可代理请求和返回，缓存文件，缓存的文件可以被网页进程取到...这意味着最坏情况下Service Worker会每天更新一次 //客户端更新方法： localStorage 存下 版本 运行时候对比 var version = 'precache-v3'
什么是Service Worker？ Service Worker(SW) 是一段JavaScript，它作为浏览器和网络服务器间的代理。...Service Worker可以在基于浏览器的 web 应用中实现如离线缓存、消息推送、静默更新等 native 应用常见的功能，以给 web 应用提供更好更丰富的使用体验。...在这个安装阶段，你可以将PWA使用的所有页面、脚本和样式文件下载并缓存起来，以下是完成这项工作的sw.js文件代码： const CACHE_STATIC_NAME = 'static'; const...URLS_TO_PRECACHE数组。...在Chrome开发者工具中，你可以检查缓存（在Cache Storage中）是否被URLS_TO_PRECACHE数组中的静态文件填充。 ?
在 《web messaging与Woker分类：漫谈postMessage跨线程跨页面通信》介绍过ServiceWorker，这里摘抄跟多的内容，补全 Service Worker 理解为一个介于客户端和服务器之间的一个代理服务器...manifest 缓存 已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。...Application的Cache Storage可查看缓存的具体内容（本地localhost调试） 如果是具体的断点调试，需要使用对应的线程，不再是main线程了，这也是webworker的通用调试方法...相对于驱动应用的主JavaScript线程，它运行在其他线程中，所以不会造成阻塞。它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用。...workbox原理 通过Proxy按需依赖 熟悉了workbox后会得知，它是有很多个子模块的，各个子模块再通过用到的时候按需importScript到线程中。
离线缓存优化 将应用中的静态资源缓存是目前最主流的性能优化方法，甚至能让应用秒开！...那么问题来了，Service worker离线缓存和传统的缓存方式对比，有什么优势和劣势呢，service worker之所以越来越流行，是因为它让前端缓存脱离了服务端，不需要服务端再额外做些什么，前端工程师自己就可以实现缓存...，而且缓存内容完全可控，下面是我搜索的几条主流缓存方式的介绍和对比。...和 workbox.core.cacheNames.runtime 获取当前定义的预缓存和动态缓存名称。...，使用navigationRoute可以匹配导航请求，从而从换从中加载index.html，但默认情况会拦截所有导航请求，如果需要控制，可以在方法中添加白名单和黑名单加以控制。
不依赖网络连接 - Service Workers 允许离线工作，或在低质量网络上工作。 类似于应用程序 - 使用应用程序风格的交互和导航，感觉像一个应用程序。...由于允许 Web 应用程序脱机工作的是 Service Worker，这意味着 Service Worker 是渐进式 Web 应用强制要求的部分。...Service Worker 这个概念可能比较难懂，它其实是一个工作在其他线程中的标准的 Worker，它不可以访问页面上的 DOM 元素，没有页面上的 API，但是可以拦截所有页面上的网络请求，包括页面导航...每当缓存存储有变化时，新的版本号将会指定到缓存存储中。新的缓存存储将会作为当前的缓存存储，之前的缓存存储将会被作废。...在本示例中，我还添加了主页和 logo。当有不同的 URL 指向同一个资源时，你也可以将这些 URL 分别写到这个数组中。offlineURL 将会加入到这个数组中。
我们想让WebCrumbs在离线状态下工作##什么是WebCrumbs？这是真的吗？向我证明。是的，是真的！...这个功能在旅途中，比如在飞行中或在网络信号较差的地方，特别有用。 好的，我被说服了。我该怎么做呢？实现离线功能通常涉及使用服务工作线程来缓存重要资源，并在用户离线时提供这些资源。...以下是演示如何做到这一点的一个基本示例：注册服务工作线程首先，你需要在你的主JavaScript文件中注册服务工作线程。...（serviceWorker.js）服务工作线程文件是你定义应用缓存策略的地方。...在实际应用中，你可能会有一个更复杂的服务工作线程设置，以处理不同类型资源的不同缓存策略（例如HTML、CSS、JavaScript、图像）并根据需要动态更新缓存。
大家好，我是柒八九。 前天在Web性能优化之Worker线程(上)中针对Worker中的专用工作线程Dedicated Worker做了简单介绍和描述了如何配合webpack在项目中使用。...但是，我感觉针对「服务工作线程」在项目优化方面还是有很大的可探索的空间的。 那我们就闲话少叙，开车走起。 由于该篇是介绍性文章，难免有一些比较生硬的概念。...安装中状态 「安装中状态」是执行「所有」服务工作线程设置任务的状态。这些任务包括在服务工作线程控制页面前必须完成的操作。...如果有一个活动服务工作者线程，则这个作为替代的服务工作线程可以通过如下方式进入激活中状态。 原有服务工作线程控制的客户端数量变为 0。 这通常意味着「所有受控」的浏览器标签页都被关 闭。...该 Response对象实际上来自哪里完全由服务工作线程决定。可以来自「网络」，来自「缓存」，或者「动态创建」。
使用此插件添加的Service Worker仅在生产环境中启用（例如，仅当您运行“npm run build”或“yarn build”时）。...建议不要在开发模式下启用ServiceWorker，因为这可能导致使用以前缓存的资源而不包括最新的本地更改的情况。...此service worker文件实际上是一个“no op”，它将重置以前为其注册的任何service worker 服务host:port。...如果需要在本地测试service worker，请构建应用程序并从构建目录运行一个简单的HTTP服务器。为了避免浏览器缓存的复杂性，推荐新打开一个窗口。...这个选项是用来为icons 和 mainfest 添加版本，用来针对浏览器缓存问题。它将会在icons和mainfest url上追加?
但这表明Web正在以渐进增强的方式走出PC时代，向着移动化发展 二.试玩 依赖环境 HTTPS 要求服务源必须是安全的，所以需要HTTPS环境。...，为了达到首屏立即加载的效果，可以把带loading和默认占位图的页面框架作为App Shell展示出来。...如开篇所说，PWA并没有天生的（首屏）性能优势，Web App适用的常规优化手段仍然是必要的 闪屏（Splash） 从主屏图标进入，可定制的启动过程显示内容包括：标题，背景色和图像。...为了屏蔽这些边界case，推荐使用GoogleChromeLabs/sw-precache帮助处理缓存控制问题（包括过期，更新策略等等） 缓存有了，接下来实现代理部分，拦截请求，并把缓存内容作为响应：...： 按资源列表预先缓存静态资源 拦截请求 把缓存内容作为响应给过去 有3个注意事项： 浏览器缓存可能会影响缓存更新，所以install事件处理器中的请求不会走缓存，而是直接进入网络 注销service
，使用服务端渲染，首屏渲染时间减少到1.1s，首屏完整渲染时间减少到2.4s - 这提高了用户在页面加载速度的感知，他们可以更提前获取内容，而且在测试中显示在SEO也略微改善。...但是缺点就是在初始交互时间有糟糕的影响。 ? 尽管用户可以看到网站内容，但是当初始化加载javascript时主线程被阻塞了，并且就堵在那里。...使用SSR，浏览器需要比之前请求处理更大的HTMl负载，并且接着请求，解析／编译，执行Javascript。虽然这样高效的做了更多工作。 但这意味着第一次交互时间需要6.6s，反而不如之前了。...下面我可以看到Service Worker的注册和他们如何使用sw-precache-webpack-plugin来缓存资源。...如果你只想在Webpack中仅使用别名preact和preact-compat生成构建（例如，如果你最开始使用Enzyme），请确保在部署到服务器之前彻底测试一切正常工作。
PWA 的优势 PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节，请参阅 PWA的优势。...简单概括为以下几点 可以支持离线观看 可被识别成一个应用程序 响应式 适合任何形式的设备 安装PWA插件 安装PWA前提是全站支持HTTPS协议 需要自行去域名服务商申请SSL证书 HEXO版本为4.1.1...应遵循如下规则： 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹； scope 可以设置为 ../ 或者更高层级的路径来扩大PWA的作用域；...如果需要填写多个尺寸，则使用空格进行间隔，如”48x48 96x96 128x128” type {string} 图标的 mime 类型，非必填项，该字段可让浏览器快速忽略掉不支持的图标类型 在博客\...和 manifest.json 与之对应 推荐图片大小转换网站：iloveimg 最后输入以下内容即可 # 清理缓存/生成静态页面/本地预览 $ hexo clean && hexo g && hexo
配置 PWA 插件 需要创建或修改项目中的vue.config.js，配置项以及示例在此处 我想多提几句的配置项有三个： workboxPluginMode 可选配置项，默认为GenerateSW GenerateSW...： 将指定（或指定文件夹中的）文件添加到 precache manifest 中，或从中排除，支持使用正则表达式 自动跳过 Service Worker 的等待阶段 添加离线 Google Analytics...其有一个坑点，就是你无法设置不去添加某些或，也就是强制性的 这主要会影响到maskIcon，是 Macbook 的 Touch Bar 上的图标，由于要求必须是 svg，个人开发的小应用一般懒得去制作这个图标...，我只描述大致的思路和做法，因为我没有实际完整地实践过，因为比较复杂麻烦（好的下面我就开始云了） 我们需要在workboxOptions中将skipWaiting设置为false，或者不设置，因为默认值为...，SW 就会 skipWaiting 但实际情况是，最终生成的 SW 中并没有这一段代码（也并没有放置在其他 js 中），我猜测这可能是因为加入代码的这一特性是 Workbox 4 才加入的，而插件生成的
Web Worker 是一个统称，具体可以细分为普通的 Worker、SharedWorker 和 ServiceWorker 等，接下来我们一一介绍其使用方法和适合的场景。...缓存和返回请求 self.onfetch = (event) => { event.respondWith( caches .match(event.request) // 此方法从服务工作线程所创建的任何缓存中查找缓存的结果...调试方法 在浏览器中查看和调试 ServiceWorker 的代码，需要输入 chrome://inspect/#service-workers 演示效果 上面代码中，我缓存了 131.png。...ServiceWorker 可以缓存资源，提供离线服务或者是网络优化，加快 Web 应用的开启速度，更多是优化体验方面的。...示例代码：https://github.com/Pulset/Web-Worker 参考文献 在网络应用中添加服务工作线程和离线功能(https://developers.google.com/web/
但是上述的压缩场景对于SPA项目来说不太可能实现，因为字蛛是通过扫描HTML来获取页面需要哪些字的，SPA项目的HTML没有经过加载空空如也，啥也没有；而且对于含有输入场景的网页，由于用户的输入有不确定性...，这明显是划不来的，所以按需引入的重要性非常高，引入第三方库的时候因随时注意，是否因为使用一个小功能而大大增加打包后的产物体积。...5.2、项目引入（vue-cli项目例子） 下面使用vue-cli项目进行示范，如何在项目中接入SW和workbox： // vue.config.js // 首先需要安装 serviceworker-webpack-plugin...：这个策略的工作路线如下图，它会优先从缓存中读取数据，同时每次请求也会在后台去服务器请求来更新数据。...当缓存中没有数据的时候，就会把服务器的请求返回给客户端使用，并且更新缓存。
JDK动态为什么要实现接口？ spring默认事务传播属性是什么？嵌套事务子事务什么时候commit？ spring和springMVC是什么关系？有没有用过JdbcTemplate？...16.springMVC中对整个请求的处理流程是怎样的？返回json的话是用哪个view？ ioc原理、aop原理和应用 springmvc底层实现大致逻辑?spring mvc有哪些常用的注解？...spring中Bean的作用域，几种scope区别，springMVC的controller是线程安全的吗？怎么去保证线程安全呢？ 对spring的理解,仔细讲解一下spring的两大特性。...手写个jdk动态代理 spring事务的原理 springmvc的几个核心类及请求过程 @Autowired的作用 Spring的单例Bean是线程安全的吗？...如何使用 SpringBoot 自动重装我的应用程序？什么是嵌入式服务器？我们为什么要使用嵌入式服务器呢？如何在 Spring Boot 中添加通用的 JS 代码？
对于缓存，我们并不陌生，但是我们想有主观意识的缓存，我想缓存什么，缓存多久，缓存和请求资源的策略是什么都有自己来定，service worker 能帮我们做到。...相信大多人看到这些概念是蒙的，我们只需要围绕一个概念：缓存 ，并且是策略性的，存什么是可以控制的，也给我们开发离线应用提供了思路。 使用Workbox 还记得那个 sw.js 文件吗？...是workbox提供的缓存策略API，常用的有以下几种 策略名 API staleWhileRevalidate 当请求的路由有对应的 Cache 缓存结果就直接返回，在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新...{html,js,css}'], }) ] // ... }); 使用 workbox 提供的 Webpack 插件必须在 app/sw.js 中包含以下代码才能完成预缓存内容列表注入工作...__precacheManifest || []); 到这里，能想象通过我们对于项目中资源的配置，支持离线访问吗？通过这些配置能够极大提升应用性能，策略，你要的才是最美的。 我是合一，英雄再会！
这意味着它们可以控制页面中的所有网络请求，并且可以对其进行编程，使用缓存的进行响应。 Service Worker 特点 网站必须使用 HTTPS。...除了使用本地开发环境调试时(如域名使用 localhost) 运行于浏览器后台，可以控制打开的作用域范围下所有的页面请求 单独的作用域范围，单独的运行环境和执行线程 不能操作页面 DOM。...服务工作者启用以下功能，这些功能也是 PWA的核心： 离线功能 定期后台同步 推送通知 离线功能 Service Worke 通过缓存资源和拦截网络请求来提供离线功能，这些请求可以与先前缓存的资源一起使用...我们可以从中得出两个步骤： 预缓存 从缓存中处理请求 这两个步骤都利用了Cache API，它由 Web Workers 和浏览器使用，并且为我们提供了用于网络请求的存储机制。...定期后台同步 正如在引言中已经提到的那样，Service Worker 与其他服务工作者在一个单独的线程上运行，所以即使关闭页面，它们也可以执行其代码。 此功能对于执行后台同步和提供推送通知很重要。
之前加载过的css和js都被缓存了。 所以这里是有点小问题的，毕竟我服务器更新了，你service worker 没给我更新缓存，就说不过去了。...这妥妥的Native的能力啊） 2.允许新服务工作线程自行做好运行准备，无需中断当前的服务工作线程。...（准备替换旧的service woker） 3.确保整个过程中作用域页面由同一个服务工作线程（或者没有服务工作线程）控制。 4.确保每次只运行网站的一个版本。...3.调用 .register()，仅在ServiceWorker网址已发生变化时。 4.在获取更新时遵循（长达 24 小时）服务工作线程脚本上的缓存标头。...在您的服务工作线程脚本上，您可能需要 max-age 为 0。
即使在比较糟糕的网络环境下，也能够快速地加载，且能够推送相关消息, 也可以像原生应用那样添加至桌面或浏览器主屏，能够有全屏浏览的体验。 PWA 和 Service Worker 是什么关系？...Service Worker 是一个运行在浏览器后台进程里的js，基于它可以实现消息推送，静默更新以及拦截和处理网络请求，包括可编程的响应缓存管理，是 PWA 的核心。...工作原理 Service worker 是一个完全独立于 Web 页面的 js 脚本，有他自己的生命周期。...从使用开始 准备工作 首先你的站点必须支持https (这也是为什么这两天你访问开源实验室出错的原因，在转全站 https)。 其次，你至少得懂一点 js开发。...首先 run 起你本地的 server(我博客是 jekyll 生成的，所以直接用了 jekyll 服务)，然后 Chrome 右上角三个点，More Tools，Developer Tools。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
