转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，为开发者赋能。如果您是Web开发人员，您可能已经了解渐进式Web应用程序(PWA)或已经实现了自己的应用程序。如果您不熟悉，本文深入概述了渐进式Web应用程序的工作原理，以及它们对现代Web开发的重要性。自推出以来，渐进式Web应用程序被定义为响应迅速、可独立连接、类APP轻量级、安全、模块化、高度可定制、免安装和开箱即用的Web体验。这是一个冗长的描述，如果你能用一句话简单概括的话：我认为PWA只是一个具有良好用户体验的Web应用程序，仅此而已。为了更清楚地理解这个定义，让我们探讨一下它的核心原则。在此之前你可能已经熟悉其中的一些，但我向你保证，不是全部。ProgressiveWebApplications的原则Responsive（响应式）Connectivity-independent（独立连接）App-like（应用风格）Fresh（不断更新）Safe（安全）Discoverable（可发现）Re-engageable（可重用）Installable（可用）Install）Linkable（linkable)Responsive（响应式）对于网络开发人员来说，这意味着应用程序中显示的元素可以在不同的屏幕尺寸上自行缩放以适应屏幕尺寸。对于设计者来说，这意味着更高的性能，比如应用程序是否能快速响应用户交互、事件、页面加载等。构建高性能应用程序是产品的核心竞争力，渐进式Web应用程序自然遵循这一规律，尤其是对于网络开发人员。响应式Web应用在任何设备上都具有同样良好的适应性，无论屏幕是宽的、窄的、短的，甚至是弯曲的，应用布局都会自适应以满足最佳的用户体验。连接无关（connection-independent）既然我们说的是web应用，那么在应用生命周期的某个时刻肯定会有网络连接，尤其是当应用第一次被访问的时候。当网络不可用或速度太慢时，应用程序不应影响用户体验，即不应向用户显示空白页面或400错误，这在PWA出现之前很难做到，但PWA使用浏览器的存储机制使这成为可能。App-like（app'sstyle）我认为“nativeapp-like”是描述这一原则的最佳方式，即本地化的应用程序看起来和感觉就像是为使用外部设备而制作的，有些应用程序是专门为Builtonplatforms设计的与iOS或Android一样，网络应用无法提供相同的体验，尤其是在移动设备上。PWA是不同的。渐进式Web应用程序旨在在所有设备上提供类似的体验。用户可以从手机切换到笔记本电脑，并在类似的UI下轻松完成相同的任务。新鲜（持续更新）我喜欢称之为A.F.A.P——应用程序中的数据应该尽可能新鲜。如果新数据可用且与客户端相关，则需要使用最新数据更新应用程序。管理网络请求和浏览器存储对于提供出色的用户体验和使客户端内容保持最新至关重要。安全（safetyfirst）安全第一！如果不能保证数据的安全，应用程序有什么用？市场上的大多数Web应用程序都包含客户敏感信息，这些信息只应为通信方所知。因此，有必要保护应用程序中的私有数据。PWA采用了一种简单但有效的方法：使用HTTPS协议为网络流量增加一层安全保护。Discoverable（可发现的）App应该很容易在web/appstore上找到，这就是appdiscoverability。如果搜索引擎找不到应用程序，它将如何找到潜在用户？应用程序搜索清单可以提供帮助。它在识别浏览器的应用程序方面起着重要作用，并包含有关应用程序的信息，即名称、作者和描述。AppSearchInventory还有助于识别安装在其设备上的PWA。Re-engageable(Reusable)可重复使用的应用程序可以发送推送通知来拉回用户。目的是让用户知道该应用程序引入了一些他们可能感兴趣的更新。我们已经习惯了智能手机和本机移动应用程序，但浏览器也通过推送和通知API支持这一点。可安装（installable）的渐进式网络应用程序可以直接安装到移动设备的主屏幕上。这主要是一个移动浏览器功能，使用Chrome，您也可以在桌面上执行此操作。iOSSafari也支持这个功能，所以如果你有iPhone，可以加入PWA阵营。安装网络应用程序真的很酷，您不需要通过AppStore或GooglePlayStore等市场下载应用程序。只需访问该网站，单击“添加到主屏幕”选项，该应用程序就会立即出现在您的主屏幕上。可链接（Linkable）可链接的网络应用程序是可共享的，因此托管在专用域上的应用程序不适合。您只需要一个URL。创建渐进式Web应用程序上述原则在实践中如何运作？与标准Web应用程序相比，创建PWA只需要三个基本要求：通过HTTPS为Web应用程序提供服务添加应用程序清单文件使用服务器HTTPS是现代Web应用程序的基本协议，渐进式Web应用程序也不例外。应用程序清单是一个JSON文件，其中包含有关应用程序的元数据。它只提供基本信息。在Android应用程序中，清单文件要复杂得多，并且可能需要在整个应用程序开发过程中进行更改。Web应用程序清单涉及较少，并且在创建后不需要经常更新，因为它们不包含配置参数或依赖项。创建ProgressiveWebApp的最后一步是添加服务器。神奇的地方在于它可以离线使用。对于PWA，服务器只是另一个JavaScript文件——一个非常强大的JavaScript文件。它实际上在浏览器中的一个单独线程上运行，因此在服务工作者线程上执行不会中断主应用程序线程。这使开发人员可以灵活地通过并发创建更好的用户体验。服务器可以处理网络请求/响应和缓存。从主线程中删除这项工作将应用程序逻辑与数据管理和网络相关操作分开。如您所见，这里的大多数渐进式应用程序都涉及服务器实现。但在实施之前，必须考虑应用程序的架构。PWA应用程序结构应用程序外壳是一个描述应用程序基础结构的概念。它包含您的应用程序运行所需的所有静态文件。在Web开发的上下文中，这将包括HTML、CSS、JavaScript和图像文件。内容是可以在应用程序的整个生命周期内更改的数据。它被排除在应用程序外壳之外，因为它是动态的，并且在加载应用程序时可能会过时。通常通过API服务暴露出来，方便查询。此内容需要在应用程序内进行管理，以确保根据请求提供最新的内容。服务器承担此责任。当第一次加载应用程序时，应缓存应用程序外壳文件，以便应用程序可以在没有网络连接的情况下运行。一个好的PWA将避免显示此屏幕：??当页面未加载时，用户将完全退出应用程序。显然，与网络相关的问题会影响用户体验，但不应让用户远离该应用程序。这个想法类似于原生体验，其中PWA允许用户与应用程序互动，即使应用程序中显示的是空白屏幕。为了在网络缓慢时保持用户参与，您可以使用动画或提供具有视觉反馈的客户端交互，就像带有小拼图或3D交互模型的刷新按钮一样简单。要有创意！使用应用程序外壳模型的一个缺点是它的性能。它确实减慢了初始加载时间；但是，这可以改进。为了减少加载应用程序的shell文件所需的时间，您可以尝试缩小代码（以减小文件大小）、捆绑文件（以最小化网络请求的数量）、删除未使用的代码。您可以在需要时将此删除的代码发送给客户端。这将根据要求而有所不同。这里描述的架构很常见。如果您为其他平台开发过应用程序，您可能会认出类似的设计结构。例如，需要访问网络的移动应用程序遵循类似的方法与服务器通信。通常有一些工厂类处理网络请求和响应。Factory类提供了一个抽象层，如果异步生成则效果最佳。应用程序逻辑不必等待请求。它可以允许用户继续并在请求完成时通知他们，并且可以通过分离数据访问实用程序和UI逻辑来简化测试。使用AppShell模型是一个很好的起点，但这不是渐进式Web应用程序的要求。如果您有一个现有的应用程序，您可以评估应用程序的哪些部分使用最多并优化初始负载。如果95%的用户群只使用25%的应用程序，那么只下载和缓存25%的应用程序（最常用的应用程序）可能最有意义。用户可以根据需要选择下载和缓存其他部分，这完全取决于用户如何与您的应用程序交互。服务请求服务请求的实现因应用程序而异，但是当您开始在应用程序中使用它们时，您应该了解一些事情。早些时候，我提到过服务请求在浏览器的不同线程上运行。这意味着它具有管理生命周期的能力，就像您的应用程序一样。以下是主要的服务器生命周期事件：1.注册当应用程序首次加载到浏览器中时，将发生此请求。这并不是真正的ServiceWorker事件，因为此时浏览器上下文中不存在该服务，但这是重要的一步。应用程序的主要JavaScript文件应检查浏览器是否支持ServiceWorkerAPI，如果支持，则注册服务请求。注册成功后，将下载服务文件，然后开始安装。if('serviceWorker'innavigator){navigator.serviceWorker.register('./service-worker.js');这段代码在浏览器中注册服务请求（如果支持的话）。下一个事件将在serviceworker文件中处理。2.InstallInstall事件是服务器可以自行处理的第一个事件。它在注册/下载后立即启动。完成安装后，开始缓存静态资产是个好主意，因为安装事件只发生一次。self.addEventListener('install',function(e){e.waitUntil(//waitUntil()fromExtendableEventcaches.open(cacheName).then(function(cache){console.log('[ServiceWorker]缓存应用外壳');返回cache.addAll(filesToCache);}));});waitUntil()方法将在安装事件完成后开始履行承诺。3.激活activate事件表示服务器已经安装。激活完成后，服务器将控制主应用程序。它还将在服务变为“实时”时检查缓存的资源，并在数据过时时更新数据。这可能需要额外的网络请求来进行比较，但这应该不是问题，因为应用程序不会受到请求执行的影响。服务器还能够在其处于活动状态时对功能事件执行操作，例如Fetch、Push和Message。注意：服务请求一旦被注册和安装，它将一直存在于浏览器中，直到用户将其删除。当用户关闭应用程序时，该文件不会自动删除，浏览器将每24小时下载一次配置文件，以避免错误/陈旧代码。4.Fetch每当调用来自主应用程序的网络请求时，都会触发Fetch事件。发生这种情况时，服务器负责处理请求。如果请求的信息已经被缓存，服务器可以返回该信息并完全绕过网络。或者它仍然可以发送请求，将响应与缓存信息进行比较，并在必要时更新它。最后，选择最适合您的用户的策略。Push和Message事件也是服务器在活动时监听的事件。它们可用于实现推送通知和同步发送的数据。如您所见，服务器是大部分工作的核心，也是保持Web应用程序不断发展的重要组成部分。它为您的应用程序提供网络代理和存储管理服务，是改善网络应用程序用户体验的绝佳工具。构建渐进式Web应用程序尝试构建PWA。如果您已经有一个Web应用程序，则很容易上手。我们目前正在撰写一篇文章，描述如何使用前端开发工具包WijmoJS构建PWA。同时，这是如何将现有应用程序迁移到渐进式标准的最佳示例。WijmoJS|下载试用版快如闪电，触摸优先。纯前端控件集WijmoJS，为您的企业应用提供更灵活的操作体验。全球率先支持AngularJS，并提供FlexGrid、财务图表等多种控件，性能卓越，零依赖，为您提供易用易操作的体验，充分满足开发需求。
