江门高端建站：渐进式Web应用程序的构建块

2019.08.13 mf_web

106

大多数开始构建应用程序的公司的共同智慧是构建原生Android或iOS应用程序，以及支持网站。虽然有一些很好的理由，但没有足够的人知道网络应用程序的主要优势。Web应用程序可以立即替换本机应用程序和网站的所有功能。这些天它们越来越受欢迎，但仍然没有足够的人熟悉它们或采用它们。

江门高端建站在这里，您将能够找到一些有关如何制作渐进式Web应用程序的内容，以及进一步研究的资源。我还将讨论围绕Web应用程序的各种组件和支持问题。虽然不是每个浏览器都对它们友好，但仍然有一些令人信服的理由来了解这项技术。

什么使Web应用程序进步？

渐进式网络应用程序是某些技术的总称，它们共同在网络上产生类似应用程序的体验。为简单起见，我将从现在开始将它们简称为Web应用程序。

理想的Web应用程序是一个网页，它具有Web和本机应用程序的最佳方面。它应该快速快速地与之交互，适合设备的视口，保持离线可用并且能够在主屏幕上显示图标。

同时，它不能牺牲使网络变得更好的东西，例如能够深入链接到应用程序并使用URL来实现内容共享。与网络一样，它应该跨平台运行良好，而不仅仅关注移动。它应该在桌面计算机上的行为与其他形式因素一样，以免我们冒着另一个时代的无响应的m.example.com网站的风险。

渐进式网络应用程序并不新鲜。自2011年以来，移动浏览器已经能够将网站添加到手机的主屏幕（2013年在Chrome Android上），并在head确定已安装网页的外观时使用元标记。自2012年以来，英国“ 金融时报”一直在使用网络应用程序在移动设备上提供数字内容。

迁移到网络应用程序使金融时报能够使用相同的应用程序在单个分销渠道中跨平台发货。回到我为英国“金融时报”工作时，只需一个版本，我们就可以支持以下内容：

iOS版，
Android（4.4+）Chrome，
较旧的Android（通过包装），
Windows 8，
黑莓，
Firefox OS。

这真正实现了“一次构建，随处部署”。

“但它不是在App Store中”

有一些很好的理由可以解释为什么用网站补充原生应用仍然是大多数大公司的标准做法。其中包括对浏览器支持的关注以及大多数用户适应使用本机应用程序的事实。我将在稍后更详细地解决这些问题。至关重要的是，如果应用程序不在应用程序商店中，该应用程序将如何获得曝光。

来自Daze End的图表显示受欢迎的曝光率下降 — 随着人气的下降，商店的曝光率呈指数下降。（图片来源：Charles Perry）（查看大图）

我认为，在应用程序商店中没有任何主要优势，因为已经证明，如果您不在应用程序商店中的前0.1％的应用程序中，那么您没有从中获得显着的好处。

用户倾向于首先找到您的网站找到您的应用。如果您的网站是网络应用，那么他们已经在目的地。

Web应用程序的优势之一是，它可以通过减少在登录网站和使用应用程序之间重新吸引用户所需的点击次数来提高参与度。

通过让用户通过将其添加到主屏幕来“安装”您的网络应用，他们可以继续与您的网站互动。当他们关闭Web浏览器时，手机会向他们显示Web应用程序的安装位置，让您重新认识。

背景和当前的气候

现代网络应用程序基于一种称为服务工作者的新技术。服务工作者是位于用户选项卡和更广泛的Internet之间的可编程代理。它们拦截并重写或构建网络请求，以允许非常精细的缓存和脱机支持。

自从2011年网络应用程序的起源，使网站被添加到主屏幕的书签以来，已经发生了许多发展，为创建渐进式网络应用程序奠定了更多基础。

Chrome 38引入了Web应用程序清单，该清单是一个描述Web应用程序配置的JSON文件。这允许我们从中删除配置head。

在Chrome 40（2014年12月）中，服务工作者开始在Firefox和Chrome上推出。到目前为止，Apple已经选择不在Safari中实现此功能，但是它正在“考虑中 ”。服务工作者的功能是简化使应用程序脱机的过程; 它还为未来类似应用的功能奠定了基础，例如推送通知和后台同步。

基于新服务工作者和Web应用程序清单构建的应用程序称为渐进式Web应用程序。

渐进式网络应用程序与规范不同。事实上，它最初是作为服务工作者时代的Web应用程序的定义，因为新技术已经内置到浏览器中。具体而言，Chrome会在满足许多条件时使用此定义在浏览器中触发安装提示。条件是网络应用程序：

有一个服务工作者（需要HTTPS）;
有一个Web应用程序清单文件（至少具有最小配置和display: "standalone"）;
有过两次不同的访问。

在这种情况下，“渐进式”意味着浏览器支持的功能越多，体验就越像应用程序。

安装Web应用程序的提示目前显示在Opera，Chrome和Samsung浏览器的不同条件下。

Apple已表示对iOS的渐进式网络应用程序感兴趣，但在撰写本文时，它依赖于用于Web应用程序配置的元标记和用于脱机使用的应用程序缓存（AppCache）。

网站在什么时候成为Web应用程序？

我们知道网站的外观和应用程序的外观，但网站在什么时候成为网络应用程序？对于什么使某些东西成为网络应用而不是网站，没有明确的指标。

在这里，我们将详细介绍Web应用程序的特性。

渐进式WEB应用程序应该展示某些类似应用程序的属性......

响应
完美填充屏幕，这些网站主要针对手机和平板电脑，必须响应过多的屏幕尺寸。它们也应该只用作桌面网站。多年来，响应式设计一直是网站建设的重要组成部分。Smashing Magazine有一些很棒的文章。
离线优先
应用程序必须能够脱机启动并仍然显示有用的信息。
具有触控功能
的界面应设计为触控，手势互动。用户交互必须感觉响应迅速，并且在触摸和响应之间没有延迟。
应用程序元数据
应用程序应该提供元数据来告诉浏览器在安装时应该看起来如何，这样您就可以在主屏幕上获得一个漂亮的高分辨率图标，并在某些平台上获得闪屏。
推送通知
应用程序能够在应用程序未运行时接收通知（如果适用）。

......但是应该维护某些类似网络的属性

渐进式
应用程序的安装能力是渐进式增强功能。至关重要的是，应用程序仍然可以作为普通网站运行，尤其是在尚不支持安装或服务工作者的平台上。
开放网络上的HTTPS
不应将应用锁定到任何浏览器或应用商店。它应该能够深度链接并且应该提供共享当前URL的方法。

让您的网站离线

使您的网站脱机带来一些主要优势。

首先，当用户处于片状网络连接时，它仍然可以工作。

此外，如果应用程序不依赖于网络，则从打开应用程序到使用应用程序的时间将大大减少。这为用户提供了很好的体验。如果最近使用过浏览器，精心优化的Web应用程序可以比原生应用程序启动更快。

使网站脱机工作有两种方法：

旧的和破坏的方法
支持离线启动您的网站已经存在多年，以AppCache的形式。然而，AppCache有一些严重的缺陷，甚至已经从规范中弃用了。它很难使用，如果配置错误，可能会永久性地破坏您的网站。尽管如此，这是在iOS上离线的唯一方法，至少在Apple支持服务工作者之前是这样。
新的热点
服务工作者也很有效，目前Chrome，Firefox和Opera都支持这些服务工作者，很快就会出现在Edge上。Apple的WebKit团队将其标记为“正在考虑中”。

服务工作者就像其他Web工作者一样，他们在一个单独的线程中运行，但它们不依赖于任何特定的选项卡。它们在创建时被分配了URL范围，并且可以拦截和重写此范围内的任何请求。如果您的服务工作者坐在http://example.com/my-site/sw.js那里，它将能够拦截任何发出/my-site/或降低但不能拦截对根的请求的请求http://example.com/。

因为它们不与任何标签绑定，所以它们可以在后台生效，以处理推送通知或后台同步。尤其是，不可能永久性地破坏您的网站，因为它们会在检测到新的服务工作者脚本时自动更新。

一个好的指导方针是，如果您从头开始构建一个新网站，请从服务工作者开始。但是，如果您的网站已经与AppCache脱机工作，那么您可以使用工具sw-appcache-behavior从中生成服务工作者，因为我们可能很快就会达到某些浏览器只接受服务工作者而有些只接受应用程序缓存。

由于AppCache已被弃用，我将不在本文中进一步讨论。

设置服务工作者

（另请参阅“ 设置服务工作者 ”以获取更详细的说明。）

因为服务工作者是一种特殊类型的共享Web工作者，所以它在与主页面分开的线程中运行。这意味着它与服务工作者在同一路径上的所有网页共享。例如，位于服务人员/my-page/sw.js将能够影响/my-page/index.html和my-page/images/header.jpg，但不会/index.html。

服务工作人员能够拦截和重写或欺骗页面上发出的所有网络请求，包括对data://URL的请求！

此功能使其能够提供缓存响应，以便在没有数据连接时使页面正常工作。尽管如此，它还是足够灵活，可以用于许多可能的用例。

它只能在安全的上下文（即HTTPS）中使用，因为它非常强大。这可以防止第三方使用来自受感染或恶意Wi-Fi接入点的注入服务工作人员永久覆盖您的网站。

现在设置HTTPS可能看起来令人生畏和昂贵，但实际上它从未如此简单或便宜。让我们的加密为您提供免费的SSL证书和脚本，以便您自动配置服务器。如果您在GitHub上托管，GitHub页面将自动通过HTTPS提供。Tumblr页面也可以配置为在HTTPS上运行。CloudFlare可以代理请求升级到HTTPS。

离线通常涉及为网站的不同部分选择某些缓存方法，以便更快地提供服务或者在没有Internet连接时提供服务。我将在下面讨论各种缓存方法。

我使用Service Worker Toolbox抽象出复杂的缓存逻辑。可以通过提供四个预配置的路由来设置此库以处理路由，这些路由可以以干净的方式进行配置。它可以导入您的服务工作者。

用例1：预先缓存

在您的网站确定需要之前，预先缓存会降低请求。这可以大大减少第一次上漆时间，因为您的网站/site.css在开始下载您的网站徽标之前无需解析/images/logo.png。

toolbox.precache(['/index.html', '/site.css', '/images/logo.png']);

复制

用例2：离线

允许用户在最简单的情况下脱机时重新访问您的网站意味着如果设备处于脱机状态，则返回缓存。在此处设置超时非常重要，因为片状网络，配置错误的路由器或强制网络门户可能会让用户无限期地等待。

toolbox.router.default = toolbox.networkFirst;toolbox.options.networkTimeoutSeconds = 5;

复制

实际上，我们实际上可以更聪明一点，因为您的大部分资产不会随着时间的推移而发生变化。我们可能只想尽快从缓存或网络中获取内容。以下行告诉Service Worker Toolbox，对图像路径的所有请求都应该来自缓存（如果它们在那里可用）。

toolbox.router.all('/images/*', toolbox.fastest);

复制

在这种情况下，当用户进行身份验证时，重要的是我们不仅要返回缓存的响应; 我们应该声明所提出的请求/auth/应该只是网络。

toolbox.router.post('/auth/*', toolbox.networkOnly);

复制

以下是离线的一些好习惯：

应该预先初始化初始静态资产。这将下载并在安装服务工作者时缓存它们。这意味着在最终需要时不需要从服务器加载它们。
默认情况下，理想情况下，请求应该是从网络中新获得的，但是请回退到缓存，以便它们可以脱机使用。
相对较短的网络超时意味着请求将能够返回网络连接上的缓存数据，该连接表明它具有数据连接但未返回响应。
应该首先从缓存中调度不经常更新的资产（例如图像），然后浏览器也会尝试更新它们。如果toolbox.cacheOnly使用，那么它也可以保存用户的数据。

注意：浏览器缓存和Cache API是不同的动物。在网络优先或仅网络的情况下，已绕过缓存API。请求可能仍会触及浏览器的缓存，因为请求中的缓存标头表示它仍然有效。这可能导致用户接收缓存和新数据混合的问题。杰克阿奇博尔德有一些避免这个问题的好建议。

调试您的服务工作者

如果您使用的是Chrome或Opera，请转到chrome://serviceworker-internals。这将允许您检查并暂停和卸载服务工作者脚本。

在最新版本的Chrome和Opera中，您可以通过检查器中的“应用程序”选项卡获取详细的视图和调试工具。

互动和动画表现

人们开始期望网络没有本机应用程序所做的流畅动画界面。但是，Web应用程序不接受相同的标准。网络应用程序必须能够流畅地制作动画，以免我们的用户感觉我们正在提供降级的二流体验。我们有三个目标让它感觉很快：

当用户做某事时，应用程序也必须在100毫秒内做一些事情; 否则，用户会注意到滞后。这取决于点击，点击，拖动和滚动。
每帧必须以每秒60帧（每帧16毫秒）的一致性渲染。即使是一些缓慢的帧也是显而易见的。
对于在糟糕的网络上运行的三年预算电话而言，它必须很快，而不仅仅是你的闪亮的开发机器。
它必须快速启动。很长一段时间我们一直致力于通过让我们的网站在1到2秒内可见和可用来维持用户参与度。谈到网络应用程序，启动时间和以往一样重要。如果所有应用程序的内容都已缓存且浏览器仍在设备的内存中，则Web应用程序的启动速度可能比本机应用程序快。本机应用程序和网站开发人员都犯的一个错误是需要联网内容才能使产品正常运行。
下载和更新的Web应用程序必须很小：来自应用程序商店的10 MB感觉不是很多，但每次下载10个未缓存的MB对于很多移动用户来说是非常不可能管理的。

蝙蝠，最重要的项目就是这个，在head文件中：

<meta name="viewport" content="width=device-width">

复制

这条线确保在基于Chromium或Firefox的手机浏览器上没有300毫秒的分接延迟，但它仍然允许用户通过捏合放大（非常适合可访问性）。

自从iOS 8问世以来，默认情况下点击速度很快，但如果点击速度很快，点击速度可能会很慢，根据某些启发式算法。如果这是一个问题，我建议使用FastClick删除延迟。

还有动画表现的问题。你可能想要很多漂亮的元素进出动画，可以被用户拖动的元素，以及其他可爱的交互。

网络性能可以非常详细地讨论，并且是我心中的一个主题，但我不会在这里详细介绍。我会谈谈我的工作，以确保我的互动和动画清晰流畅。

四处搜寻或询问您的朋友或家人是否有旧智能手机。我经常借用伴侣的Nexus 4。

将手机插入电脑，然后转到chrome://inspect/#devices。这将打开一个检查窗口，您可以使用该窗口检查手机上运行的网页。您可以使用分析并查看时间线以查找性能较差的来源，然后根据实际基线设备对其进行优化。

动画某些CSS属性是抖动动画的最大原因之一，称为jank。CSS触发器是一个很好的资源，用于确定哪些属性可以安全地动画，而不会导致浏览器重绘或重新布局整个页面。

如果编写高性能动画对您来说是一项艰巨的任务，那么很多图书馆都会处理这项工作。我最喜欢的是GreenSock，它可以很好地处理触摸交互，例如拖动项目，可以做非常奇特的动画和补间。

推送通知

推送通知是重新与用户互动的好方法。通过提示用户，您可以将应用程序置于他们的头脑中。他们可以完成未完成的交易或接收有关新内容的警报。

确保您的推送通知与用户在当时发生的事件相关。不要把时间浪费在以后可以做的事情上。您通知他们的内容应该要求他们采取行动（回复某人或参加活动）。此外，如果您的网络应用程序可见或焦点，请不要发送通知。

与之交互时，通知应将用户带到脱机工作的页面。通知可以挂在未读状态; 当用户没有网络连接时，他们可能会进行交互。如果推送通知在尝试与之交互后拒绝工作，用户将感到沮丧。

推送通知的最佳体验使用户无需打开您的网络应用程序！“你有一条新消息”是无用的，并且像clickbait标题一样烦人。显示消息和发件人。

通知中的操作按钮可以提供不一定打开浏览器的交互提示（“喜欢这篇文章”，“回复是”，“回复否”，“稍后提醒我”）。这些服务符合用户的条款，让他们保持参与并最大限度地减少他们的时间投入。

如果您通过常规或不相关的通知向用户发送垃圾邮件，他们可能会在浏览器中禁用您应用的通知。在那之后，几乎不可能再次与他们接触，你将无法轻易地再次提示他们获得许可！

为避免这种情况，请清楚轻松地启动应用程序的“禁用通知”按钮。一旦解决了令用户感到沮丧的任何问题，您就可以尝试重新参与。

推送通知API需要服务工作者。因为在没有打开浏览器选项卡时可以接收推送通知，所以服务工作者将在后台线程中处理通知请求。它可以执行异步操作，例如在向用户显示通知之前向API发送获取请求。

要创建推送通知，请向浏览器制造商提供的端点发出请求。对于基于Chromium的浏览器（Opera，Samsung和Chrome），这将是Firebase云消息传递。这些浏览器的行为也有点偏离规范。

可以通过请求推送通知权限来查找详细信息：

serviceWorkerRegistration.pushManager.subscribe({
  // Required parameter as receiving updates
  // but not displaying a message is not supported everywhere.
  userVisibleOnly: true}).then(function(subscription) {
  return sendSubscriptionToServer(subscription);})

复制

订阅是一个如下所示的对象：

{"endpoint": "http://example.com/some/uuid"}

复制

在上面的示例中，uuid唯一标识当前正在使用的浏览器。

注意：基于Chromium的浏览器的行为略有不同。您需要一个Firebase应用ID，需要在您的网络应用的清单文件中输入（例如"gcm_sender_id": "90157766285"）。

此外，端点将不会以给定的格式工作。您的服务器需要稍微破坏它以使其工作。它需要一个POST请求，以在您的API密钥head和uuid在body。

发送推送通知时，可以在推送通知本身中发送数据。这很复杂，涉及加密API请求中的内容。Node.js 的web-push包可以处理这个，但我不喜欢它。

收到通知后可以执行异步请求，因此我更愿意向客户端发送一个称为“痒”的最小通知，然后服务工作者将向我的API发送获取请求以提取任何请求最近更新。

注意：服务工作者可以随时被浏览器关闭。event.waitUntilpush事件中的函数告诉服务工作者在事件结束前不要关闭。

self.addEventListener('push', function(event) {
    event.waitUntil(
        // Makes API request, returns Promise
        getMessageDetails()
        .then(function (details) {
            self.registration.showNotification( details.title, {
                body: details.message,
                icon: '/my-app-logo-192x192.png'
            })
        })
    );});

复制

您也可以在通知事件中收听点击或按下互动。使用这些来决定如何回应。您可以打开新的浏览器选项卡，关注现有选项卡或发出API请求。您还可以选择是关闭通知还是将其保持打开状态。将此功能与通知上的操作结合使用，可以在通知本身中构建出色的功能。这将带来很棒的体验，因为每次都不需要用户打开您的应用程序。