下一代Web开发技术-Progressive Web App介绍

企鹅号小编

发布于 2018-01-30 14:16:56

1.4K0

发布于 2018-01-30 14:16:56

文章被收录于专栏：编程

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示例：

Service Worker

Service Worker 是一段脚本，与 Web Worker 一样，也是在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 Web 交互行为。Native App 可以做到离线使用、消息推送、后台自动更新，Service Worker 的出现是正是为了使得 Web App 也可以具有类似的能力。页面注入service worker代码示例：

Responsive Web Design

RWD是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。

第4-6点不在这里展开，刚兴趣的可以查找相应资料进行学习。

浏览器对PWA的支持

越来越多的浏览器支持PWA的技术，特别是移动浏览器，比如Chrome，Firefox，UC移动浏览器等。