渐进式Web应用程序：速成课程

渐进式Web应用程序（PWA）试图通过向移动用户提供每种功能的最佳功能来重叠移动Web应用程序和本机移动应用程序的世界。

它们提供类似应用程序的用户体验（启动屏幕和主屏幕图标），由受HTTPS保护的服务器提供服务，即使在质量较低或网络速度较慢的情况下，也可以快速加载（由于页面加载性能的最佳做法），并且他们具有离线支持，即时加载和推送通知。 PWA的概念最初是由提出的，但仍受许多功能和出色工具的支持，例如，这是一个用于辅助功能，性能和渐进性审核的开源工具，我们将在稍后进行探讨。

在整个崩溃过程中，我们将使用ES6和React从零开始构建PWA，并使用逐步对其进行优化，直到获得用户体验和性能方面的最佳结果。

术语“ 渐进式”仅表示PWA的设计方式使其可以在已经支持许多新功能和新技术的现代浏览器中逐步增强，但在没有尖端功能的旧浏览器中也可以正常工作。

原生vs移动=渐进

本地应用程序可以从移动操作系统的相应应用程序商店中分发和下载。 另一方面，只需在Web浏览器中输入地址或URL即可访问它们。 从用户的角度来看，启动浏览器并导航到某个地址比去应用商店并下载，安装然后启动该应用要方便得多。 从开发者/所有者的角度来看，支付一次一次性的费用来获得应用商店帐户，然后上载其应用以供全世界的用户访问，比必须处理网络托管的复杂性要好。

本机应用程序可以脱机使用。 如果需要从某个API服务器检索远程数据，则可以轻松地设计该应用程序以支持对最新访问数据的某种缓存。

谷歌等搜索引擎可以为移动网络应用编制索引，并且通过搜索引擎优化，您可以吸引更多用户。 对于本机应用程序也是如此，因为应用程序商店拥有自己的搜索引擎，开发人员可以在其中使用不同的技术（通常称为“应用程序商店优化”）来吸引更多用户。

本机应用程序至少在启动屏幕上立即加载，直到所有资源可供应用程序执行为止。

这些是最重要的感知差异。 每种应用程序分发方法都对最终用户（关于用户体验，可用性等）和应用程序所有者（关于成本，客户覆盖范围等）都有好处。 考虑到这一点，引入了PWA，将双方的最佳功能整合到一个概念中。 工程师Alex 在这份清单中总结了这些方面。 （来源： 不经常提及 。）

灯塔

是用于审核创建的Web应用程序的工具。 它与开发工具集成在一起，可以从“审核”面板中触发。

您还可以将用作 CLI工具：

npm install -g lighthouse  

然后可以使用以下命令运行它：

lighthouse https://sitepoint.com/

也可以作为扩展程序安装，但是建议使用与集成的版本，并且仅在您因某种原因无法使用时才使用该扩展程序。

请注意，即使您使用的是基于CLI的版本，也需要在系统上安装才能使用。

从头开始构建您的第一个PWA

在本节中，我们将从头开始创建一个渐进式Web应用程序。 首先，我们将使用React和的API创建一个简单的Web应用程序。 接下来，我们将按照报告提供的说明添加PWA功能。

请注意，公开的非身份验证 API启用了CORS标头，因此您可以在没有中间服务器的情况下从客户端应用程序使用它。

在我们开始之前，本课程将假设您已经安装了和NPM的开发环境设置。 如果您没有这样做，请从令人敬畏的 开始 ，它正在运行每个版本的最新版本，并且可以立即进行开发和测试。

我们首先安装 React App，这是由React团队创建的项目样板，可将您从配置的麻烦中解救出来。

npm install -g create-react-app
create-react-app react-pwa
cd react-pwa/

应用程序外壳架构

应用程序外壳是渐进式Web应用程序的基本概念。 这只是负责呈现用户界面的最少HTML，CSS和代码。

此应用程序外壳程序对性能有很多好处。 您可以缓存应用程序外壳程序，这样当用户下次访问您的应用程序时，由于浏览器不需要从远程服务器获取资产，因此将立即加载该应用程序外壳。

为了构建一个简单的UI，我们将使用 UI，这是React中 的一个实现。

让我们从NPM安装软件包：

npm install material-ui --save

接下来打开src/App.js然后添加：

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import {Card, CardActions, CardHeader,CardTitle,CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';import logo from './logo.svg';
import './App.css';class App extends Component {constructor(props) {super(props);this.state = {posts: []};}render() {return (
React PWA}iconElementLeft={}iconElementRight={ this.fetchNext('reactjs', this.state.lastPostName)} label="next" />}/>{this.state.posts.map(function (el, index) {return {el.data.selftext} {window.open(el.data.url);}} />})} this.fetchNext('reactjs', this.state.lastPostName)} label="next" />);}
}export default App;

接下来，我们需要使用两种方法()和()来获取帖子：

  fetchFirst(url) {var that = this;if (url) {fetch('https://www.reddit.com/r/' + url + '.json').then(function (response) {return response.json();}).then(function (result) {that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });console.log(that.state.posts);});}}  fetchNext(url, lastPostName) {var that = this;if (url) {fetch('https://www.reddit.com/r/' + url + '.json' + '?count=' + 25 + '&after=' + lastPostName).then(function (response) {return response.json();}).then(function (result) {that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });console.log(that.state.posts);});}}componentWillMount() {this.fetchFirst("reactjs");
}

您可以在 中找到源代码。

在对您的应用运行审核之前，您需要构建并使用本地服务器在本地为您的应用提供服务：

npm run build

该命令调用.json的构建脚本，并在react-pwa/build文件夹中生成一个构建。

现在，您可以使用任何本地服务器来服务您的应用程序。 在 上，您只需将nginx虚拟主机指向build文件夹并在浏览器中打开.app ，或者可以通过使用serve软件包：

npm install -g serve
cd build
serve

使用serve ，您的应用程序将从http：// ：5000 /在本地提供。

您可以审核您的应用程序而没有任何问题，但是如果您想在移动设备中对其进行测试，则还可以使用surge.sh服务通过一个命令来部署它！

npm install --global surge

接下来，从任何目录中运行涌流，以将该目录发布到Web上。

您可以从此链接找到此应用的托管版本。

现在，我们打开 ，转到“审核”面板，然后单击“执行审核”。

从报告中我们可以看到， 渐进式Web App的得分为45/100 ， 性能为68/100 。

在 Web App下，我们有6个失败的审核和5个通过的审核。 这是因为默认情况下，生成的项目已经添加了一些PWA功能，例如Web清单，视口元数据和标记。

在“ 性能”下，我们有诊断程序和不同的计算指标，例如“第一有意义的油漆”，“第一交互式”，“一致交互式”，“感知速度指数”和“估计输入延迟”。 稍后我们将研究这些。

建议通过减少下载大小或推迟不必要的资源下载来减少关键渲染链的长度，从而提高页面加载性能。

请注意， 性能得分和指标值可以在同一台计算机上的不同审核会话之间更改，因为它们受许多不同条件的影响，例如您当前的网络状态以及您当前的计算机状态。

为什么页面加载性能和速度很重要

根据（一家广告公司）的说法，如果加载网页需要3秒钟以上的时间，则将有53％的移动网站访问被放弃 。 通过优化页面加载性能和速度，PWA通过一系列技术和策略为用户提供即时的Web体验，我们接下来将介绍它们。

在开始构建PWA 之前，请考虑性能

大多数客户端应用是使用某种库或框架（例如React，，，Vue等）构建的。如果要构建PWA，则需要确保选择移动优先的库，或者换句话说，首先是为移动网络设计的库。 否则，优化应用程序的性能将是一项不可能的任务。

您需要使用不同的测试工具（例如 ，， 等）在不同的模拟网络条件下对应用程序进行大量测试，以便成功优化应用程序页面加载性能。