一些比较糟糕的做法是在 WIFI 网络下把整个 App 客户端的资源都拉下来，这样其实很多资源是用户不需要的，浪费了用户的网络和存储。...比如，在小程序页面发版时，推送消息给客户端，客户端唤起页面的 service worker，去将需要用到的资源提前加载回来。 1.2....从 API 的使用规范来看，消息推送与通知弹窗的关联比较密切，基本上使用的业务场景仅限制在消息通知范围。 1.3....Service worker 线程的运行状态, 一般对应 service worker 线程的状态，这类状态只保存在内存中。...//stroage\.fredliang.\.cn/'), workbox.strategies.staleWhileRevalidate() ); self.addEventListener('
我们常用的字体文件格式是TTF（TrueType Font），由苹果和微软为 PostScript 而开发的字体格式，它被开发时就没有考虑为web使用，所以它们没有经过压缩，体积往往较大。...那么我们如何缓存呢？这里就不讲什么协商缓存和强缓存了，这种网上太多了，不再赘述，这次讲另一种缓存，使用Service Worker。...对于SW的介绍、基础用法和常见API，可以参考MDN上的SW的使用教程。本文这里直接从使用说起，如何接入项目进行使用。...5.2、项目引入（vue-cli项目例子） 下面使用vue-cli项目进行示范，如何在项目中接入SW和workbox： // vue.config.js // 首先需要安装 serviceworker-webpack-plugin...当缓存中没有数据的时候，就会把服务器的请求返回给客户端使用，并且更新缓存。
的概念，针对其原理和如何运用进行介绍。...查看请求发现，基本没有js和css的请求，因为它把全部的不需要改动的资源都放到了localStorage中： ? 所以微信的文章页加载非常的快。...这导致页面的更新只能通过manifest文件中的版本号来决定。所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。...serviceworker是如何在生产环境中使用的吧。...缓存中没有结果，那就会发起网络请求，拿到网络请求结果并将结果更新至 Cache 缓存，并将结果返回给客户端。
如果有一天，硬件成本和实现难度不再是阻碍，也许便没有了“优化”这个字眼。 当下，前端面临的优化与挑战更多，复杂的终端环境，各种不同的浏览器内核，尺寸不一的浏览设备，兼容要做。...，关于其相关的配置和处理，我们一起去 sw.js 文件中定义吧！...Workbox didn't load ?`); } 更改完成后，回到浏览器，此时刷新浏览器没有任何变化，这里需要提醒一点，更改完 service worker 注册文件需要终止重启或者更新。...开始使用Workbox Workbox 定义了标准统一API，我们来看如何借助它提供的API逐步优化项目 路由请求定义缓存 在 Workbox 中，最核心的概念要数基于路由的策略缓存了，这里抓住两个关键词...，并将结果返回给客户端 networkOnly 强制使用正常的网络请求 cacheOnly 直接使用 Cache 缓存的结果 一般场景下，以上5种策略基本能满足要求，如果还有不满足的情况，可自定义策略
在 Service Worker 中我们可以做很多事情，比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等，其中最重要的作用之一就是离线资源缓存。...所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。...他们旨在（除开其他方面）创建有效的离线体验，拦截网络请求，以及根据网络是否可用采取合适的行动，更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步API。...相对于驱动应用的主JavaScript线程，它运行在其他线程中，所以不会造成阻塞。它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用。...可以像如下方式使用 Network First 策略： cacheFirst 这个策略的意思就是当匹配到请求之后直接从 Cache 缓存中取得结果，如果 Cache 缓存中没有结果，那就会发起网络请求，
和 workbox.core.cacheNames.runtime 获取当前定义的预缓存和动态缓存名称。...： NetworkFirst：网络优先 CacheFirst：缓存优先 NetworkOnly：仅使用正常的网络请求 CacheOnly：仅使用缓存中的资源 StaleWhileRevalidate：从缓存中读取资源的同时发送网络请求更新本地缓存...第一步：使用workbox-webpack-plugin 安装 npm install workbox-webpack-plugin 在webpack 配置文件中引入并配置 workbox-webpack-plugin...(/^https:\\/\\/img.xxx.com\\//,new StaleWhileRevalidate()); 上述的代码有一段针对单页应用处理的逻辑，应为单页应用依靠路由变化来加载不同的内容，...使用navigationRoute可以匹配导航请求，从而从换从中加载index.html，但默认情况会拦截所有导航请求，如果需要控制，可以在方法中添加白名单和黑名单加以控制。
用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验。...当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...如何使用 Workbox？ Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...使用 Stale While Revalidate strategy 缓存 CSS、JavaScript 和 Web Worker，将缓存的资源存储在一个名为 assets 的缓存中。...客户端缓存支持 客户端在页面首次加载后把资源缓存下来，之后每次加载不进行网络请求直接读取缓存，然后再对比本次请求的版本和线上的版本，若有更新再次缓存以供下次访问，极大的缩短白屏时间。
用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验。...当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...使用 Stale While Revalidate strategy 缓存 CSS、JavaScript 和 Web Worker，将缓存的资源存储在一个名为 assets 的缓存中。...离线回退 让 Web 应用在离线工作时感觉更健壮的常见模式是提供一个后退页面，而不是显示浏览器的默认错误页面。通过 Workbox 路由和预缓存，你可以在几行代码中设置这个模式。
PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。...HTTPS，这是使用PWA的基础条件 注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件 重要的事情说三遍！...4.1.1 如何查看版本 hexo -version 安装指定版本 npm install hexo@4.1.1 --save 添加manifest.json和sw.js manifest.json文件...应遵循如下规则： 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹； scope 可以设置为 ../ 或者更高层级的路径来扩大PWA的作用域；...:js|css|jpg|png|gif)'), workbox.strategies.staleWhileRevalidate()); } 注意： 将其中域名改为你自己主页的域名：https?
24 位图像和 8 位 Alpha 透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。...用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验。...当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...A.3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...使用 Stale While Revalidate strategy 缓存 CSS、JavaScript 和 Web Worker，将缓存的资源存储在一个名为 assets 的缓存中。
这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。 这组文档和指南告诉您有关 PWA 的所有信息。...PWA 的优势 PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节，请参阅 PWA的优势。...应遵循如下规则： 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹； scope 可以设置为 ../ 或者更高层级的路径来扩大PWA的作用域；...:js|css|jpg|png|gif)'), workbox.strategies.staleWhileRevalidate()); } 修改主页域名 ^https?...$ 的正则表达式路径，将这个的值修改成你的网站的 host 准备 Logo 图片 为了确保你的 PWA 图标支持所有设备，请务必使用 48x48、96x96、128x128、144x144、180x180
通用本地存储的解决方案 Workbox Workbox 是 Google Chrome 团队推出的一套 Web App 静态资源和请求结果本地存储的解决方案，该解决方案包含一些 JS 库和构建工具，Workbox...在此基础之上，Electron 还提供了 Mac、Windows、Linux 三个平台上的一些原生 API，例如全局快捷键、文件选择框、托盘图标和通知、剪贴板、菜单栏等。 ?...每个编辑器窗口都会启动一个 Node.JS 子进程作为插件的宿主进程，在独立进程里跑插件逻辑，然后通过事件或者回调的方式通知 Renderer 结果，避免了 Renderer 的渲染被插件中 JS 逻辑阻塞...使用新框架的迅雷 X 可以完美支持 2K、4K 等高清显示屏，界面中的文字渲染也更加清晰锐利。...如果公司没有架构组，还是比较难搞定的。 不过也有很多不错的案例，比如 2018 年优酷双十一活动就是使用 Weex 开发的，效果非常不错。
安装 PWA 插件 如果你已经在使用@vue/cli，那么可以直接在可视化界面中安装 PWA 插件 否则，可以通过vue add @vue/pwa命令来安装 该插件会使用谷歌的 PWA 框架 Workbox...： 将指定（或指定文件夹中的）文件添加到 precache manifest 中，或从中排除，支持使用正则表达式 自动跳过 Service Worker 的等待阶段 添加离线 Google Analytics...支持 运行时缓存runtimeCaching，Workbox 的强大所在，阅读这些内容会使你更好地了解如何配置以及具体能做什么： Workbox Routing Workbox Strategies...，我只描述大致的思路和做法，因为我没有实际完整地实践过，因为比较复杂麻烦（好的下面我就开始云了） 我们需要在workboxOptions中将skipWaiting设置为false，或者不设置，因为默认值为...，SW 就会 skipWaiting 但实际情况是，最终生成的 SW 中并没有这一段代码（也并没有放置在其他 js 中），我猜测这可能是因为加入代码的这一特性是 Workbox 4 才加入的，而插件生成的
所以使用 browser-vite 的用户需要创建一个 Vite plugin 来解析裸模块导入。 正则表达式“后行断言” Vite 中的一些代码用了后行断言。...热更新（HMR） Vite 用了 WebSockets 来在服务端（node）和客户端（browser）之间同步代码变更。...如何使用 截止本文撰写时间为止，这个工具还没有做到开箱即用，如果想使用的话，需要阅读很多 Vite 内部的处理细节。 安装 安装 browser-vite npm 包。...一个使用 workbox 的例子： workbox.routing.registerRoute( /^https?...和 Stackblitz WebContainers 相比如何 "WebContainers"：在浏览器中运行 Node.js Stackblitz 的 WebContainers 也可以在浏览器中运行
你可以在你的电话或者其他移动设备上查看和回复你的通知。单击顶部的 菜单按钮来在左侧页面中打开菜单面板。选择 通知（ Notifications ），来查看通知的详细内容。...你可以通过行内的操作来进行回复，关注或者点赞。点击 打开（Open） 在新的页面中打开页面或者博客页面。有关完整的内容细节，请参考 Workbox Notifications 页面中的详细内容。...有关更多Confluence 6 移动界面的使用，请参考页面通过你的移动浏览器使用 Confluence中的内容。 https://www.ossez.com/t/confluence-6/452
Grunt和Gulp是Javascript世界里的用来做自动压缩、Typescript编译、代码质量lint工具、css预处理器的构建工具，它帮助开发者处理客户端开发中的一些烦操重复性的工作。...Grunt和Gulp都在Visual studio 2015中得到支持。ASP.NET 项目模板默认使用Gulp。 Grunt和Gulp Grunt和Gulp有什么区别？...与Grunt不同，Grunt往往在硬盘上是读写文件，Gulp使用流式的API去链式的调用方法，Grunt是早些出现的客户端构建工具，Grunt预定义了大多数经常要做的压缩和单元测试等工作。...Grunt每天都有数以千计的下载和应用。 使用Grunt 这个实例使用Empty ASP.NET项目模板来展示自动化的客户端构建工作。非空的ASP.NET项目模板默认使用Gulp。...监测文件变化 Watch任务可以监视文件和目录的变化，并且在监测到变化后触发一系列任务，在initConfig方法中添加以下的代码来监视Typescript目录下的所有js文件的变化，并执行’all“任务
如果没有，那么在这个网站上有很多其他的指南可以指导你实现这个目标。本指南是如何将你的WebRTC 网络应用程序转换为PWA。...它存在于自己的线程中，独立于代码执行和运行时环境中的其他网络应用程序，甚至可以在网页未打开时运行代码。这是你编写缓存策略并设置推送通知的地方。...阻止通知也很容易，所以最好不要指望被应用程序准许的通知能够按预期设想一样有效。 技巧和窍门 相机的方向 在手机上使用WebRTC时，你需要特别注意相机的方向。...这样的API有很多，所以你可以花点时间了解正在开发的一些新的API，并考虑如何实现它们。并可使用功能检测来确保功能的实际可用。显然，千万不要依赖于你支持的平台上所没有的功能。...随着未来Chrome更新的启发式转变和发展，在你无需执行任何操作的情况下，你的分数就可能会发生变化。出于这个原因，请确保定期运行此测试。
简介 PWA 是 Progressive Web App 的缩写，即渐进式 Web 应用，目的是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。 2....PWA 如何保证网页在离线时仍然能正常展示呢？...我们可以使用 workbox-webpack-plugin 插件： npm install --save-dev workbox-webpack-plugin // webpack.prod.js .....小结 本节只是简单介绍了如何利用 webpack 配置 PWA，引入了这样一个概念，更详细的 PWA 应用和配置，等有需要的时候可以详细了解。...参考 GitChat · 前端 | Webpack 工程的 PWA 实战 Workbox 3.0 – Web 站点轻松做到离线可访问 webpack 中使用 workbox 实现 PWA 2019
使用此插件添加的Service Worker仅在生产环境中启用（例如，仅当您运行“npm run build”或“yarn build”时）。...建议不要在开发模式下启用ServiceWorker，因为这可能导致使用以前缓存的资源而不包括最新的本地更改的情况。...因为11.3之前的iOS没有适当的PWA支持。请参阅这篇文章了解更多细节。...这个选项是用来为icons 和 mainfest 添加版本，用来针对浏览器缓存问题。它将会在icons和mainfest url上追加?...在生成的HTML中的manifest链接标记中为’ crossorigin '属性的值。如果您的PWA位于经过身份验证的代理之后，您可能需要设置此选项。请参阅跨源值了解更多细节。
Web Workers 和 Service Workers 是两种在Web开发中处理后台任务和离线缓存的重要技术。它们在工作原理和用途上有显著区别。...以下是如何使用 Service Worker 进行离线缓存的基本步骤：1. 注册 Service Worker在主页面的 JavaScript 中注册 Service Worker。...Web Workers 和 Service Workers 提供了在浏览器中进行后台处理和离线缓存的强大能力，但使用它们需要谨慎，以避免潜在的性能和安全问题。...推送通知Service Workers 支持通过 Push API 实现推送通知。首先，用户需要订阅服务，然后服务器可以发送推送消息到客户端。...Workbox：Google 提供的库，简化 Service Worker 开发，提供缓存策略、路由管理和自动更新等功能。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
