广州做网站技术,响应式网站开发方法,网站做担保交易平台,重庆秀山网站建设费用前言 PWA做为一门Google推出的WEB端的新技术#xff0c;好处不言而喻#xff0c;但目前对于相关方面的知识不是很丰富#xff0c;这里我推出一下这方面的入门教程系列#xff0c;提供PWA方面学习。 什么是PWA PWA全称Progressive Web App#xff0c;直译是渐进式WEB应用… 前言 PWA做为一门Google推出的WEB端的新技术好处不言而喻但目前对于相关方面的知识不是很丰富这里我推出一下这方面的入门教程系列提供PWA方面学习。 什么是PWA PWA全称Progressive Web App直译是渐进式WEB应用是 Google 在 2015 年提出2016年6月才推广的项目。是结合了一系列现代Web技术的组合在网页应用中实现和原生应用相近的用户体验。 所谓的PProgressive这里有两层含义一方面是渐进增强让WEB APP的体验和功能能够用渐进增强的方式来更接近原生APP的体验及功能另一方面是指下一代WEB技术PWA并不是描述一个技术而是一些技术的合集。 PWA特性 渐进增强 - 能够让每一位用户使用无论用户使用什么浏览器因为它是始终以渐进增强为原则。响应式用户界面 - 适应任何环境桌面电脑智能手机笔记本电脑或者其他设备。不依赖网络连接 - 通过 service workers 可以在离线或者网速极差的环境下工作。类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验因为它是建立在 app shell model 上的。持续更新 - 受益于 service worker 的更新进程应用能够始终保持更新。安全 - 通过 HTTPS 来提供服务来防止网络窥探保证内容不被篡改。可发现 - 得益于 W3C manifests 元数据和 service worker 的登记让搜索引擎能够找到 web 应用。再次访问 - 通过消息推送等特性让用户再次访问变得容易。可安装 - 允许用户保留对他们有用的应用在主屏幕上不需要通过应用商店。可连接性 - 通过 URL 可以轻松分享应用不用复杂的安装即可运行。 PWA优、缺点 优点 上面提到的所有这些现代 Web 特性。Web最重要的意义在于开放和去中心化这才是万维网的初衷 缺点 门槛不低。部署的服务器要求HTTPSServiceWorker涉及API众多需要单独学习浏览器支持不够全面。苹果Safari 短时间内不会支持5 年计划里可能实施用户体验习惯。网页应用替代原生应用的方式用户短时间内不适应 PWA关键技术 Manifest应用清单 Web App Manifest是一个W3C规范定义了一个基于JSON的清单为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。manifest 就是 PWA 概念的一环它给你了控制你的应用如何出现在用户期待出现的地方比如用户手机主屏幕这直接影响到用户能启动什么以及更重要的用户如何启动它。 使用 web 应用程序清单你的应用可以 能够真实存在于用户主屏幕上在 Android 上能够全屏启动不显示地址栏控制屏幕方向已获得最佳效果定义启动画面为你的站点定义主题追踪你的应用是从主屏幕还是 URL 启动的 例如 {lang: en,dir: ltr,name: Donate App,description: This app helps you donate to worthy causes.,short_name: Donate,icons: [{src: icon/lowres.webp,sizes: 64x64,type: image/webp},{src: icon/lowres.png,sizes: 64x64}, {src: icon/hd_hi,sizes: 128x128}],scope: /racer/,start_url: /racer/start.html,display: fullscreen,orientation: landscape,theme_color: aliceblue,background_color: red,serviceworker: {src: sw.js,scope: /racer/,use_cache: false},screenshots: [{src: screenshots/in-game-1x.jpg,sizes: 640x480,type: image/jpeg},{src: screenshots/in-game-2x.jpg,sizes: 1280x920,type: image/jpeg}] } Service Workers Service Worker是浏览器在后台独立于网页运行的脚本它打开了通向不需要网页或用户交互的功能的大门。这个 API 之所以令人兴奋是因为它可以支持离线体验让开发者能够全面控制这一体验。 ServiceWorker是由两部分构成一部分是 cache还有一部分则是 Worker。 它被设计为一个相对底层、高度可编程、子概念众多也因此异常灵活且强大的 API它就像一个位于客户端和网络之间的代理可以拦截、处理、响应流经的网络请求配合Cache API你可以自由管理网络请求文件的缓存这使得 Service Worker 可以从缓存中向 web 应用提供资源即使是在离线的环境下。这样在离线和网速低的情况下也能秒开说白了之前的Hybrid架构的出现不就是为了这个功能么。之前虽然有AppCache但它具有相当多的缺陷这里就不说了。 来张官网的形象图 Push Notification推送通知 Push 和 Notification是两个不同的功能涉及到两个API但是它们之前有依赖关系。 Notification这块应该大家多少了解一些属于浏览器发出的通知消息之前需要浏览器一直开着才能实现这种通知但是现在有了上面提到的Service Worker就可以驻留在进程里面操作了。 Push Notification关系 Push : 服务器端将更新的信息传递给 Service WorkerNotification: Service Worker 将更新的信息推送给用户 PWA与其它App的对比 目前的移动端APP Native APPWeb AppHybrid App Native APP Native APP指原生App是一个完整的App可拓展性强需要用户下载安装使用。 优点 可使用移动设备所有功能速度快、性能高、用户体验好离线使用 缺点 开发成本高、维护成本高每个不通的平台都要重新开发应用商店审核复杂效率低 Web APP Web App 指采用Html5语言写出的App生活在浏览器里的应用不需要下载安装。 优点 跨平台开发、无需下载、无需安装,开发速度快发布灵活因为根本不需要应用商店的审核较低的开发成本可即时上线用户可以直接使用最新版本支持设备广泛 缺点 只能使用有限的移动设备API浏览器兼容问题无法上传到应用商店用户暂时不适用 Hybrid App Hybrid APP指的是半原生半Web的混合类App需要下载安装。 优点 兼容多平台Web前端工作人员就可快速构建可以上传到应用商店可以基于浏览器的方式进行页面调试可使用的移动设备的API多 缺点 用户体验不如原生应用为模拟原生样式需要大量的html和css性能稍慢技术不是很成熟 PWA兼容性 Blink内核Chrome、Oprea、Samsung Internet 等和 Gecko内核Firefox和Microsoft Edge都已经实现了 PWA 所需的所有关键技术的支持但IOS的SafariWebkit目前不支持PWA的API。 不过在2015年Webkit的5年计划里面已经提及了Service Worker相信很快就能实现。 PWA在中国 国在IPhone不在少数而IOS目前是不支持PWA的国内Android系统大部分早已把Google框架移除了所以兼容性会出问题推送依赖于GCM而国内Google是无法访问的 Google的技术在国内推进是很痛苦的Android虽然近年来在国内不错但PWA在国内的发展有很多困难。 PWA的未来 总的来说PWA还是很不错的虽然PWA在国内的体验目前有一些限制但相信PWA在国内的春天肯定会来的。 这里引用一下黄玄说过的一句话 请不要让 web 再继续离我们远去浏览器厂商们已经重新走到了一起而下一棒将是交到我们 web 应用开发者的手上。乔布斯曾相信 web 应用才移动应用的未来那就让我们用代码证明给这个世界看吧。 让我们的用户也像我们这般热爱 web 吧” PWA应用体验 Progressive Web Apps网站内含有需要PWA应用大家可以体验一下。 这一章做了一下PWA的相关介绍后面章节会详细对PWA API进行详细说明。 博客名称王乐平博客 CSDN博客地址http://blog.csdn.net/lecepin 本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。