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

Posted 2020-10-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PWA(Progressive Web App)入门系列：PWA简单介绍相关的知识，希望对你有一定的参考价值。

前言

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。但它具有相当多的缺陷，这里就不说了。

来张官网的形象图：