码迷,mamicode.com
首页 > 移动开发 > 详细

PWA(Progressive Web App)入门系列:(一)PWA简单介绍

时间:2017-08-06 16:53:55      阅读:1490      评论:0      收藏:0      [点我收藏+]

标签:internet   国内   生活   保留   启动   blank   代码   管理   icon   


前言

PWA做为一门Google推出的WEB端的新技术,长处不言而喻。但眼下对于相关方面的知识不是非常丰富。这里我推出一下这方面的新手教程系列。提供PWA方面学习。


什么是PWA

PWA全称Progressive Web App,直译是渐进式WEB应用,是 Google 在 2015 年提出,2016年6月才推广的项目。是结合了一系列现代Web技术的组合。在网页应用中实现和原生应用相近的用户体验。

所谓的P(Progressive)这里有两层含义,一方面是渐进增强,让WEB APP的体验和功能能够用渐进增强的方式来更接近原生APP的体验及功能。另一方面是指下一代WEB技术。PWA并非描写叙述一个技术。而是一些技术的合集。

技术分享


PWA特性

  • 渐进增强 - 能够让每一位用户使用。不管用户使用什么浏览器,由于它是始终以渐进增强为原则。
  • 响应式用户界面 - 适应不论什么环境:桌面电脑,智能手机,笔记本电脑,或者其他设备。
  • 不依赖网络连接 - 通过 service workers 能够在离线或者网速极差的环境下工作。
  • 类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验,由于它是建立在 app shell model 上的。

  • 持续更新 - 受益于 service worker 的更新进程,应用能够始终保持更新。
  • 安全 - 通过 HTTPS 来提供服务来防止网络窥探。保证内容不被篡改。
  • 可发现 - 得益于 W3C manifests 元数据和 service worker 的登记。让搜索引擎能够找到 web 应用。

  • 再次訪问 - 通过消息推送等特性让用户再次訪问变得easy。
  • 可安装 - 同意用户保留对他们实用的应用在主屏幕上,不须要通过应用商店。
  • 可连接性 - 通过 URL 能够轻松分享应用,不用复杂的安装就可以执行。

技术分享


PWA优、缺点

长处:

  • 上面提到的,全部这些现代 Web 特性。

  • Web最重要的意义在于开放和去中心化,这才是万维网的初衷

缺点:

  • 门槛不低。部署的server要求HTTPS,ServiceWorker涉及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,它就像一个位于client和网络之间的代理。能够拦截、处理、响应流经的网络请求,配合Cache API,你能够自由管理网络请求文件的缓存,这使得 Service Worker 能够从缓存中向 web 应用提供资源,即使是在离线的环境下。

这样。在离线和网速低的情况下也能秒开。说白了,之前的Hybrid架构的出现不就是为了这个功能么。

之前尽管有AppCache。但它具有相当多的缺陷,这里就不说了。

来张官网的形象图:

技术分享

Push Notification(推送通知)

Push 和 Notification是两个不同的功能,涉及到两个API,可是它们之前有依赖关系。

Notification这块应该大家多少了解一些。属于浏览器发出的通知消息。之前须要浏览器一直开着才干实现这样的通知,可是如今有了上面提到的Service Worker。就能够驻留在进程里面操作了。

Push & Notification关系:

  • Push : server端将更新的信息传递给 Service Worker
  • Notification: Service Worker 将更新的信息推送给用户

技术分享


PWA与其他App的对照

眼下的移动端APP:

  • Native APP
  • Web App
  • Hybrid 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的Safari(Webkit)。眼下不支持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 国际许可协议进行许可。

PWA(Progressive Web App)入门系列:(一)PWA简单介绍

标签:internet   国内   生活   保留   启动   blank   代码   管理   icon   

原文地址:http://www.cnblogs.com/tlnshuju/p/7295002.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!