当变化逐步逐步发生时，有时很难看到变化的剧烈和全面。 似乎仅仅几年前，Web平台几乎在所有方面都失去了本机应用程序，并且浏览器可以完成的工作与从Apple App Store或Google Play商店等商店下载的应用程序可以提供的服务之间存在着差距，非常巨大。 这种深渊的证据之一是，在2007年，Web实际上是第一款iPhone的主要应用程序开发平台，但是该平台显然没有起步。 从第二版操作系统发布一年后，App Store就出现了，本机应用程序迅速兴起，形成了我们现在所知道的市场格局。
从那时起，发生了很多变化，并且网络技术并没有停滞不前。 他们遵循消除限制的路径以及以前不可能做到的事情-脱机工作，后台数据同步，推送通知，支持一键登录和使用信用卡付款，Apple Pay，Google Pay和其他内置方法浏览器已成为现实。 这些功能有机地补充了平台的主要部分-HTML / CSS和JavaScript，近年来，它们的发展步伐超过了活跃水平。 例如，新的Houdini项目仍处于初期阶段，它消除了使用CSS可以完成的几乎所有限制，除其他事项外，还可以创建自己的布局并与Grid和Flexbox并用，并以编程方式访问CSS内部引擎。 但是，即使没有Houdini，您现在也可以创建以60 FPS （每秒帧数）运行的CSS动画。
Web标准的不断发展吸引了开发人员。 许多有充分理由的人相信，使用Web技术进行开发会更快，更轻松，更便宜，因此，例如，如果您看一下现代桌面应用程序，我们将看到其中大多数都是用Electron编写的，Electron是一个框架，可让您编写Windows，Linux和基于网络的macOS。 电子应用程序的示例包括Visual Studio Code，Slack，桌面上的Skype等。
另一方面，作为Web技术不可或缺的一部分的跨平台现在比以往任何时候都更加重要。 为iOS和Android支持单独的独立代码库非常昂贵。 因此，即使对于本机应用程序，开发人员也越来越多地选择跨平台技术，例如Google的React Native，Xamarin或Flutter（如果您是移动开发人员，但还没有看过Flutter ，我强烈建议您这样做，即使只是出于教育目的）。 有了PWA，我们得到了每个人梦long以求的-真正的跨平台应用程序。
说到消除Web平台的限制，我们不得不提及WebAssembly。 现在，由于有了这项技术，实际上对浏览器中的代码执行速度和所使用的编程语言没有任何限制。 现在，您已经可以实现仅直接在操作系统中运行的本机C代码的一半性能，而这并不是极限。 当然，这并不意味着您不需要扔掉JavaScript并改用C或Rust来编写用户界面，因为JavaScript + Angular，React或Vue.js捆绑包对于这些目的以及现今可用的JavaScript本身（ECMAScript）极为有效-实际上，它是一种全新，方便且现代的语言，支持异步/等待，常用的类语法，解构，模板字符串等等。 但是WebAssembly将关键功能（例如游戏，AR / VR，人工智能，音频和视频处理）的性能提升到了本机性能，而且成本很高。 另外，现在将使用C，C ++，Rust，C＃和其他编程语言的现有代码移植到浏览器要容易得多。 这种移植的一个很好的例子是最近引入的AutoCAD，它可以在使用WebAssembly 的浏览器中工作 。
在设备上拥有一个快速的运行时环境（直接访问视频卡）非常重要，因为鉴于现代对隐私和安全的要求，当某些数据根本无法离开客户端并转到服务器时，所有数据都必须在客户端中进行处理应用程序。 例如，如果我们在听到某个关键词之前正在听麦克风，或者分析来自摄像头的流，则用户不太可能同意将所有声音和视频发送到服务器进行处理。 现在，我们可以访问TensorFlow.js之类的库，该库不仅使我们可以在浏览器中启动经过训练的模型（神经网络），而且可以直接在客户端上对这些模型进行重新训练。 在许多情况下，这可以提高安全性和隐私性并减少服务器负载。
传统上已证明Web平台的局限性的另一个领域是对操作系统和用户设备硬件功能的访问。 但是在这里，这些限制逐渐消失了，尽管必须承认，在iOS上它们的清除速度比在Android上要慢得多。 如果我们谈论与操作系统的交互，则最近出现了用于剪贴板的剪贴板API，用于检测第二台监视器/投影仪的连接并控制其上显示内容的Presentation API，用于与系统共享对话框集成的Web Share API（在Web应用程序中）只能用作来源，但是正在接收数据，正在进行中，可以通过在about：标志中包含实验性Web平台功能在Chrome中测试Web Share Target API。 说到传感器和数据传输，我们可以访问用于附近物理设备的Web蓝牙API（在IoT解决方案中非常活跃），以及用于处理各种传感器（如加速度计，陀螺仪）的新通用传感器API。 ，光传感器，指南针等。 而且我没有提到很长一段时间以来一直存在的网络标准，例如使用摄像头和麦克风，振动支持，获取有关电池，网络类型和速度以及用户设备可用内存的信息。
由于所有这些更改和创新，现在Web和本机应用程序不再被深渊所分割。 现在他们并肩站立。
但是，请不要用我的话作为本机应用程序和Web平台功能相等的标志。 粗略地说，如果五年前Web平台为20％的应用程序提供了足够的机会（在这里，我的意思是需要复杂逻辑的应用程序，而不是具有内容的网站-在这种情况下，有AMP-加速移动页面和类似技术，涵盖了从博客和新闻站点到在线商店以及各种机构和组织的站点的内容场景，几乎占100％），在其他情况下，有必要创建本机解决方案，现在Web平台的功能已达到70-80％， Uchaev。 对于越来越多的应用程序，开发人员可以选择。 通常，这种选择是PWA和本机应用程序的共存，例如Uber，星巴克，Aviasales，Twitter，Tinder，Google Maps，AliExpress等。
资料来源： https : //twitter.com/necolas/status/829128165314306048
这些功能有哪些要求使用Apache Cordova或其他方法通过应用程序商店分发来创建本机应用程序或至少打包Web应用程序？
- 在用户设备上使用联系人和日历。
- 发送/接收短信，直接从应用程序拨打电话。 与手机的SIM卡互动。
- 与NFC合作
- 地理围栏
- 与闪光灯和非标准传感器（例如压力传感器，心率监视器等）配合使用。
- 系统的低级工作-应用程序管理，系统设置，对存储库的完全访问权限。
- 创建键盘和小部件。
- 将应用程序注册为默认应用程序以打开任何类型的文件或链接类型。
自然，这是不完整的列表。 另一方面，毫无疑问，在不久的将来，许多功能将可用于Web平台。 但是，您不应指望操作系统及其平台也会停滞不前。 是的，差距将会缩小，但是总会有一些仅适用于本机应用程序。 因此，如果您是专注于iOS或Android的移动开发人员，那么始终领先一步对您至关重要，这样您的应用程序才能成为市场上最好的应用程序。
不要忘记Web应用程序具有本机不可用的功能。 这主要是指应用程序的分发，吸引用户的成本以及不依赖于应用程序商店所有者的意愿以及商店检查更新的速度。 是的，根据统计数据，移动设备上的用户在应用程序上花费的时间更多，而在浏览器中花费的时间更少，但平均一半的用户每月安装0（零）个新应用程序，而在应用程序上花费的大部分时间则由Facebook等巨头承担。 另一方面，用户每月要访问一百多个不同的站点，并轻松地访问新站点。 因此，吸引用户到站点（Web应用程序）的成本可能比吸引用户到从商店下载的应用程序的成本低十倍。 Google Play即搜即得技术部分解决了此问题，使您可以通过浏览器的链接运行本机Android应用程序，绕过商店而无需安装。 这样的应用程序自然具有有限的功能，但转换效果很好。 这仅证实了以下假设：Web应用程序的分发模型是一个优势。 尽管应用程序商店中的存在，尤其是在最高评级的商店中，还可以吸引用户，但是与十年前相比，它的运行情况要差得多，因为商店中的应用程序数量明显更多。
如果需要在应用程序商店中存在Web应用程序（PWA），那么这也是可能的。 Microsoft Store已经支持添加PWA。 对于其他商店，您可以手动打包应用程序，也可以使用现成的工具，例如网站pwabuilder.com ，该网站除其他功能之外，还可以基于Apache Cordova的PWA为Apple App Store和Google Play生成软件包。 此外，在未来的Android版Chrome浏览器中，系统将具有使用可信网络活动机制将PWA嵌入Android应用程序中的功能。
2018年渐进式Web应用
在谈论在用户体验，界面，速度和功能方面接近本地应用程序的Web应用程序时，它们使用术语PWA-渐进式Web应用程序 。 PWA不是某种框架或SDK。 它是一种方法，或者，如果您喜欢，则是一种如何构建现代Web应用程序的哲学。
从技术角度来看，PWA使用浏览器中可用的现代Web标准，仅此而已。 PWA方法不对Web应用程序本身施加任何特殊限制。 例如，PWA可以是单页应用程序（SPA），也可以不是。 所有用户都可以与您的应用程序交互，并且使用逐步（逐步）改进的方法，这是非常重要的-用户浏览器越现代，他将获得更多的机会。
PWA的主要功能以及它使我们能够将Web应用程序称为Progressive Web App引以为豪的事实是使用Service Worker机制支持离线工作，以及将应用程序图标添加到用户设备的开始屏幕的相关功能（我们不想添加设备应用程序的“开始”屏幕在没有Internet连接的情况下无法加载？）。
Service Workers提供了一个独特的机会来与您的网站页面分开运行代码，即使页面本身可以关闭（但您将无法长时间在后台运行代码，但是限制很大）。 这个机会可以在新的Web标准中找到越来越多的应用程序。
在实施与PWA相关的Web标准方面，2018年春季确实发生了一场革命。 PWA一词已被广泛使用了几年，但是在更早的时候，它仅适用于Google Chrome浏览器，并且台式机和Android最初都支持脱机工作，但是应用程序的安装仅在Android上有效。 许多开发人员仍然将PWA视为纯Android技术。 但是在2018年3月发布的iOS 2018中，Apple向移动Safari添加了Service Worker支持。 Safari也已为macOS添加了支持。 继苹果之后的2018年4月，微软又在其Microsoft Edge浏览器中增加了对Service Workers的支持。 此外，Windows 10现在支持通过Microsoft Store分发PWA。 下一步，我们希望可以通过所有平台上的浏览器在台式机上安装PWA，而不仅仅是在已经可用的Chrome OS上。
您可以通过在Chrome中的about：标志中包含Desktop PWA和App Banners或Experimenting app banner标志来测试在桌面上的安装。 启用这些实验性功能后，台式机上Chrome上的台式机PWA安装界面将如下图所示。
随着台式机上PWA的出现，它们很可能会占据Electron现在主导的利基市场。
因此，现在您可以在iOS，Android，Windows，Linux，macOS和Chrome OS，Chrome，Safari，Firefox，Edge和Samsung Internet浏览器中使用Service Worker机制提供脱机工作。 并且在所有移动平台上，已经支持将应用程序图标添加到开始屏幕。
资料来源： https : //caniuse.com/#feat=serviceworkers
半年前，甚至很难想象与PWA相关的技术的引进会如此之快。 在下面的屏幕截图中，您可以看到带有PWA图标的iOS初始屏幕的一部分，该图标与通过商店安装的本机应用程序没有区别。 我想特别强调一下，关于iOS，我的意思是iPhone和iPad-平板电脑和手机在PWA支持上没有区别。
资料来源： https : //medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
除了在各种浏览器中实施现代Web标准外，Chrome中PWA的工作也进行了更改和改进。 而且，如果仍在开发Chrome中OmniBox（地址栏和搜索栏）中PWA安装图标的显示，那么使用WebAPK机制（APK-Android包，Android应用程序容器）在Android上安装PWA的方法已经可以使用。 最初，安装后的PWA只是开始屏幕上的浏览器快捷方式。 现在也支持此模式。 PWA快捷方式在角落包含一个小的浏览器图标。 但是现在主要的安装方法是WebAPK。 本质上，Android上的PWA变成了在安装过程中即时生成的完整应用程序。 PWA现在不仅在开始屏幕上显示为快捷方式，而且还与所有其他已安装的本机应用程序一起显示在所有应用程序列表中。 尽管WebAPK机制不允许访问无法从浏览器访问的操作系统的任何本机功能（除了支持从加载PWA的域中打开链接，在PWA本身中，而不是在浏览器中），而是PWA的事实从操作系统的角度来看，它们是成熟的应用程序，不能不高兴。
Service Worker技术的成熟还证实了这样一个事实，即所有流行的SPA工具（单页应用程序）要么像在Angular CLI中那样支持一个命令中的Service Worker生成，要么甚至生成默认的Service Worker。 create-react-app的情况。 另一方面，许多开发人员希望更好地了解在应用程序中缓存的内容，方式和时间，因此他们希望自己编写Service Worker代码。 但这不是一个好主意，充满了难以重现的错误，因此，用户可以保留该应用程序的过期缓存版本。 从我的角度来看，一种中间的选择是使用现成的库，这些库提供了缓存和后台同步策略的实现，但为开发人员提供了最大的自由度。 这些库中目前最受欢迎的是Workbox 。 例如，使用Workbox进行图像缓存，这样在缓存中最多可以容纳60个这样的图像。
workbox.routing.registerRoute( /\.(?:png|gif|jpg|jpeg|svg)$/, workbox.strategies.cacheFirst({ cacheName: 'images', plugins: [ new workbox.expiration.Plugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days }), ], }), );
不要认为实现离线工作和缓存意味着在离线模式下支持应用程序100％的功能，尽管这也是可能的，并且可能是一个长期的好目标。 最主要的是，在没有Internet连接的情况下，用户不会有该应用程序无法运行的印象（最糟糕的是，如果他们在Chrome中看到恐龙，则表明无法下载）。 因此，从以灰色显示应用程序并显示有关缺少Internet连接的消息到离线实现所有功能的一切都是不错的选择。
通过缓存进行操作，您也不要忘记它大大加快了应用程序的第二次加载速度（当然，还允许您添加对脱机工作的支持）。 因此，如果您确实想改善用户体验，则必须尽可能加快首次下载的速度。 一种方法是服务器渲染。 由于在服务器上进行渲染，用户将能够立即看到应用程序的内容，这降低了应用程序在加载之前将其关闭的可能性，因为用户会厌倦等待。 而且，这增加了再次调用的可能性，因此，希望确实需要用于支持缓存的工作。 因此，您的Web应用程序必须是同构的 -这样相同的JavaScript代码就可以在客户端和服务器端工作。
因此，您已决定下一个Web应用程序为PWA。 随之而来的问题是，除了服务人员之外，还有什么可能实施的呢？ 如果要开发新的应用程序，建议您按照下面列表中列出的顺序开始添加功能。 所有这些功能对于用户都是有意义的，无论是一起使用还是单独使用。
- 添加Service Worker，实施缓存并脱机工作
服务人员：简介
渐进式Web App架构简介 - 添加Web App Manifest（manifest.json）以支持应用程序安装
Web应用清单 - 如果将用户生成的数据发送到服务器（例如，帖子或评论），则下一步可能是实现对后台数据同步的支持-后台同步。 在这种情况下，即使离线，用户也可以将数据添加到您的应用程序中，并且当出现Internet连接时，即使您的应用程序已经关闭，Chrome也会使用Service Worker将数据发送到服务器。
引入背景同步 - 实施实验性一键式登录和自动登录支持
无缝的登录和注册流程 - 使用Web Share API实施共享
Web Share API简介 - 如果您的应用程序需要付款，请使用“付款请求” API实现其支持
介绍付款请求API
但是首先，请阅读Google的清单 ，其中介绍了良好的Web应用程序的主要功能。
如果您已经有一个现有的应用程序，并且正在开发一个新的Web应用程序，则建议从审核开始。 可以使用Lighthouse工具（可从Chrome开发者工具（“审核”标签）启动）以及NPM软件包来完成此操作。 Lighthouse自动执行清单中的许多检查。 理想情况下，您不仅应该从使用Lighthouse进行审计开始，而且还应该将其集成到构建过程中。 Lighthouse使您可以查看Web应用程序的优点和缺点，还可以帮助您了解可以实施哪些其他功能，Web标准和最佳实践。
如果您想尝试一些完全实验性的功能，请使用Google Chrome浏览器中的Origin Trials机制。 使用此机制，在提交和批准应用程序后，您可以为Web应用程序的用户启用新的实验性Web标准。 这种机制用于测试并非针对整个Internet的Web标准（因为在这种情况下，很难进行更改或完全放弃该标准），而仅用于对这些标准感兴趣的少数选定站点。 在撰写本文时，例如针对WebXR Device API的原始试用版已经可用，WebXR Device API是支持AR（增强现实）和VR（虚拟现实）的混合现实新标准。
结论
在过去的十年中，Web技术已经脱离了对Web 2.0和HTML5通用域的希望和期望的阶段（我想知道是否有人现在正在使用这些bizvord吗？）当Steve Jobs在2007年宣布“您不需要SDK。 您拥有了今天所需的一切（如果您知道如何使用最新的Web标准来编写应用程序）来编写出色的iPhone应用程序。”，到2010-2013沮丧的阶段，《连线》杂志2010年的克里斯·安德森说：“尽管我们喜欢开放的，无限制的网络，但我们拒绝使用它，而是希望使用更简单，更优雅的服务（本机应用程序）。”，马克·扎克伯格（Mark Zuckerberg）在2012年指出：“我们公司最大的错误是投注HTML5，而不是 活跃。”
但是最黑暗的夜晚发生在黎明之前，对于与本机应用程序竞争的Web技术而言，这样的黎明是与Progressive Web Apps相关的运动。 现在，在2018年，所有浏览器都已支持主要的PWA功能-脱机工作并在移动设备的开始屏幕上安装。 PWA随处可见，独立于应用程序商店，并提供接近本机的用户体验。 因此， Gartner预测 “ PWA将取代50％的通用用户应用程序。” 但是不要高估期望值，您几乎可以肯定地说PWA市场不会被100％占领。
现在，PWA具有竞争优势。 例如，PWA Twitter 已将每个会话查看的页面数增加了65％ 。 多亏了PWA，Lancome的转化率提高了17％ 。 OLX展示了更加令人印象深刻的结果，并将重新参与度提高了250％。 并且有很多这样的例子。 很快，PWA的可用性对于任何严肃的业务将仅是必要的，并且已经不存在将被视为一个重大缺点。
Sergey Pugachev，Google开发人员专家
PS。 该文章是作者的个人观点，可能与过去，现在或将来的雇主的观点不一致；）