渐进式Web应用程序完整指南

渐进式Web应用程序是一款可以基于设备支持提供其他功能的应用程序，包括脱机功能，推送通知和几乎本机应用程序的外观和速度以及本地资源缓存

介绍

渐进式Web应用程序（PWA）是最新的趋势移动应用开发在撰写本文时（2018年3月），使用Web技术可在具有iOS 11.3或更高版本以及macOS 10.13.4或更高版本的Android和iOS设备上工作。

PWA是一个术语，用于标识一系列旨在为基于Web的应用程序创造更好体验的技术。

什么是渐进式Web应用程序

渐进式Web应用程序是能够 根据设备支持提供其他功能，提供离线功能，推送通知和几乎本机的应用外观和速度，以及本地资源缓存。

这项技术最初由Google于2015年推出，并被证明为开发人员和用户带来许多优势。

开发人员可以进入建筑几乎一流使用Web堆栈的应用程序，这总是比构建本机应用程序容易和便宜得多，尤其是考虑到构建和维护跨平台应用程序的含义时。

开发人员可以从减少安装摩擦，而在商店中拥有某个应用程序时，对于99.99％的应用程序而言，实际上并没有带来任何可发现性，并且Google搜索可以提供相同的好处，甚至更多。

渐进式Web应用程序是使用某些技术开发的网站，该技术使移动体验比普通的针对移动设备优化的网站更加愉悦，以至于它几乎像本机应用程序一样工作，因为它具有以下功能：

  • 离线支持
  • 快速加载
  • 是安全的
  • 能够发出推送通知
  • 无需网址栏，即可获得身临其境的全屏用户体验

移动平台（在撰写本文时为Android，但在技术上并不限于此）对渐进式Web应用程序的支持日益增加，以至要求用户提供将应用添加到主屏幕当他们检测到用户正在访问的站点时，它就是PWA。

但是首先，对名称进行一些澄清。渐进式Web应用可以是令人困惑的术语，一个很好的定义是利用现代浏览器功能（例如网络工作者和网络应用程序清单），以使他们的移动设备将应用程序“升级”为一流公民应用程序的角色。

渐进式Web应用程序替代品

与建立替代移动体验相比，PWA与其他选择相比如何？

让我们专注于每个优点和缺点，然后看看PWA在哪些方面是合适的。

原生移动应用

本机移动应用程序是构建移动应用程序的最明显方式。 iOS上为Objective-C或Swift，Android上为Java / Kotlin，Windows Phone上为C＃。

每个平台都有其自己的UI和UX约定，本机窗口小部件可提供用户期望的体验。它们可以通过平台App Store进行部署和分发。

本机应用程序的主要痛点是跨平台开发需要学习，掌握和掌握许多不同的方法论和最佳实践，因此，例如，如果您的团队很小，甚至您是开发应用程序的单人开发人员，在3个平台上，您需要花费大量时间来学习技术，还需要学习环境，管理不同的库以及使用不同的工作流（例如，iCloud仅适用于iOS设备，没有Android版本）。

混合应用

混合应用程序是使用Web技术构建的，但已部署到App Store。中间有一个框架或某种方式来打包应用程序，以便可以将其发送给传统的App Store进行审查。

最常见的平台是Phonegap，Xamarin，Ionic Framework以及许多其他平台，通常您在页面上看到的是本质上加载本地网站的WebView。

Hybrid Apps的关键方面是编写一次，即可在任何地方运行概念，在构建时会生成不同的平台代码，而您正在使用JavaScript，HTML和CSS，这非常了不起，并且设备功能（麦克风，摄像头，网络，gps…）通过JavaScript API公开。

构建混合应用程序的坏处在于，除非您做得出色，否则您可能会选择提供一个共同的标准，即有效地创建在所有平台上都不理想的应用程序，因为该应用程序忽略了特定于平台的人机交互准则。

此外，复杂视图的性能可能会受到影响。

使用React Native构建的应用

React Native通过JavaScript API公开了移动设备的本机控件，但是您实际上是在创建本机应用程序，而不是在WebView中嵌入网站。

他们的座右铭是将这种方法与混合应用程序区分开来学习一次，随处写，这意味着跨平台的方法相同，但是您将创建完全独立的应用程序，以便在每个平台上提供出色的体验。

性能是可以与本机应用程序相媲美的，因为您构建的内容本质上是本机应用程序，该应用程序通过App Store分发。

渐进式Web应用程序功能

在上一节中，您看到了主要竞争者渐进式Web应用程序。那么，与它们相比，PWA的地位如何？它们的主要特征是什么？

Remember, currently Progressive Web Apps are Android-only IOS support was added in March 2019

特征

渐进式Web应用程序具有将它们与上述方法完全区分开的一件事：它们未部署到应用程序商店。。

这是一个关键优势，因为如果您拥有突出的影响力和运气，那么应用程序商店将对您很有帮助，这可以使您的应用程序变得病毒式传播，但是除非您的得分是0.001％，否则您将不会从中获得很多收益在App Store上占有一席之地。

渐进式Web应用程序是可使用搜索引擎发现，并且当用户访问具有PWA功能的网站时，浏览器与设备的结合会询问用户是否要将应用程序安装到主屏幕。这是巨大的，因为常规SEO可以应用于您的PWA，从而大大减少了对付费购买的依赖。

不在App Store中意味着您不需要Apple或Google的批准放在用户的口袋中，您可以在需要时发布更新，而无需执行典型的iOS应用程序标准批准流程。

PWA基本上是类固醇上的HTML5应用程序/响应式网站，最近引入了一些关键技术，这些技术使某些关键功能成为可能。如果您还记得最初的iPhone没有开发本机应用程序的选项，而开发人员被告知要开发HTML5移动应用程序，可以将其安装到主屏幕上，但是当时的技术还没有为此做好准备。

渐进式Web应用离线运行。

指某东西的用途服务人员允许该应用始终包含新鲜内容，并在后台下载它，并为推送通知提供更大的重新参与机会。

此外，可共享性为想要共享您的应用程序的用户提供了更好的体验，因为他们只需要一个URL。

好处

那么，为什么用户和开发人员应该关心渐进式Web应用程序呢？

  1. PWA更轻。本机应用程序的权重为200MB或更多，而PWA可能在KB范围内。
  2. 没有本机平台代码
  3. 降低获取成本（说服用户安装应用程序比访问网站来获得首次体验要困难得多）
  4. 构建和发布更新所需的工作量大大减少
  5. 对深层链接的支持比常规的应用商店应用更多

核心概念

  • 反应灵敏：UI适应设备屏幕尺寸
  • 类似于应用的感觉：感觉它不像一个网站，而是尽可能地像一个应用程序
  • 离线支持：它将使用设备存储来提供离线体验
  • 可安装：设备浏览器提示用户安装您的应用
  • 重新参与：推送通知可帮助用户在安装后重新发现您的应用
  • 可发现的：搜索引擎和SEO优化可以提供比应用商店更多的用户
  • 新鲜的：应用程序在线后会更新自身和内容
  • 安全的：使用HTTPS
  • 进步：即使功能较少（例如仅作为网站，无法安装），它也可以在任何设备上使用，甚至可以在较旧的设备上使用
  • 可链接的：使用网址可以轻松地指向它

服务人员

渐进式Web应用程序定义的一部分是必须脱机工作。

由于允许Web应用程序脱机工作的是Service Worker，因此这意味着服务工作者是渐进式Web应用程序的必不可少的部分。

看http://caniuse.com/#feat=serviceworkers有关浏览器支持的更新数据。

提示：不要将Service Worker与Web Worker混淆。他们是完全不同的事情。

Service Worker是一个JavaScript文件，充当Web应用程序和网络之间的中间人。因此，它可以提供缓存服务并加快应用渲染速度，并改善用户体验。

出于安全原因，仅HTTPS站点可以使用Service Worker，这也是必须通过HTTPS提供渐进式Web应用程序的部分原因。

用户第一次访问应用程序时，服务工作者在设备上不可用。发生的情况是，第一次安装了Web Worker，然后在随后的访问中，对站点的单独页面的调用将称为此Service Worker。

看看服务人员完整指南

应用清单

App Manifest是一个JSON文件，可用于提供有关Progressive Web App的设备信息。

您将链接添加到清单中全部您的网站页面标题：

<link rel="manifest" href="/manifest.webmanifest">

该文件将告诉设备如何设置：

  • 应用程序的名称和简称
  • 图标位置，各种大小
  • 相对于域的起始URL
  • 默认方向
  • 开机画面

例子

{
  "name": "The Weather App",
  "short_name": "Weather",
  "description": "Progressive Web App Example",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html?utm_source=app_manifest",
  "orientation": "portrait",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

App Manifest是W3C工作草案，可通过以下网址获得https://www.w3.org/TR/appmanifest/

App Shell

App Shell不是一种技术，而是一种设计理念旨在首先加载和呈现Web应用程序容器，然后不久加载实际内容，从而为用户带来类似应用程序的良好印象。

这等效于Apple HIG（人机界面指南）建议，即使用类似于用户界面的启动画面，以提供心理暗示，从而降低需要花费较长时间加载的应用程序的感知。

快取

App Shell与内容是分开缓存的，它的设置使得从缓存中检索Shell构建块只需很少的时间。

在App Shell上找到更多信息，网址为https://developers.google.com/web/updates/2015/11/app-shell

免费下载我的JavaScript初学者手册


更多浏览器教程：


在线技术百科！