内容
就像几年前响应式网页设计弥补了台式机和移动网站之间的鸿沟一样，渐进式Web应用程序技术目前正在缩小Web与应用程序世界之间的鸿沟。随着用户体验从台式机到移动应用程序的迅速融合，似乎在更时尚，更高效的互联网方面不断发展-尽管不可避免地对其基础遗传密码进行了一些重大更改。
- 如何构建渐进式Web应用程序
显然，有一些重大的选择压力推动了这一点。首先，为每个利基市场创建本机应用程序并不一定能有效利用资源：用户最终会浪费数百个大型应用程序，浪费带宽和宝贵的磁盘空间，而公司花费大量金钱来创建应用程序只是为了放弃这些应用程序在他们的第一个版本之后。而且，大多数这些应用程序只是受Web内容驱动的：来自Web服务或内容管理系统的信息。
渐进式Web应用程序的定义并不具体。 PWA只是一个Web应用程序，它通过逐步增强功能在Web平台中使用几个新的API和功能，以在具有相同代码库的每个平台上提供类似App的体验。它是一套最佳实践和API使用方法，可为您的用户提供出色的类似于应用的体验，因此您不必拥有或没有PWA；更有可能是您的网站的PWA或多或少。
您即将开始建立新网站吗？尝试使用网站构建器。并且确保您也从体面的Web托管服务中获得所需的支持。或稍有不同，请参阅我们的最佳云存储指南。
PWA的上升
虽然PWA这个名称是在2015年由Chrome团队在Google工作的Alex Russell在“逃脱标签，不丢失灵魂”中创造的，但实际上他们的旅程并没有从这里开始。我们曾经拥有HTML应用程序（HTA），它是由Microsoft在1999年创建的，还有诺基亚，黑莓和其他公司的许多其他Web应用程序平台。然后，在2007年，史蒂夫·乔布斯（Steve Jobs）提出了当时为原始iPhone创建应用程序的唯一方法：PWA，尽管名称不同。 Chrome从此开始，几年后改进了API，并发明了PWA名称。
以前有很多尝试将网页内容引入应用程序世界的失败经验，为什么我们现在认为它可以正常工作？首先，主要取决于现在正在开发和推广PWA背后的技术的公司，例如Microsoft，Google，Apple和Mozilla。此外，当您将精心设计的PWA与本机应用程序进行比较时，Web平台的性能达到了没有察觉到的差异。这些条件以前从未存在过，这就是网络社区认为PWA的时机已经到来的原因之一。
行动中的PWA在今天
如今，PWA可以完全正常运行并可以在以下位置安装：
- Android与大多数浏览器配合使用，Chrome提供最佳体验
- 带有Safari的iOS
- Chromebook
- Microsoft Store中的Windows 10
- 配备KaiOS的功能手机-来自Firefox OS的分支-目前主要在印度为数百万用户使用
今年晚些时候，Chrome还将为macOS，Windows和Linux提供支持。如果您现在想尝试的话，今天可以将其作为实验性标记“台式机PWA”使用。尽管未定义特定的时间范围，但以后也将在Windows上的Edge上安装Windows，而无需使用商店。
如果您重新阅读该列表，则可以看到每个平台在接下来的几个月中已经或将要支持完全可安装的PWA。而且，由于PWA只是一个顶部具有功能的网站，只有在兼容的浏览器上才能激活它，因此我们甚至可以说它从其基本功能上与所有浏览器都兼容。
另外，当前从大多数CLI生成用于不同框架的PWA，包括Angular 6+ CLI，React Create App，Polymer和Preact CLI的PWA入门工具包。最终，Ionic Framework团队提出了Capacitor的想法，Capacitor是开源的Cordova替代品，它使每个应用商店上的本地PWA成为可能。
安装
PWA的关键方面之一是应用程序的安装。该过程分为两个可选步骤：下载和离线存储应用文件的文件以及在操作系统中安装图标。由于这两个步骤都是可选步骤，因此您可以在浏览器中提供脱机体验，也可以在不进行脱机安装的情况下提供图标。但是，真正的PWA应当同时包括这两者：必须在HTTPS下使用TLS进行服务，并且用户将决定是在浏览器中还是在其自己安装的图标中使用它。
离线和立即启动
PWA的大脑是服务人员，它是安装在用户设备上的JavaScript文件，负责下载应用程序的文件，将其存储到缓存中，然后在需要时提供服务。一旦安装了Service Worker，它就可以充当Web应用程序所需的每个资源的网络代理：它可以决定从网络中获取资源还是从本地缓存中交付资源，这使得该应用程序可以脱机使用，也可以仅在短时间内使用。即使用户已建立连接，也要花费几毫秒的时间，这可以模拟本机应用程序的启动。
为了安装服务工作者，您的HTML文档将需要包含以下内容：
if（导航器中的“ serviceWorker”）navigator.serviceWorker.register（“ sw.js”）;
这会将文件“ sw.js”安装到当前域中当前文件夹的用户设备上，这就是所谓的作用域。安装后，对该服务范围内的任何URL的下一次访问将由该服务工作者管理。
假设我们有一个包含四个文件的PWA：index.html，app.js，app.css和logo.png。首先是将这些文件安装到sw.js文件的缓存中。
const resources = [“ index.html”，“ app.js”，“ app.css”，“ logo.png”]];自己。 addEventListener（“ install”，event => {event。waitUntil（caches.open（“ myPWAcache”）.then（cache => cache.addAll（resources）））;}）;
然后，要使PWA始终从缓存中得到服务，我们需要在服务工作程序中侦听fetch事件，并确定要使用的缓存策略，例如首先使用以下代码段进行缓存。
self.addEventListener（“ fetch”，e => e.respondWith（caches.match（e.request）。then（res => res）;
在这种情况下，每次用户访问PWA（无论是从浏览器还是从已安装的图标），引擎都会从缓存中获取文件。与本地应用程序相比，PWA的优势在于，设备在发生更改时无需再次下载所有文件，而只需通过透明的过程更改已下载的文件即可。此外，我们仍然可以按需下载部分应用程序。
但是挑战在于如何知道服务器上更新了哪些文件，以便可以在缓存中替换它们？如果您不想编写低级服务人员来管理此问题，则可以使用开源库Workbox，它将帮助您生成服务人员和资源清单来更新已安装的程序包。
请注意，如果设备上存在存储压力，则将删除PWA的文件，除非您请求“持久存储”（如果有）：
if（导航器中的“存储”和navigator.storage中的“ persist”）navigator.storage.persist（）;
在Chrome和大多数Android浏览器上，您的应用无法使用超过5％的可用空间；在iOS上，每个主机仅50MiB（近50MB）；在Edge中，它会根据总内存大小而变化；在Windows Store中，它是不受限制的。
一流的经验
我们拥有大脑，现在是该动人的时候了：网络应用程序彰显出来。将网站转换为PWA的目的不仅是确保网站可以快速或离线提供，而且还可以使其在操作系统中拥有其自己的图标，并提供与任何其他已安装应用程序一样的完全独立的体验。
清单是一个JSON文件，用于定义浏览器或应用商店使用的PWA的元数据，以定义安装行为。
该文件将几个属性定义为PWA的元数据。每个操作系统都将读取这些属性，并尽力匹配您喜欢的体验。例如，Android会显示“ display：standalone”（显示：独立）并创建正常的应用程序体验。借助“ display：minimal-ui”，它将创建具有可见URL和TLS证书的体验-对安全敏感的应用程序非常有用。通过“显示：全屏”，它可以创建完全身临其境的应用，而无需状态栏或可见的后退按钮。一组图标和颜色定义了初始屏幕或标题栏在应用程序窗口中的外观。
有一些清单生成器，例如Web App Manifest Generator或PWA Builder，如果您提供高分辨率的（至少512像素），它们也会以不同的分辨率为您调整图标的大小。
当清单文件链接到HTML文档中时，用户将可以使用不同的技术来安装应用程序，具体取决于浏览器，通常称为“添加到主屏幕”，“安装”或仅仅是“添加”。如果Bing可以抓取您的PWA，Microsoft将自动将其添加到Microsoft Store，以便Windows 10用户可以从那里安装它。
在某些操作系统上，您的PWA将具有捕获链接的能力。这意味着用户安装应用程序后，清单清单范围内的任何URL都将在应用程序的边界内而不是在浏览器内打开，无论它是否出现在浏览器或其他应用程序（如WhatsApp，Facebook）中或电子邮件。
如果您通过了我们在此处定义的PWA要求，则某些平台将提供环境标志（通常在URL栏中的一个小图标，指定可安装Web）或Web应用横幅。如果您愿意，还可以使用以下代码段添加自己的自定义“安装”按钮：
window.addEventListener（“ beforeinstallpr ompt”，function（e）{e.prompt（）; //将显示安装本机提示}）
如果已安装PWA，则会在窗口对象上触发“ appinstalled”事件，因此您可以跟踪统计信息来监听该事件。
应用商店
从浏览器进行安装的主要好处之一是能够避免应用商店批准过程或需要付费才能成为发布者。这具有明显的优势，例如即时发布，为公司创建私人应用或商店不应该接受的应用。
但是有些公司确实希望进入商店。截止到今天，唯一正式接受PWA的商店是Windows商店和kaiOS商店。幸运的是，借助Capacitor（当前在Alpha中使用）或PWA Builder之类的工具，我们还可以为其他平台创建和签名本机软件包。
Google Play商店中已经发布了一些PWA，例如Twitter Lite和Google Maps Go，目前正在自定义实现中。 Chrome将通过受信任的网络活动提供来自Chrome 68的解决方案。从那时起，我们将能够使用启动器创建一个Android软件包（APK）到我们的PWA，并将其上传到商店。对于Windows 10上的Microsoft Store，站点PWA Builder当前正在帮助生成APPX Windows 10程序包。使用网络视图，您也许可以为App Store手动创建iOS应用，但要特别注意商店的规则。
平台整合
通过实施渐进式增强技术，您将能够使用许多功能，包括推送通知，摄像头和麦克风访问，地理位置，传感器，付款，共享对话框和离线存储。所有这些功能都直接在浏览器的安全模型内运行，包括权限对话框。
我们还可以通过URI方案与其他应用程序通信，例如通过其URL或自定义URI（例如whatsapp：//）打开Twitter，YouTube或WhatsApp。
最后，当创建使用Capacitor或Microsoft Store发布到商店的本机PWA时，我们将能够桥接到本机API，这将使我们能够执行几乎任何本机代码。与Windows 10的集成不仅包括硬件访问，还包括与OS的集成，并提供了“固定到启动”之类的选项。例如，Twitter PWA使您可以将任何用户固定到您的开始屏幕。
设计和用户体验挑战
设计PWA面临着独特的挑战，因此花一些时间进行尽可能多的研究，测试并考虑以下几点很重要：
- 用户将期待类似应用程序的体验。
- 安装过程仍然是新的，因此我们需要付出更多的努力来解释如何安装该应用程序。
- 在没有用户交互的情况下在后台更新应用程序非常棒，但这也给UX带来了一些挑战。
- 在桌面上，自适应Web设计进入了一个新领域，因为PWA窗口很小，比移动视口要小得多。这意味着我们需要为此格式创建特定的视图或小窗口小部件，就像今天的Chrome OS中所看到的那样。
- 推送通知仅应为用户增加价值，因此，请在适当的时间学习提问，不要浪费发送无用或有趣消息的机会。
- 我们需要针对Web性能和脱机访问进行设计。
PWA的年份
随着今年iOS和台式机的加入，PWA如今无处不在。但是我们需要记住，他们的旅程才刚刚开始，因此请期待频繁的更改，并确保及时了解最新技术和思想，以在平台不断发展的同时提供出色的用户体验。
本文最初发布于的308期 网，这是面向网页设计师和开发人员的全球最畅销杂志。 在这里购买第308期 或者 在这里订阅.
