渐进式网络应用程序：速成课程

渐进式Web应用程序（PWAS）尝试通过向移动用户提供每个移动网络应用程序和本机移动应用程序的世界。

>

>他们提供类似应用的用户体验（溅出屏幕和主屏幕图标），它们从https安全的服务器提供，即使以低质量或缓慢的网络，它们也可以快速加载（由于页面加载最佳实践）条件，它们具有离线支持，即时加载和推动通知。 PWA的概念首先是由Google引入的，但仍然得到许多Chrome功能和出色的工具的支持，例如Lighthouse，这是一种可访问性，性能和渐进式审核的开源工具，我们将在以后进行一些研究。 > 在整个速成课程中，我们将与ES6从头开始构建PWA，并与灯塔进行反应并逐步优化它，直到我们在UX和性能方面取得最佳效果。

>

术语“渐进式”一词仅表示PWA的设计方式，以至于它们可以在现代浏览器中逐渐增强

，在现代浏览器中，许多新功能和技术已经得到支持，但在旧浏览器中也应该很好地工作没有尖端的功能。

钥匙要点

• 渐进式Web应用程序（PWAS）桥梁移动网络和本机应用之间的差距，提供高性能和用户参与功能，例如离线支持和推送通知。
>
• > PWA可以通过浏览器访问，而无需App Store下载，并且可以逐步增强它们以在现代和较旧的浏览器中运行。> Google的Lighthouse工具对于审核和优化PWA是至关重要的，可以帮助开发人员改善可访问性，性能和遵守渐进标准。
建立PWA涉及建立服务工作者，该服务人员可以启用离线支持和资源缓存之类的功能，可显着提高应用程序性能和可靠性。
• PRPL模式通过优化资源加载和交互准备就绪，增强了PWA性能，即使在具有挑战性的网络条件下，也可以确保无缝的用户体验。
>服务工作者在PWA，处理背景同步和推送通知中起着至关重要的作用，并允许应用程序通过缓存关键资源即时加载。 PWAS的未来看起来很有希望，并且在Web技术和主要浏览器和平台的支持下不断改进，将它们定位为本机应用程序的引人注目的替代方案。
>本机vs mobile =渐进
>一个本机应用程序可从移动操作系统的应用程序商店分发且可下载。另一方面，移动Web应用程序可以通过仅输入其地址或URL来从Web浏览器中访问。从用户的角度来看，启动浏览器并导航到地址比去App Store，下载，安装然后启动应用程序要方便得多。从开发人员/所有者的角度来看，要获得App Store帐户的一次性费用，然后上传他们的应用程序以便在全球用户访问其应用程序比必须处理Web托管的复杂性更好。
• >
>可以离线使用本机应用程序。对于需要从某些API服务器检索的远程数据，可以轻松考虑该应用程序以支持最新访问数据的某种SQLite缓存。
>移动Web应用程序可以通过Google等搜索引擎进行指示，并且通过搜索引擎优化，您可以吸引更多用户。本机应用程序也是如此，因为应用商店拥有自己的搜索引擎，开发人员可以应用不同的技术（通常称为App Store优化）来触及更多用户。

>一个本机应用程序至少在启动屏幕上立即加载，直到所有资源都准备好供应用程序执行为止。这些是最重要的感知差异。应用应用程序发行的每种方法都对最终用户（有关用户体验，可用性等）和应用程序所有者（有关客户的成本，客户覆盖等）都有优势。考虑到这一点，Google引入了PWA，将双方的最佳功能带入一个概念。 Google Chrome工程师Alex Russell介绍了此列表中总结了这些方面。 （来源：不经常注意。）

响应：适合任何形式。
连接独立：与服务人员逐步增强，让他们离线工作。
>类似应用程序的相互作用：采用Shell Content应用程序模型来创建适用的导航和交互。
新鲜：由于服务工作者的更新过程，始终始终最新。
安全：通过TLS（服务工作人员的要求）服务以防止窥探。
可发现的：由于W3C清单和服务工作者注册范围允许搜索引擎找到它们，因此可以将其识别为“应用程序”。
>可重新传输：可以访问OS的重新参与度UI；例如推送通知。
>可安装：通过提供浏览器提供的提示到主屏幕，允许用户“保留”应用程序，而他们发现的情况最有用，而无需App Store的麻烦。>
• 可连接：意味着它们是零摩擦，零安装且易于共享的。 URL的社会力量很重要。
• 灯塔
Lighthouse是用于审核Google创建的Web应用程序的工具。它与Chrome Dev工具集成在一起，可以从审核面板触发。

>

您也可以将灯塔用作Nodejs CLI工具：>

>然后您可以使用：

运行它

也可以将灯塔作为Chrome扩展名安装，但是Google建议使用与DevTools集成的版本，并且仅在您以某种方式无法使用DevTools时才使用扩展。

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

<span>npm install -g lighthouse  
</span>

>从Scratch

构建您的第一个PWA

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

lighthouse https://sitepoint.com/

>请注意，公共无授权reddit API已启用CORS标题，因此您可以在没有中介服务器的情况下从客户端应用程序中消耗它。

>在开始之前，本课程将假定您安装了NODEJS和NPM设置开发环境。如果您不这样做，请先从Awesome Homestead改进开始，该版本正在运行每个版本的最新版本，并准备开发开发和测试。

>

我们首先安装React Team创建的Project App，从WebPack配置的麻烦中节省您的项目样板。

>

<span>npm install -g lighthouse  
</span>

应用程序外壳架构

应用程序外壳是渐进式Web应用程序的重要概念。这只是最小的HTML，CSS和JavaScript代码，负责渲染用户界面。

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

用于构建简单的UI，我们将使用材料UI，这是React中的Google材料设计的实现。

让我们从NPM安装软件包：

下一个打开src/app.js，然后添加：

>

lighthouse https://sitepoint.com/

接下来，我们需要使用两种方法fetchfirst（）和fetchnext（）获取reddit帖子：

>

<span>npm install -g create-react-app
</span>create-react-app react-pwa
<span>cd react-pwa/
</span>

>您可以在此GitHub存储库中找到源代码。

>

<span>npm install material-ui --save
</span>

>在对应用程序进行审核之前，您需要使用本地服务器在本地进行构建并在本地提供应用：

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

>现在，您可以使用任何本地服务器为您的应用提供服务。在改进的Homestead上，您可以简单地将Nginx虚拟主机指向构建文件夹并打开homestead.app在浏览器中，也可以通过nodejs使用服务包：

<span>import <span>React, { Component }</span> from 'react';
</span><span>import <span>MuiThemeProvider</span> from 'material-ui/styles/MuiThemeProvider';
</span><span>import <span>AppBar</span> from 'material-ui/AppBar';
</span><span>import <span>{Card, CardActions, CardHeader,CardTitle,CardText}</span> from 'material-ui/Card';
</span><span>import <span>FlatButton</span> from 'material-ui/FlatButton';
</span><span>import <span>IconButton</span> from 'material-ui/IconButton';
</span><span>import <span>NavigationClose</span> from 'material-ui/svg-icons/navigation/close';
</span>
<span>import logo from './logo.svg';
</span><span>import './App.css';
</span>
<span>class App extends Component {
</span>
  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.state = {
</span>      <span>posts: []
</span>    <span>};
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>
      <span><muithemeprovider>
</muithemeprovider></span>        <span><div>
          <span><appbar>            title<span>={<span>React PWA</span>}
</span>
            iconElementLeft<span>={<iconbutton><navigationclose></navigationclose></iconbutton>}
</span>            iconElementRight<span>={<flatbutton onclick="{()"> this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
</flatbutton></span>            <span>}
</span>          <span>/>
</span>
          <span>{this.state.posts.map(function (el<span>, index</span>) {
</span>            <span>return <card key="{index}">
</card></span>              <span><cardheader>                title<span>={el.data.title}
</span>
                subtitle<span>={el.data.author}
</span>                actAsExpander<span>={el.data.is_self === true}
</span>                showExpandableButton<span>={false}
</span>              <span>/>
</span>
              <span><cardtext expandable="{el.data.is_self" true>
</cardtext></span>                <span>{el.data.selftext}
</span>              <span>
</span>              <span><cardactions>
</cardactions></span>                <span><flatbutton label="View" onclick="{()"> {
</flatbutton></span>                  <span>window.open(el.data.url);
</span>                <span>}} />
</span>
              <span>
</span>            <span>
</span>          <span>})}
</span>

          <span><flatbutton onclick="{()"> this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
</flatbutton></span>        <span></span></cardheader></span></appbar></span>
</div>
</span>      <span>
</span>
    <span>);
</span>  <span>}
</span><span>}
</span>
<span>export default App;
</span>

>使用服务，您的应用程序将从http：// localhost：5000/。

从本地提供服务。

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

>您可以毫无问题地审核您的应用程序，但是如果您想在移动设备中进行测试，也可以使用Surge.SH之类的服务来使用一个命令进行部署！>

接下来，从任何目录中的任何目录中的奔跑激增，将该目录发布到网络上。>

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

>

<span>npm run build
</span>

现在，让我们打开Chrome DevTools，去审核面板，然后单击执行审核。

从报告中我们可以看到，渐进式Web应用程序的得分为45/100，性能为68/100。 在渐进式Web应用程序下，我们有6个失败的审核和5次通过的审核。这是因为生成的项目默认情况下已经添加了一些PWA功能，例如Web清单，视口元和 tag。 在性能下，我们有诊断和不同计算的指标，例如第一个有意义的油漆，首次交互式，始终如一的交互式，感知速度索引和估计的输入延迟。我们稍后将研究这些。

灯塔建议通过降低下载尺寸或推迟不必要的资源下载来减少关键渲染链的长度来改善页面加载性能。

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

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

根据Doubleclick（一家Google广告公司）的说法，如果需要超过3秒的加载页面，则将放弃53％的移动网站访问。通过优化页面加载性能和速度，PWA通过一组我们将在接下来查看的技术和策略为用户提供即时的Web体验。

>

在

之前考虑性能

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

>您需要使用不同的测试工具，例如Chrome DevTools，Lighthouse，Google PagesPeed等，以在不同和模拟的网络条件下进行大量测试，因此您可以成功地优化您的应用程序页面加载性能。

> PWA性能指标您需要放在雷达上

>您可以使用灯塔用不同的指标，诊断和机会来衡量和优化应用程序的页面加载性能。

> 灯塔使用不同的指标。让我们一个人介绍他们：

首先有意义的油漆

第一个有意义的油漆是一种措施，仅表示用户在屏幕上看到有意义或主内容的时间。该审核的越低，您的应用程序的感知性能就越好。

这是我们应用的这个指标。

>我们看到，从1.3s开始浏览器开始呈现空背景，然后从2s开始浏览器开始呈现标头，2.4 s呈现标头和底部的按钮。直到第三秒钟才呈现帖子。整个过程花费了3.4秒，第一个有意义的油漆等于

2.340ms

- 当呈现没有的标头

按钮时。

第一个有意义的油漆实际上取决于我们可以认为有意义的涂料，这在不同的用户之间可能有所不同。如果用户只对阅读帖子感兴趣，那么第一个有意义的油漆是在3秒钟之后。您可以查看Google如何从此文档中计算此指标。>

这是同一应用程序的另一部胶片，其中灯塔在最后一个屏幕截图上报告了FMP为 2.560ms>，该屏幕截图在上面的折叠区域中充分显示了后的头条新闻。 其次，您可以看到该页面是逐步渲染的，而不是一次呈现，这很好地表明了性能。

您可以通过优化关键的渲染路径来优化此度量。>

临界渲染路径

关键的渲染路径是与Web浏览器渲染页面如何相关的概念，也就是说，从接收HTML，CSS和JavaScript资产到浏览器处理并呈现实际有意义的内容的步骤。为了优化关键的渲染路径，您需要对与用户当前操作相关的内容进行更高的优先级。也就是说，如果他们要访问您的应用程序，您可以先首先显示UI的可见部分，或者称为上述区域。

>

>有关更多详细信息，您可以阅读“优化关键渲染路径”。

>您还可以查看此策划工具的列表，以融合关键CSS资产。还要检查这些工具是否包含JavaScript和其他资产：

inliner：网上图像，CSS和JavaScript的节点实用程序

>

inline-source：一种用于在html

中嵌入标记的JS，CSS和IMG源的工具

inline-source-cli：用于内联源的CLI工具。

• 关键请求链
• 关键请求链是一个与关键渲染路径有关的概念，可以用一个图表来表示，该图可以分解关键资源以渲染页面，每个资源花费多少时间以及为每个资源下载多少个字节。您可以使用关键的请求链图来更好地了解关键资源，以消除，延期或标记为异步。这是我们示例PWA报告中的屏幕截图：

现在，让我们尝试使用内联源和Inline-Source-CLI解决此问题：

然后，我们在构建文件夹中导航并打开index.html，然后将关键字inline添加到和<script> <script> elements我们想要内联的元素：<ancy>> <p> </script>

让我们嵌入这些资源：

<span>npm install -g lighthouse  
</span>

>通过融入CSS和JavaScript资产，我们将关键请求链减少到2

首先互动且一致互动

这两个指标都表示用户能够与应用程序进行交互的时间。两个指标都表示可用性和可用性，但是它们之间存在差异。当页面最小交互式时，第一个交互式度量，而页面完全互动时始终如一的交互措施。

您可以通过优化关键的渲染路径来优化交互的时间。

>感知速度索引

>感知速度索引是一个指标，可以在考虑布局稳定性（没有UI元素突然位移）的同时测量页面上的折叠视觉性能。它只是指示页面内容可见填充的速度。

> PSI是SI或速度索引度量的修改版本，这是显示上述（可见）区域的平均时间，而无需考虑视觉稳定性。

您还可以通过优化关键渲染路径来优化此指标。

估计的输入延迟

估计的输入延迟是一个指标，指示主线程何时准备处理输入。>

>您可以阅读有关此指标以及如何通过此处通过的更多信息。

>

第一个字节（ttfb）

的时间

> wikipedia将TTFB定义为：

>首先字节（TTFB）的时间是一种测量值，用来指示Web服务器或其他网络资源的响应能力。 TTFB衡量用户或客户端的持续时间，向客户端浏览器收到的页面的第一个字节提出HTTP请求。

>您可以使用WebPagetest和Lighthouse之类的工具来测量PWA的TTFB。有关更多信息，请参见此链接。

>现在让我们查看开发人员使用的一组概念和常见技术来优化这些指标。

>代码分裂和基于路由的块

>

JavaScript生态系统近年来已经发生了巨大变化，诸如WebPack和browserify之类的新工具，用于将所有脚本捆绑到一个文件中。这被认为是良好的做法，因为它有助于将多个脚本文件的网络请求减少到一个请求（用于获取整个捆绑包），优化关键的渲染路径（没有长期块JavaScript和CSS资产）。但是问题是，对于大型应用程序，捆绑包将具有更大的尺寸，从而使下载捆绑包，对其进行处理，然后启动应用程序效率非常低，这会影响即时的Web体验（增加了第一个有意义的时间的时间油漆和UI变得互动的时间）。

作为解决此问题的解决方案，不同的应用程序使用代码拆分和基于路由的块（将代码拆分为仅每条路线需要的块）。因此，浏览器只需要下载渲染第一页/路线所需的第一个块，然后在用户浏览其他路线时懒惰加载剩余的块。

>

>服务器端渲染

>服务器端渲染是呈现服务器上的初始内容而不是浏览器的过程 - 在许多情况下，它可能会改善页面加载性能，因为浏览器可以在下载后立即显示内容（PLAIN HTML） 。

>单独的服务器端渲染将无济于事，因为需要下载和启动JavaScript资产。

> prpl性能模式

PRPL是一种性能模式，可利用诸如HTTP/2服务器推送，预加载标头，服务工作人员和懒惰加载等概念，以提高PWA交付和启动的性能。

>

prpl代表：

>最初URL路线的关键资源

• 渲染初始路线
• >预备剩余路由
• 懒负载并按需创建剩余的路线。

来源：Google Web基础

> 通过缓存优化性能 缓存是将经常请求的数据保存在近距离存储位置的过程。对于Web，这是浏览器内存或数据库。浏览器实际上具有专门为缓存网络响应设计的高速缓存位置，但是开发人员还可以利用其他存储机制（例如HTML5本地存储API和IndexEdDB）。

>您可以缓存应用程序外壳（负责渲染UI的资产），数据或理想情况下。缓存UI对于实现即时的网络体验至关重要。但是数据呢？

我们可以在此处考虑两类应用程序。仅需要网络连接才能使资产负责呈现UI和/或需要提供核心功能的应用程序。例如，考虑一个为用户提供个人会计的应用程序，这仅取决于算法和计算（本地CPU）。

>

第二类是依赖远程服务器以获取更新信息的应用程序。您可能想知道为什么需要缓存数据，因为它很快就会过时，并且用户大多需要更新的信息。问题是，在世界许多地方，问题不是网络连接的永久中断，而是网络在慢速和良好信号之间的波动状态，即使应用程序已经加载了，这也会影响用户体验。

>该应用程序可以利用数据缓存（利用背景同步API）来保证用户在页面之间导航时的服务，即使他们离开并在短时间内又回到应用程序。不断观看网络状态，然后恢复获取/发送数据而不会中断用户。

现在，让我们解决失败的问题以获得更好的分数。

注册服务工作者

>第一个失败的审核是说该应用不注册服务工作者。在更改此事之前，让我们首先了解服务工作者和相关功能。

>服务工作者是一种现代的浏览器技术，可以用作客户端代理，允许您的应用程序（通过拦截网络请求）实现用于添加功能（例如即时加载和离线支持等）的缓存等。

>服务工作者也可以用于实施更新并通过推送通知进行参与。

>

>服务工作者无法访问页面DOM，但是可以通过postmessage（）方法与客户端（窗口，工作人员或共享工作者）进行通信。

>许多浏览器API可在服务工作者中使用，例如：>

fetch api：用于从远程服务器中获取内容（发送请求并获取响应）

>缓存API：用于缓存内容（创建由请求键入的响应的缓存存储）
• >
推动API：要获得推送通知
• >
背景同步API：允许Web应用程序推迟操作，直到用户具有稳定的连接。
• >
• >服务工作者有许多需要正确处理的生命周期事件。
>

>安装事件：当用户首次访问该应用时，您将获得安装事件，并下载并安装了服务工作者

激活事件：调用.register（）后触发（下载和安装事件之后）

• 提取事件：如果在服务工作者的范围内导航或触发范围页面的任何请求，则会获得提取事件。
React项目已经包含服务工作者。我们可以使用它或创建一个新的，以便我们可以更好地了解服务工作人员的工作方式。 在公共文件夹中，让我们创建一个名为service-worker.js的新文件，然后通过在之前添加以下代码来从public/index.html文件中注册它：

以上是渐进式网络应用程序：速成课程的详细内容。更多信息请关注PHP中文网其他相关文章！