Progressive Web Apps入门

超级致富宝典 2021-10-24

展开全文

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移动浏览器等。