我们常用的字体文件格式是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...当缓存中没有数据的时候，就会把服务器的请求返回给客户端使用，并且更新缓存。
一些比较糟糕的做法是在 WIFI 网络下把整个 App 客户端的资源都拉下来，这样其实很多资源是用户不需要的，浪费了用户的网络和存储。...比如，在小程序页面发版时，推送消息给客户端，客户端唤起页面的 service worker，去将需要用到的资源提前加载回来。 1.2....从 API 的使用规范来看，消息推送与通知弹窗的关联比较密切，基本上使用的业务场景仅限制在消息通知范围。 1.3....Service worker 线程的运行状态, 一般对应 service worker 线程的状态，这类状态只保存在内存中。...//stroage\.fredliang.\.cn/'), workbox.strategies.staleWhileRevalidate() ); self.addEventListener('
的概念，针对其原理和如何运用进行介绍。...查看请求发现，基本没有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 支持多种缓存策略，每种策略适用于不同的资源类型和场景。CacheFirst：优先使用缓存，只有在缓存中没有找到资源时才会从网络获取。...{handler: 'NetworkFirst',}StaleWhileRevalidate：快速返回缓存中的资源，同时在后台进行网络请求更新缓存。适合资源更新频率较高的场景。...进阶配置6.1 缓存资源版本控制Workbox 通过为缓存的资源生成唯一的 hash 值来控制缓存的更新，每当资源内容变化时，Workbox 会生成新的缓存并更新 Service Worker。...实践中的常见问题缓存爆炸：由于缓存的资源过多，导致缓存空间占满。可以通过 maxEntries 和 maxAgeSeconds 控制缓存的大小和生命周期。...在实际项目中，结合业务需求灵活使用 Workbox 的各项配置，将大大提升应用的用户体验和性能表现。
和 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
Progressive Web Apps (PWA) 的离线优先策略是通过Service Worker和Cache API实现的，它允许在没有网络连接时仍然可以访问网站的部分或全部内容。1....离线通知和重新加载提示当用户离线后重新上线时，可以通过Service Worker发送通知提醒用户重新加载页面以获取更新内容：self.addEventListener('online', (event...更新缓存策略有时你可能希望缓存特定版本的资源，而不是始终使用最新的。...集成WebSocket支持如果你的应用使用WebSocket进行实时通信，可以使用workbox-websocket库在Service Worker中处理WebSocket连接，确保在离线时能够接收和发送消息...测试和监控确保在不同网络条件下测试你的PWA，包括2G、3G和离线状态。可以使用Chrome开发者工具的模拟网络条件功能。同时，使用Lighthouse等工具定期评估PWA的性能和离线体验。14.
通用本地存储的解决方案 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 也可以在浏览器中运行
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“任务
你可以在你的电话或者其他移动设备上查看和回复你的通知。单击顶部的 菜单按钮来在左侧页面中打开菜单面板。选择 通知（ Notifications ），来查看通知的详细内容。...你可以通过行内的操作来进行回复，关注或者点赞。点击 打开（Open） 在新的页面中打开页面或者博客页面。有关完整的内容细节，请参考 Workbox Notifications 页面中的详细内容。...有关更多Confluence 6 移动界面的使用，请参考页面通过你的移动浏览器使用 Confluence中的内容。 https://www.ossez.com/t/confluence-6/452
如果没有，那么在这个网站上有很多其他的指南可以指导你实现这个目标。本指南是如何将你的WebRTC 网络应用程序转换为PWA。...它存在于自己的线程中，独立于代码执行和运行时环境中的其他网络应用程序，甚至可以在网页未打开时运行代码。这是你编写缓存策略并设置推送通知的地方。...阻止通知也很容易，所以最好不要指望被应用程序准许的通知能够按预期设想一样有效。 技巧和窍门 相机的方向 在手机上使用WebRTC时，你需要特别注意相机的方向。...这样的API有很多，所以你可以花点时间了解正在开发的一些新的API，并考虑如何实现它们。并可使用功能检测来确保功能的实际可用。显然，千万不要依赖于你支持的平台上所没有的功能。...随着未来Chrome更新的启发式转变和发展，在你无需执行任何操作的情况下，你的分数就可能会发生变化。出于这个原因，请确保定期运行此测试。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
