开发者社区> 张博悦> 正文

Progressive Web Apps入门

简介:
+关注继续查看
 
PC和Mobile开发技术演进
PC方向,从客户端到富客户端,到现在广泛使用的Web。
 
移动方向,目前主要还是原生应用和Mobile Web,PWA相关技术是未来发展方向。
 
PWA的概念
Progressive Web App (中文翻译为:渐进式Web应用)带来的体验将网络应用的优点与原生应用的优点相结合。用户在浏览器中第一次访问时就能体会到它们的好处,因为不需要进行任何安装。在用户随着时间的推移增进与应用的关系后,其功能会变得越来越强大。它即使在不可靠网络上也能快速加载、能够发送相关推送通知、具有桌面图标,并且可采用顶层全屏体验的方式加载。
 
PWA的特点
  • 渐进式 - 适用于选用任何浏览器的所有用户,因为它是以渐进式增强作为核心宗旨来开发的。
  • 自适应 - 适合任何机型:桌面设备、移动设备、平板电脑或任何未来设备。
  • 连接无关性 - 能够借助于服务工作线程在离线或低质量网络状况下工作。
  • 类似应用 - 由于是在 App Shell 模型基础上开发,因此具有应用风格的交互和导航,给用户以应用般的熟悉感。
  • 持续更新 - 在服务工作线程更新进程的作用下时刻保持最新状态。
  • 安全 - 通过 HTTPS 提供,以防止窥探和确保内容不被篡改。
  • 可发现 - W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们,从而将其识别为“应用”。
  • 可再互动 - 通过推送通知之类的功能简化了再互动。
  • 可安装 - 用户可免去使用应用商店的麻烦,直接将对其最有用的应用“保留”在主屏幕上。
  • 可链接 - 可通过网址轻松分享,无需复杂的安装。
PWA vs Native App
Native App:依赖运行的平台操作系统,比如Android或iOS,需要将应用提交到应用商店,比如Apple App Store或者Google Play Store,国内各大应用商店等。
PWA:不关系平台操作系统,运行在浏览器中,使用标准的Web开发技术,无需提交到应用商店进行审核,发布即用。
PWA vs Web App
Web App:使用标准的Web技术,但是在处理离线,推送上欠缺,不能生成桌面图标等。
 
PWA:使用标准的Web开发技术,可以支持离线可用,通过service worker进行更新和缓存,采用App shell模型基础开发,界面和交互类似应用。支持推送,未来还支持操作设备(调用摄像头、读取陀螺仪等)。
PWA关键技术
 
Manifest
网络应用清单是一个 JSON 文件,您(即开发者)可以利用它控制在用户想要看到应用的区域(例如移动设备主屏幕)中如何向用户显示网络应用或网站,指示用户可以启动哪些功能,以及定义其在启动时的外观。网络应用清单提供了将网站书签保存到设备主屏幕的功能。一个PWA的manifest.json示例:
复制代码
{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]}
复制代码

 

 
Service Worker
Service Worker 是一段脚本,与 Web Worker 一样,也是在后台运行。作为一个独立的线程,运行环境与普通脚本不同,所以不能直接参与 Web 交互行为。Native App 可以做到离线使用、消息推送、后台自动更新,Service Worker 的出现是正是为了使得 Web App 也可以具有类似的能力。页面注入service worker代码示例:
 
复制代码
if (navigator.serviceWorker) {
  navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
    console.log('service worker 注册成功');
  }).catch(function (err) {
    console.log('servcie worker 注册失败');
  });}
复制代码

 

 
Responsive Web Design
RWD是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面电脑显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现,减少用户进行缩放、平移和滚动等操作行为。
第4-6点不在这里展开,刚兴趣的可以查找相应资料进行学习。
浏览器对PWA的支持
越来越多的浏览器支持PWA的技术,特别是移动浏览器,比如Chrome,Firefox,UC移动浏览器等。
 
PWA案例欣赏

           博悦平台 Lite版本:http://www.hongshulin001.com

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web APi入门之Self-Host寄宿及路由原理(二)
前言 刚开始表面上感觉Web API内容似乎没什么,也就是返回JSON数据,事实上远非我所想,不去研究不知道,其中的水还是比较深,那又如何,一步一个脚印来学习都将迎刃而解。 Self-Host 我们知道Web API它可以快速为HTTP客户端提供API来创建Web服务,为何如此这样说呢?因为我...
893 0
好程序员Web前端开发入门之网页制作三要素
  以上就是好程序员Web前端开发入门中前端三要素的基本内容,如果你想了解更多前端开发技术,想要积累较多实战开发经验,可以来好程序员学习培训!
1641 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
30138 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
14049 0
06 入门 - Web服务器
  目录索引:《ASP.NET MVC 5 高级编程》学习笔记     开发和调试ASP.NET MVC程序,需要Web服务器的支持。   Visual Studio 2012+开发环境提供了两种Web服务器,分别是IIS Express和开发服务器。
1000 0
ASP.NET Web API 2 入门教程
译者:jiankunking 出处:http://blog.csdn.net/jiankunking 源码下载 HTTP不仅提供web页面服务,在构建公开服务和数据api方面,它也是一个强大的平台。HTTP简单、灵活、无处不在。几乎你能想到的所有的平台,都有一个HTTP库,因此HTTP服务可以影响到广泛的客户端,包括浏览器、移动设备,和传统的桌面应用程序。 AS
2338 0
[java web 入门](一)MyEclipse & HelloWorld 记录
第一部,下载安装MyEclipse for mac.    http://downloads.myeclipseide.com/downloads/products/eworkbench/2014/installers/myeclipse-spring-2014-GA-offline-installer-macosx.
957 0
+关注
张博悦
www.hongshulin001.com 我的博客
17
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载