河南网站建站系统平台,惠州网站设计培训,线上购物网站建设的可行性,看板娘wordpress一、背景
从2018年到现在#xff0c;作为号称下一代web应用模型的PWA#xff0c;逐渐成为了一个各大前端厂商争先恐后进行涉足#xff0c;布局的一个新的技术#xff0c; 其主要的对标物Native app#xff0c;作为现在最主流的mobile端应用#xff0c;它的安全#xff…一、背景
从2018年到现在作为号称下一代web应用模型的PWA逐渐成为了一个各大前端厂商争先恐后进行涉足布局的一个新的技术 其主要的对标物Native app作为现在最主流的mobile端应用它的安全性能用户体验的确明显领先于其他互联网载体但是原生App始终有一些缺点比如
1. 昂贵开发成本
2. 软件上线版本更新都需要发布到不同的商店并通过审核
有些APP你可能使用频率特别少但是你还是不得不去商店中下载庞大安装包或者可能一段时间不使用以后随着版本的更新你也不得不去重新更新并安装
PWA技术的作为web应用其天生优势能很好的解决以上的问题。
二. 什么是PWA
PWA是Progressive Web App的英文缩写 翻译过来就是渐进式增强WEB应用 是Google 在2016年提出的概念2017年落地的web技术。目的就是在移动端利用提供的标准化框架在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。
引用官方介绍 Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.Engaging - Feel like a natural app on the device, with an immersive user experience.
即是
1. 可靠——即时加载即使在不确定的网络条件下也不会受到影响。 当用户从主屏幕启动时service work可以立即加载渐进式Web应用程序完全不受网络环境的影响。service work就像一个客户端代理它控制缓存以及如何响应资源请求逻辑通过预缓存关键资源可以消除对网络的依赖确保为用户提供即时可靠的体验。 可靠
2. 快速 据统计如果站点加载时间超过 3s53% 的用户会放弃等待。页面展现之后用户期望有平滑的体验过渡动画和快速响应。 快速
3. 沉浸式体验—— 感觉就像设备上的原生应用程序具有沉浸式的用户体验。 渐进式Web应用程序可以安装并在用户的主屏幕上无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验甚至可以重新与用户接触的Web推送通知。 沉浸式体验
Web应用程序中可以通过manifest.json控制应用程序的显示方式和启动方式指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向甚至可以指定是否显示浏览器Chrome。 根据官方的介绍不难看出pwa的目标直指原生app那接下来我们就来了解下PWA到底是个怎么样的何方神圣。
三. 核心功能
PWA并不是单指某一项技术你更可以把它理解成是一种思想和概念目的就是对标原生app将Web网站通过一系列的Web技术去优化它提升其安全性性能流畅性用户体验等各方面指标最后达到用户就像在用app一样的感觉。
PWA中包含的核心功能及特性如下
Web App ManifestService WorkerCache API 缓存PushNotification 推送与通知Background Sync 后台同步响应式设计
四. PWA如何弥补和原生App的差距
性能差异
PWA使用app Shell架构模型
1. 快速加载
2. 尽可能使用较少的数据
3. 使用本机缓存中的静态资产
4. 将内容与导航分离开来
5. 检索和显示特定页面的内容HTML、JSON 等
6. 缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容但同时不影响网络的可链接性和可检测性。 用户下次访问您的应用时应用会自动显示最新版本。无需在使用前下载新版本。
为了保证首屏的加载在内容请求完成之前可以优先保证 App Shell 的渲染做到和 Native App 一样的体验App Shell 是 PWA 界面展现所需的最小资源。无法离线使用
Service Worker HTTPS Cache Api indexedDB 等一系列web技术实现离线加载和缓存数据更新
Background Sync 后台同步技术无法实现推送
PushNotification 实现推送与通知无法添加到桌面
通过manifest.json文件配置使得可以直接添加到手机的桌面上。天生优势
1. 无需安装无需下载只要你输入网址访问一次然后将其添加到设备桌面就可以持续使用。 2. 发布不需要提交到app商店审核 3. 更新迭代版本不需要审核不需要重新发布审核 4. 现有的web网页都能通过改进成为PWA 能很快的转型上线实现业务、获取流量 5. 不需要开发Android和IOS两套不同的版本
劣势
1. 游览器对技术支持还不够全面 不是每一款游览器都能100%的支持所有PWA 2. 需要通过第三方库才能调用底层硬件如摄像头 3. PWA现在还没那么火国内一些手机生产上在Android系统上做了手脚似乎屏蔽了PWA, 但是相信当PWA火起来以后这个问题就不会是问题
五. PWA的发展趋势
2016年 PWA在google正式落地基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了 随着 iOS 11.3 的发布iOS正式开始支持PWA Windows Edge 支持PWA
随着越来越多的游览器大厂相继的对PWA做出了支持和优化想必PWA的时代即将到来
交流
接下来我会分享如何使用Vue Vue CLI 3.x ts Quasar 来搭建并快速开发一个PWA 作者偏罗 链接https://www.jianshu.com/p/098af61bbe04 来源简书 简书著作权归作者所有任何形式的转载都请联系作者获得授权并注明出处。
