PWA(Progressive Web Apps)
文章平均质量分 79
PWA(Progressive Web Apps)是结合了 web 和 原生应用中最好功能的一种体验,是Google推出的新技术架构。
这里会以基础和实战方向,撰写一些入门系列的文章
王乐平
这个作者很懒,什么都没留下…
展开
-
实现图片本地化 ServiceWorker + IndexedDB
1. 背景在一些安全场景,或者一些本地化的场景(如本地化的 Markdown 记事本),如果有图片上传并需要查看的场景,在不上传到服务器的情况下,实现这个效果,通常是把图片 Base64 化,但编码后的字符串会非常长,体验较差。这里不妨尝试使用 ServiceWorker + IndexedDB 来解决这个问题。2. API 优势IndexedDB 几乎什么都可以存储,二进制类的文件更不在话下,且存储空间在大多数浏览器中,是和系统空间持平的。ServiceWorker 可以做页面的网络代理层,所.原创 2022-03-16 18:59:01 · 3047 阅读 · 0 评论 -
我的新书《PWA入门与实践》上市了
前言我初接触PWA是在2017年年初,当时参加了一个前端分享会,其中一个主题就是与PWA相关的,介绍了PWA的Service Worker和安装到桌面的能力,以及这门技术未来的发展趋势,听完这个分享后,我就为PWA的一些能力所吸引。Web本身的优势就非常明显,如可分享,可搜索,无须下载,在任何设备上有相同的展示等,现在再加上PWA的能力,让Web在原有的基础上具备了类原生应用程序的功能,这对...原创 2020-05-07 11:21:17 · 2328 阅读 · 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 · 2202 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:(四)Promise
前言这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢?因为PWA中的许多技术API中都是以Promise返回的方式返回的,为了对后续章节中PWA技术API更好的理解,这里就来说一个Promise对象。Promise出现的背景在JavaScript当中,处理异步操作时,我们需要知道操作是否已经完成,当执行完成的时候会返回一个回调函数,表示操作已经完成。所以在处理异原创 2018-01-02 00:54:23 · 1919 阅读 · 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 · 12414 阅读 · 21 评论 -
PWA(Progressive Web App)入门系列:(二)相关准备
前言在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势。为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明。浏览器要求因为目前各浏览器对于PWA的支持度各不一样,在这里为了对PWA有更好的体验及使用,需要对浏览器做一下要求。下图是目前各浏览器对PWA的支持度:可以参考ispwaready和caniuse来了解浏览器的支持情况。原创 2017-12-26 00:07:33 · 7126 阅读 · 10 评论 -
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 · 25991 阅读 · 0 评论 -
「工具」PWA Manifest图标及 favicon.ico 生成工具
PWA 其中有一个能力就是把网站安装到系统桌面,以原生应用的体验来运行网站,使用户无需再找开浏览器输入网址进入网站,而是可以直接点击安装好的应用直接运行,给使网站访问缩短路径及增加网站的曝光度。其中有一个问题就是需要生成应用的图标,通常来说需要在 manifest.json 的应用清单文件中配置多种尺寸的 ico 来适配不同分辨率的设备。而通常来说设计师只会给一个尺寸的图标。为了解决生成不同分...原创 2019-09-22 18:40:21 · 3552 阅读 · 1 评论