5 王乐平

阿里巴巴(中国)有限公司 - 软件工程师

我要认证

热爱『健身、书法、摄影』的IT男。 如果你想雇佣我,请发邮件: leping086@vip.qq.com。

等级
TA的排名 1w+

「浏览器插件」非常好用的JSON-View

Chrome 商店地址查看/格式化 二合一。功能• 自动识别 JSON 内容,并在页面右下角创建切换按钮。• 支持展开/折叠节点。• 支持全部展开、全部折叠、展开一二三层节点操作。• 支持复制节点信息(Array/Object 节点复制内容自动格式化)。• 复制文本节点值 不会添加引号。• 自动识别超链接,可点击。• 支持在当前页面,原始内容和格式化内容随意切换。• 对于复制的JSON文本,可点击插件打开新的编辑解页面,缩短使用链路。自动识别JSON内容,右下角出现切换按钮为了保.

2020-10-23 11:11:20

[会议分享]2020全球软件大会分享-PWA在项目中的最佳实践

大会地址:https://www.bagevent.com/event/1233659#

2020-09-20 23:18:29

我的新书《PWA入门与实践》上市了

前言我初接触PWA是在2017年年初,当时参加了一个前端分享会,其中一个主题就是与PWA相关的,介绍了PWA的Service Worker和安装到桌面的能力,以及这门技术未来的发展趋势,听完这个分享后,我就为PWA的一些能力所吸引。Web本身的优势就非常明显,如可分享,可搜索,无须下载,在任何设备上有相同的展示等,现在再加上PWA的能力,让Web在原有的基础上具备了类原生应用程序的功能,这对...

2020-05-07 00:24:40

[工具]TS 视频合并工具

简介当下载 m3u8 资源时,通常产生的是多个 ts 视频文件,所以需要借助某些工具来将这些 ts 视频片段整合为一个视频文件。本软件主要解决的就是这个问题,底层基于ffmpeg,可正常运行在 Windows 和 Mac 平台。不仅可以合并 ts 为单个通用的视频文件,还支持视频格式转换。Github下载目前支持 win-x64 & mac-x64:地址ts文件合并工具,同时...

2020-04-19 12:01:23

各种浏览器缓存浅析

前言目前浏览器的缓存类型众多,HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等,这些缓存是如何产生的?命中优先级是怎么样?又该如何去使用它们?Disk Cache、Memory CacheDisk Cache、Memory Cache 属于强缓存,将缓存的响应写到内存或硬盘中,也属于 HTTP 缓存的产物...

2019-11-03 15:49:26

「工具」PWA Manifest图标及 favicon.ico 生成工具

PWA 其中有一个能力就是把网站安装到系统桌面,以原生应用的体验来运行网站,使用户无需再找开浏览器输入网址进入网站,而是可以直接点击安装好的应用直接运行,给使网站访问缩短路径及增加网站的曝光度。其中有一个问题就是需要生成应用的图标,通常来说需要在 manifest.json 的应用清单文件中配置多种尺寸的 ico 来适配不同分辨率的设备。而通常来说设计师只会给一个尺寸的图标。为了解决生成不同分...

2019-09-22 18:15:18

「工具」IndexDB 版备忘录

前言工作日常需要做一些备忘录,记录一些要做的事。在 Mac 上有使用系统的备忘录,但功能偏弱且文本格式调整不方便。再就是使用浏览器找专门的备忘录网站,功能是满足了,但是链路长,没有桌面软件直接。所以最后干脆自己写一个吧。思路开发上自然是 Web 应用快,且成本低不需要下载安装,而且现在 PWA 的 Web 应用支持安装为应用,所以搞起来。使用技术:ReactMarkedIndex...

2019-07-26 23:24:22

PWA(Progressive Web App)入门系列:安装 Web 应用

前言在传统的 Web 应用中,通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问,或者把网页地址创建到桌面上通过点击,然后在浏览器里打开。传统模式下,图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和控制。而目前可以通过 PWA 标准中的特性来完成上面这些功能,使得访问 Web 应用的路径更短、曝光性更大,下面说一下这一块。

2019-07-03 18:24:03

PWA(Progressive Web App)入门系列:Sync 后台同步

# 前言当我们在一些地下停车场,或者在火车上、电梯等无法避免的信号不稳定的场所,使用网站应用处理一些表单操作或者上传数据的操作时,面临的将是网络连接错误的响应,使用户的操作白费。而此刻 PWA 的 Sync API 就很好的解决了这个问题,让用户处理一些数据上传的操作时,无需关系网络环境,所有相关操作均会完成。Sync API 也是 PWA 离线里面的重要一环,下面就说一块。

2019-06-29 23:59:33

超方便的 IndexDB 库

前言做为 Web 浏览器层的本地存储,IndexDB 做为一个很好的选择,几乎可以存储任意类型的数据,且是异步的。但是正常使用方式下需要在监听各种事件来处理结果,不是很方便,下面就对这一层进行了包装,使用方便。IndexDBWrapper 库IndexDBWrapper 库是参考 workbox 相关 DB 操作开发的,下面具体说明下使用。包地址:https://www.npmjs.co...

2019-06-20 21:41:11

PWA(Progressive Web App)入门系列:消息通讯

前言serviceWorker 的能力决定它要处理的事情,网站页面的部分逻辑处理会转移到 serviceWorker 层进行处理,这里就要页面层和 serviceWorker 层进行交互来实现消息通讯。下面就说一下两个环境下的消息通讯。窗口向 serviceWorker 通讯

2019-06-17 01:37:18

PWA(Progressive Web App)入门系列:Push

# 前言很多时候,原生应用会通过一些消息推送来唤起用户的关注,增加驻留率。网页该怎么做呢?有没有类似原生应用的推送机制?推送功能又能玩出什么花样呢?

2019-05-29 15:56:12

PWA(Progressive Web App)入门系列:Notification

# 前言在很多场景下,需要一种通知的交互方式来提醒用户,传统方式下可以在页面实现一个 Dialog,或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足,在网页最小化的情况下,无法查看任何通知,导致用户无法及时获取通知信息。给力的 W3C 推出了 Notifications API,专注于 WEB 的通知。

2019-05-09 22:00:47

PWA(Progressive Web App)入门系列:Fetch & Request & Headers & Response & Body

前言在 WEB 中,对于网络请求一直使用的是 XMLHttpRequest API 来处理,XMLHttpRequest 也很强大,传统的 Ajax 也是基于此 API 的。那么为什么 W3C 标准中又加入了类似功能的 Fetch API 呢?他有何优势。Fetch什么是 FetchFetch API 是 W3C 正式规范中加入的新的用于网络请求相关的功能 API,核心就是对于 HTT...

2019-04-27 10:38:16

PWA 应用列表及常用工具

做 PWA 的过程中写了一些相关的应用和工具,在这里整合下,方便查找使用。

2019-04-24 15:51:14

PWA 可用性检测工具

针对移动端或者 PC 端浏览器是否对 PWA 可用的问题上,做了一个站点,来实现上述问题的方便检测。让开发者较快的了解终端浏览器的特性支持度。使用工具地址:https://lecepin.gitee.io/detect-sw/地址二维码:检测可用:进入后,底部有调试信息。第二次进入后,图片响应修改为 “图片来自SW”。不可用:不显示任何调试信息 且 图片来自网络响应。...

2019-04-17 16:30:46

Workbox-Window v4.x 中文版

Workbox 目前发了一个大版本,从 v3.x 到了 v4.x,变化有挺大的,下面是在 window 环境下的模块。什么是 workbox-window?workbox-window 包是一组模块,用于在 window 上下文中运行,也就是说,在你的网页内部运行。 它们是 servicewoker 中运行的其他 workbox 的补充。workbox-window的主要功能/目标是:...

2019-03-14 01:48:21

「浏览器插件」无广告国内视频平台直接播放插件

前段时间发现一些比较不错的解析国内视频平台的一些 API 接口,很早之前基于这些接口做过一个 Android 端的播放软件,但为了更方便使用吧,于是做了一个Chrome 的浏览器插件,解析接口也是在线更新的,所以用起来会比较方便。不知什么原因,扩展在 Chrome 商店中被下架了(当然国内也无法访问商店),所以这里提供了文件下载,可直接安装。下载地址:下载国内基于 Chrome 内核的浏览...

2019-02-23 15:44:06

PWA(Progressive Web App)入门系列:Cache Storage & Cache

前言目前浏览器的存储机制有很多,如:indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等,那为什么又制定了一套 Cache API 呢?对比其他存储机制有什么优势?简介Cache API 是一套搭配 PWA serviceworker 赋能的存储机制,来实现请求数据离线功能。与 applicatio...

2019-02-22 01:38:07

Workbox.strategies v3.x 中文版

NAMESPACE STATICVERSION V3.6.1该模块提供了大多数serviceworker常用的缓存策略的简单实现。类CacheFirstcache-first请求策略的实现。缓存优先策略对于带版本号的资源是非常有用的,像这种URLstyles/example.a8f5f1.css,因为它们可以长时间缓存。CacheOnlycache-only请求策...

2019-01-10 20:41:12

查看更多

CSDN身份
  • 博客专家
勋章 我的勋章
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 分享宗师
    分享宗师
    成功上传21个资源即可获取