王乐平 技术博客

热爱『健身、书法、摄影』的IT男。 如果你想雇佣我,请发邮件: leping086@vip.qq.com,需要内推阿里巴巴的,也请发简历到该邮箱...

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

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

2019-06-17 01:37:18

阅读数 13

评论数 0

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

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

2019-05-29 15:56:12

阅读数 25

评论数 0

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

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

2019-05-09 22:00:47

阅读数 904

评论数 0

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

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

2019-04-27 10:38:16

阅读数 54

评论数 0

PWA 应用列表及常用工具

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

2019-04-24 15:51:14

阅读数 101

评论数 0

PWA 可用性检测工具

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

2019-04-17 16:30:46

阅读数 29

评论数 0

Workbox-Window v4.x 中文版

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

2019-03-14 01:48:21

阅读数 130

评论数 0

「浏览器插件」智能二维码插件

其实目前 Chrome 商店里面的二维码插件是比较丰富的,用了几个后发现,有些地方不是很尽人意。 说下我做的这一款的特色吧: 自动获取当前页面的网址,并生成二维码。 也可自行编辑二维码的内容(多行),然后生成二维码。 可设置二维码的纠错率。 可设置二维码的前景色和背景色。 生成的二维码可直接下载...

2019-02-23 16:08:12

阅读数 54

评论数 0

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

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

2019-02-23 15:44:06

阅读数 127

评论数 0

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

前言 目前浏览器的存储机制有很多,如:indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等,那为什么又制定了一套 Cache API 呢?对比其他存储机制有什么优势? 简介 Cache API 是一套搭配...

2019-02-22 01:38:07

阅读数 589

评论数 0

Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 该模块提供了大多数serviceworker常用的缓存策略的简单实现。 类 CacheFirst cache-first请求策略的实现。 缓存优先策略对于带版本号的资源是非常有用的,像这种URLstyles/examp...

2019-01-10 20:41:12

阅读数 133

评论数 0

Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 类 NavigationRoute NavigationRoute可以轻松创建匹配浏览器navigation requests的Route。 它仅匹配mode设置为navigate的请求。 您可以只使用blacklist...

2019-01-10 17:42:10

阅读数 146

评论数 0

Workbox CLI v3.x 中文版

What’s the Workbox CLI? The Workbox command line interface (contained in the workbox-cli package) consists of a Node.js program called workbox that c...

2019-01-02 21:57:50

阅读数 509

评论数 0

ShadowSocks配置信息二维码生成说明

前言以前配置SS的信息时,都是直接将对应的信息填写完成就OK了,但是后来发现SS支持二维码扫描的方式直接自动填写配置信息,于是就研究了一下生成规则。SS的配置项说明通常在SS的目录下,会生成一个gui-config.json 的文件,也就是一个记录SS配置信息的文件,内部是采用json 的格式进行...

2019-01-02 15:28:16

阅读数 84599

评论数 5

Glob Patterns匹配模式使用

前段时间在用workbox时,在做precache时,匹配模式基于的是Glob Pattern模式,于是就看了下相关文档。 下面翻译一下node-glob的使用,原文:https://github.com/isaacs/node-glob#glob-primer Glob 像在shell里面,用...

2018-12-29 23:45:08

阅读数 808

评论数 0

PWA(Progressive Web App)入门系列:(五)Web Worker

前言在说Service Worker前有必要说一下Web Worker,因为Service Worker本身就属于Web Worker的延伸,大部分功能也是基于Web Worker进行的扩展。背景众所周知,JavaScript引擎是以单线程调度的方式进行,我们无法同时运行多个JavaScript文...

2018-01-12 00:14:20

阅读数 1321

评论数 0

PWA(Progressive Web App)入门系列:(四)Promise

前言这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢?因为PWA中的许多技术API中都是以Promise返回的方式返回的,为了对后续章节中PWA技术API更好的理解,这里就来说一个Promise对象。Promise出现的背景在JavaScript当中,处理异步...

2018-01-02 00:54:23

阅读数 1390

评论数 0

PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest

前言前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web App的启动图标、启动样式等。简介manifest是一种简单的json数据风格的配置文件,通过对其...

2017-12-27 13:26:03

阅读数 8767

评论数 20

PWA(Progressive Web App)入门系列:(二)相关准备

前言在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势。为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明。浏览器要求因为目前各浏览器对于PWA的支持度各不一样,在这里为了对PWA有更好的体验及使用,需要对浏览器做一下要求。...

2017-12-26 00:07:33

阅读数 5777

评论数 8

CSS动画实战:创建一个太极Loading图

这里主要是使用CSS的animation和伪类来构建,分析设定关键帧的执行顺序和时间断。效果动画分析首先通过效果对动画执行进行一下分析: 边框的四条边进行按顺序动画加载 。 矩形边框变为圆行边框。 太极图内部图案渐渐出现。 太极图旋转。 整个动画逆序执行。 针对上面的1效果是需要思考一下的,其他都...

2017-08-01 14:50:09

阅读数 4148

评论数 2

提示
确定要删除当前文章?
取消 删除