•微信公众号 《JavaScript全栈》•掘金 《合一大师》•Bilibili 《合一大师
https://github.com/omnipotent-front-end/blog/issues/2
将应用中的静态资源缓存是目前最主流的性能优化方法，甚至能让应用秒开！目前常见的缓存方式有http缓存、memory cache、disk cahce、localstorage、Service worker缓存等方式，本文介绍的Workbox就是实现Service worker离线缓存的一个工具。
然后新建一个文件 service-worker.js , 你们可以写上一个最简单的 registerRoute 方法:
PWA（Progressive Web App - 渐进式网页应用）是一种理念，由 Google Chrome 在 2015 年提出。PWA 它不是特指某一项技术，而是应用多项技术来改善用户体验的 Web App，其核心技术包括 Web App Manifest、Service Worker、Web Push 等，用户体验才是 PWA 的核心。
Service Worker 是事件驱动的 worker，生命周期与页面无关，关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动.
PWA 是 Progressive Web App 的缩写，即渐进式 Web 应用，目的是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。
网站的性能一直是前端工程师努力的方向之一，更加流畅的体验，更加快速的页面呈现，都是好的web网站的指标之一。
特别是对于首屏资源加载中的白屏时间，用户等待的时间就越长，用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出，“人类将被动等待高估了 36%”（https://mazey.cn/t/em）。这意味着用户感觉到的等待时间比开发工具记录的长得多。
PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节，请参阅 PWA的优势。简单概括为以下几点
Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。
service worker 介绍：https://segmentfault.com/a/1190000016028780
如果您的目的不是为现有的 vue 项目添加 PWA 支持，那么更推荐尝试 Lavas
用户为何会觉得页面卡？ ： 1. 等待时间长（性能） 项目本身包/第三方脚本比较大。 JavaScript 执行阻塞页面加载。 图片体积大且多。 特别是对于首屏耗时中的白屏时间，用户等待的时间就越长，用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出，“人类将被动等待高估了 36%”（https://mazey.cn/t/em）。这意味着用户感觉到的等待时间比开发工具记录的长得多。 2. 看起来卡（体验） 页面结构不断调整，不连贯。抖动的页面往往让用户感觉很卡。 首先
在 《web messaging与Woker分类：漫谈postMessage跨线程跨页面通信》介绍过ServiceWorker，这里摘抄跟多的内容，补全
不是所有的宏都是可以在 app 或者移动浏览器上可以使用和显示的。如果 宏不能够被显示，你将会看到下面的消息，或者你可以通过单击上面的图标将你的移动浏览器上显示桌面的版本。
PWA的全称是Progressive Web Apps，译为渐进式网络应用程序。装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。最终效果不尽相同，但是都可以实现原生应用体验和更新弹窗提示。其实还有个离线博客，但是视方案不同会有很多BUG，而且离线博客意义何在啊！
自Vue.js 3.0爆出，三大主流框架，写法也是越来越相似，越来越贴近 WebComponents 标准，而周边应用层面的封装已经开始指数级增长。小程序是今年最火的技术，接连出现，快应用也想分一杯羹。PWA（Progressive Web App）进入稳定期，尤其是 PWA桌面版，可以让我们更好的看清楚 PC 桌面版开发的全貌。移动端还是以强运营为主，各大公司都开始不再 全力推动 移动端了，开始重视多端并进，到了开始拼细节的阶段了。TypeScript 全面开花，GraphQL 蠢蠢欲动，WebAssembly 更是打开了浏览器上多语言的大门。所有的这一切都在暗示，浏览器即操作系统，你能想象到未来前端的样子么？
npx-cli.js –ignore-existing create-react-app . –scripts-version –typescript
菜单按钮来在左侧页面中打开菜单面板。选择 通知（ Notifications ），来查看通知的详细内容。你可以通过行内的操作来进行回复，关注或者点赞。点击 打开（Open） 在新的页面中打开页面或者博客页面。有关完整的内容细节，请参考 Workbox Notifications 页面中的详细内容。
大家好，我是 ssh，前几天在推上冲浪的时候，看到 Francois Valdy 宣布他制作了 browser-vite，成功把 Vite 成功在浏览器中运行起来了。这引起了我的兴趣，如何把重度依赖 node 的一个 Vite 跑在浏览器上？接下来，就和我一起探索揭秘吧。
协同合作和编辑不仅仅是发生在页面中，很多时候你需要与你的项目小组针对文档，报告，图片，表格进行协同操作。不管是针对性的市场计划或者一个完整的项目计划，你可以在 Confluence 中让你的项目小组成员针对你的文档提供反馈，并让你们能够协同进行工作。
VITE+PWA默认缓存最大的文件大小为2 * 1024 * 1024字节 如果构建出来的某个文件大于2M则会告警，例如：
步骤 添加依赖 npm i vite-pwa-plugin -D 修改配置 vite.config.ts import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import {VitePWA} from 'vite-plugin-pwa' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(),
尝试在博客利用 InstantClick 和 Hexo 的两个插件 hexo-service-worker、hexo-filter-optimize 让博客快如闪电⚡。
距离我上一次更新文章，也有一小段时间了。本来从第一次搭建博客开始，每年五一左右都会重构以下博客，主要就是：结构优化、样式更新、功能调整等等。当然，这只是针对博客的，因为个人云服务相对较多，所以五一时间还是被占用比较多的。去年五一就几乎把所有的个人服务都整成自动化的了，这也是享受到了科技进步的福利。而我要做的，基本就是把commit给push到私有仓库里面，然后就不用管了。
本文首发于掘金，各位可以通过点击文章下方的阅读原来来访问原文地址。本文略有修改。 无论是在桌面端还是在移动端 ，Web 都处于高速发展中。每个人都能轻松地构建快速且身临其境的页面。同时，开发者工具也越来越强大、越来越多样。 Google I/O 2018, chrome 团队 leader Ben Galbraith 和 amp 项目 leader Martha 携手从 Google 的角度描绘了 Web 世界的现状。 Service Worker Service Work
默认情况下，Create-react-app CRA的工作方式是在开发人员模式下不存在ServiceWorker，并且任何以前安装的sw都将被虚拟人替换。 首先，将src/index.js中的 serviceWorker.unregister() 替换为 serviceWorker.register()
可以说 React 为Web开发者带来了全新的开发模式，而在各类新功能下，如何达到性能最优仍是我们需要关心的。今天做一次精读尝试，原文地址在文末，话不多说，先呈上一份性能清单：
目前主流框架react、vue、argular等（还有很多），国内大多数在Vue/React中，argular也有，但似乎用的不多。Vue3.x针对性能，渲染机制等也是一个不错的选择，不过抉择根据你的实际情况来定，我此次选择的是react，原因有很多，就不一一赘述了。
WebAssembly + Emscripten, Web 组件 + Lit, Service Workers + Workbox，以及全新 Web API 在此汇聚。Chrome 和 Adobe 正在携手打造新的图像编辑体验。
最近想做一个项目介绍自己的一些项目和日常的文档，让文档有个属于自己的家，https://g.xgss.net 使用gitbook之后，又看到了vuepress，感觉还是挺好用的。
ServiceWorker作为前端革命领袖，毫不夸张地被誉为前端黑科技，此文将阐述如何巧妙的使用它来实现一些看起来匪夷所思的事情。
最近想做一个项目介绍自己的一些项目和日常的文档，让文档有个属于自己的家，https://{你的域名} 使用gitbook之后，又看到了vuepress，感觉还是挺好用的。
高级也就是相对于基础的优化。从以下角度进行优化： 提升开发体验； 提升打包构建速度 减少代码体积 优化代码运行性能
一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。
将 react 和 webpack4 进行结合，集 webpack 的优势于一身，从 0 开始构建一个强大的 react 开发环境。
在前几天师夷长技以制夷:跟着PS学前端技术文件中，我们提到了WorkBox，然后自己也对这块很感兴趣，所以就利用业余时间进行相关资源的查询学习和实践。在学习过程中发现，想要弄明白WorkBox，有一点很关键，我们需要搞懂Service Worker。
K 歌移动客户端19年在直播间中上线了视频礼物资源动画能力，使用特制的视频资源加通道导出和混合 (基于企鹅电竞vapx方案)，支持了细腻的视频动画素材播放渲染，同时解决了直接播放视频背景无法透明的问题。 在随后的新 pc 主播端项目中我们对直播工具进行重构 (主界面 UI 基于 web 完成)，礼物动画部分由于当时没有 web 版本的 sdk，为了复用线上已有的动画资源以及和移动端保持对齐的效果，web 端通过 video + canvas/webgl 实现进行了支持。 此文回顾
多年来，Photoshop一直是图像编辑和平面设计的顶级工具，为创意工作者在Windows和macOS上提供了无限的创作可能性。然而，如今我们有机会让它摆脱桌面的束缚，打开崭新的大门。
因为工作上的需要，刚好有跨端和离线缓存的需求，就开始深入研究很早之前就关注的 PWA 技术。也刚好赶上微软、英特尔与谷歌携手举办的“第二届中国 PWA 开发者日”。有幸可以参加这次盛会，在会上，我们看到了很多新的工具和技术。
Webpack5 在 2020 年 10 月 10 日正式发布，并且在过去的几个月中快速演进和迭代，截止 1 月 28 日，Webpack5 已经更新了 18 个 minor 版本，带来了许多十分吸引人的新特性。据官网介绍[1]，Webpack5 整体的方向性变化有以下几点：
webpack5 预计会在 2020 年年初发布，之前从 alpha 版本就有关注，本次重点更新在长期缓存，tree shakking 和 es6 打包这块。具体变更可以参考https://github.com/webpack/changelog-v5/blob/master/README.md。
其他的使用步骤一样, 参考样例, 其实其他的UI库的使用方式都一样, 没有啥好记得, 用的时候翻翻文档,就可以了
这是一个 Webpack 插件。使用时，通过传入特定的 正则表达式，筛选出需要缓存的静态 JS、CSS 文件，在 HTML 页面中注入一段代码。
WebRTC面临的最大挑战之一是跨平台提供一致、可靠的支持。对于大多数应用程序，尤其是那些在网络上启动的应用程序，这通常意味着除了支持网络应用程序之外，还需要开发原生或混合移动应用程序。渐进式网络应用程序（PWA）是一种新概念，它能够通过允许基于网络的应用程序在不引入中间混合框架的情况下，看起来并像本地移动应用那样运作，从而将实现应用程序在网络上统一。正如将要讨论的那样，这种方法优点颇多，但它对WebRTC应用程序确实是有意义的吗？
「打工人 打工魂 打工人都是人上人」。是不是还沉浸在2024的放假通知中，小伙该收收心了。毕竟，你多打一天的工，老板就离他在游艇中喝着香槟和美女一起海钓的梦想又更进一步了。好了，玩归玩，闹归闹。作为一个职业打工人，我们还是要着眼于当下。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
