PWA
文章平均质量分 64
王乐平
这个作者很懒,什么都没留下…
展开
-
实现图片本地化 ServiceWorker + IndexedDB
1. 背景在一些安全场景,或者一些本地化的场景(如本地化的 Markdown 记事本),如果有图片上传并需要查看的场景,在不上传到服务器的情况下,实现这个效果,通常是把图片 Base64 化,但编码后的字符串会非常长,体验较差。这里不妨尝试使用 ServiceWorker + IndexedDB 来解决这个问题。2. API 优势IndexedDB 几乎什么都可以存储,二进制类的文件更不在话下,且存储空间在大多数浏览器中,是和系统空间持平的。ServiceWorker 可以做页面的网络代理层,所.原创 2022-03-16 18:59:01 · 2996 阅读 · 0 评论 -
解决写文档对于图片边框的强迫症
1. 写文档的困扰在写文档进行配图时,很多时候图片是白色背景的,会导致文章中的图片区域附近有大量空白的感觉,强迫症患者很难受。目前语雀做的是很好的,可以给图片加边框或者阴影,而一些文档博客平台(CSDN、掘金、SegmentFault、知乎等)都是没这块功能的。对比一下:平常有这困扰的时候,通常打开 Photoshop 解决一下,但每次都得多走好几步。尝试找了下有没有在线工具,找是找到了,但要么操作繁琐,要么把你的图片先传到服务器,体验和安全都不好。于是就写了下面这个在线小工具。2. 工具原创 2022-03-09 16:21:37 · 381 阅读 · 0 评论 -
各种浏览器缓存浅析
前言目前浏览器的缓存类型众多,HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等,这些缓存是如何产生的?命中优先级是怎么样?又该如何去使用它们?Disk Cache、Memory CacheDisk Cache、Memory Cache 属于强缓存,将缓存的响应写到内存或硬盘中,也属于 HTTP 缓存的产物...原创 2019-11-03 19:23:16 · 696 阅读 · 0 评论 -
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 · 807 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Notification
# 前言在很多场景下,需要一种通知的交互方式来提醒用户,传统方式下可以在页面实现一个 Dialog,或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足,在网页最小化的情况下,无法查看任何通知,导致用户无法及时获取通知信息。给力的 W3C 推出了 Notifications API,专注于 WEB 的通知。原创 2019-05-09 22:00:47 · 1279 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Push
# 前言很多时候,原生应用会通过一些消息推送来唤起用户的关注,增加驻留率。网页该怎么做呢?有没有类似原生应用的推送机制?推送功能又能玩出什么花样呢?原创 2019-05-29 15:56:12 · 1636 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:消息通讯
前言serviceWorker 的能力决定它要处理的事情,网站页面的部分逻辑处理会转移到 serviceWorker 层进行处理,这里就要页面层和 serviceWorker 层进行交互来实现消息通讯。下面就说一下两个环境下的消息通讯。窗口向 serviceWorker 通讯原创 2019-06-17 01:37:18 · 476 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:安装 Web 应用
前言在传统的 Web 应用中,通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问,或者把网页地址创建到桌面上通过点击,然后在浏览器里打开。传统模式下,图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和控制。而目前可以通过 PWA 标准中的特性来完成上面这些功能,使得访问 Web 应用的路径更短、曝光性更大,下面说一下这一块。原创 2019-07-03 18:24:03 · 2414 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Sync 后台同步
# 前言当我们在一些地下停车场,或者在火车上、电梯等无法避免的信号不稳定的场所,使用网站应用处理一些表单操作或者上传数据的操作时,面临的将是网络连接错误的响应,使用户的操作白费。而此刻 PWA 的 Sync API 就很好的解决了这个问题,让用户处理一些数据上传的操作时,无需关系网络环境,所有相关操作均会完成。Sync API 也是 PWA 离线里面的重要一环,下面就说一块。原创 2019-06-29 23:59:33 · 731 阅读 · 0 评论 -
「工具」IndexDB 版备忘录
前言工作日常需要做一些备忘录,记录一些要做的事。在 Mac 上有使用系统的备忘录,但功能偏弱且文本格式调整不方便。再就是使用浏览器找专门的备忘录网站,功能是满足了,但是链路长,没有桌面软件直接。所以最后干脆自己写一个吧。思路开发上自然是 Web 应用快,且成本低不需要下载安装,而且现在 PWA 的 Web 应用支持安装为应用,所以搞起来。使用技术:ReactMarkedIndex...原创 2019-07-26 23:24:22 · 337 阅读 · 0 评论 -
PWA 应用列表及常用工具
做 PWA 的过程中写了一些相关的应用和工具,在这里整合下,方便查找使用。原创 2019-04-24 15:51:14 · 2932 阅读 · 0 评论 -
PWA 可用性检测工具
针对移动端或者 PC 端浏览器是否对 PWA 可用的问题上,做了一个站点,来实现上述问题的方便检测。让开发者较快的了解终端浏览器的特性支持度。使用工具地址:https://lecepin.gitee.io/detect-sw/地址二维码:检测可用:进入后,底部有调试信息。第二次进入后,图片响应修改为 “图片来自SW”。不可用:不显示任何调试信息 且 图片来自网络响应。...原创 2019-04-17 16:30:46 · 769 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:(二)相关准备
前言在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势。为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明。浏览器要求因为目前各浏览器对于PWA的支持度各不一样,在这里为了对PWA有更好的体验及使用,需要对浏览器做一下要求。下图是目前各浏览器对PWA的支持度:可以参考ispwaready和caniuse来了解浏览器的支持情况。原创 2017-12-26 00:07:33 · 7070 阅读 · 10 评论 -
PWA(Progressive Web App)入门系列:(四)Promise
前言这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢?因为PWA中的许多技术API中都是以Promise返回的方式返回的,为了对后续章节中PWA技术API更好的理解,这里就来说一个Promise对象。Promise出现的背景在JavaScript当中,处理异步操作时,我们需要知道操作是否已经完成,当执行完成的时候会返回一个回调函数,表示操作已经完成。所以在处理异原创 2018-01-02 00:54:23 · 1882 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest
前言前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web App的启动图标、启动样式等。简介manifest是一种简单的json数据风格的配置文件,通过对其相应的属性进行配置,才实现相应的功能,这里可以称manifest为WEB应用清单。WEB应用清单可以实现原创 2017-12-27 13:26:03 · 12215 阅读 · 21 评论 -
PWA(Progressive Web App)入门系列:(五)Web Worker
前言在说Service Worker前有必要说一下Web Worker,因为Service Worker本身就属于Web Worker的延伸,大部分功能也是基于Web Worker进行的扩展。背景众所周知,JavaScript引擎是以单线程调度的方式进行,我们无法同时运行多个JavaScript文件,这种情况下就会导致对硬件资源无法充分利用,并且当在进行一些高耗性能的操作时,会影响主线程的其他任务,原创 2018-01-12 00:14:20 · 2140 阅读 · 0 评论 -
Workbox.routing v3.x 中文版
NAMESPACE STATICVERSION V3.6.1类NavigationRouteNavigationRoute可以轻松创建匹配浏览器navigation requests的Route。它仅匹配mode设置为navigate的请求。您可以只使用blacklist和whitelist参数中的一个或两个,将此路由应用于导航请求中。RegExpRouteRegE...翻译 2019-01-10 17:42:10 · 852 阅读 · 0 评论 -
Workbox.strategies v3.x 中文版
NAMESPACE STATICVERSION V3.6.1该模块提供了大多数serviceworker常用的缓存策略的简单实现。类CacheFirstcache-first请求策略的实现。缓存优先策略对于带版本号的资源是非常有用的,像这种URLstyles/example.a8f5f1.css,因为它们可以长时间缓存。CacheOnlycache-only请求策...翻译 2019-01-10 20:41:12 · 660 阅读 · 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 can be run from a Windows, macOS, of UNIX-compatible...翻译 2019-01-02 21:57:50 · 2453 阅读 · 0 评论 -
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 · 2022 阅读 · 0 评论 -
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 · 1601 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:(一)PWA简介
前言PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习。什么是PWAPWA全称Progressive Web App,直译是渐进式WEB应用,是 Google 在 2015 年提出,2016年6月才推广的项目。是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验。所谓的P(原创 2017-03-22 15:46:41 · 25809 阅读 · 0 评论