这是一个由3部分组成的系列的第2部分，自从Facebook发布以来，它在过去的四年里变得越来越流行，也越来越成熟。对于那些希望将任何web应用程序的前端组件化的人来说，它已经成为人们的首选技术之一。它还有助于整个移动堆栈以React native的形式构建。这些组成部分很好，但是也可能有一个繁重的学习曲线。但是，最终的回报是高度可重用的代码和更好的用户经验。到Cloudinary提供了一套完整的React组件，可以快速配置并放入应用程序中，帮助人们将React应用程序注入图像和视频管理服务。你的应用程序已经具备了对媒体资产的管理和操作功能，并通过CDN交付它们，而且你已经有了一个React应用程序将内容交付给最终用户。现在，您可能希望提高性能并使您的最终用户体验更好。要做到这一点，你需要遵循React Progressive Web Apps的原则。什么是渐进式网络应用？有很多资源可以让你了解更多，包括我们最近写的一篇关于为什么你应该关心的文章。但是如何将其引入到已经很复杂的React应用程序堆栈中呢？我们一步一步给你看-step。你呢'有了你的应用程序，它正在使用Cloudinary React组件。可能看起来有点像https://github.com/ukmadlz/cloudinary-pwa-react/releases/tag/basic-media-app。那么，你需要采取什么措施使它成为一个反应迅速的网络应用程序呢？网络研讨会第1步：安全您的应用程序安全吗？将应用程序转换为渐进式Web应用程序所需的所有功能只能从通过HTTPS提供的连接中使用。如果您还没有这样做，您可以找到使用CloudFlare等服务在应用程序前面快速实现HTTPS缓存的指南。在开发时，localhost和127.0.0.1被认为是安全可靠的端点，因此您可以不使用证书进行开发本地。步骤2： 发现您的应用程序是否可发现？使web应用成为渐进式web应用的一部分是引入web清单。这个JSON文件描述了应用程序和资产，以便在不同的设备上更容易使用。为了在Android上实现渐进式的Web应用程序，它可以帮助实现应用程序名称、描述、启动页面、chromeshell包装器和主屏幕图标。那个最基本的web清单如下所示：{"name"："捐赠App"，"description"："此应用程序帮助您为有价值的事业捐款。"，"图标"：[{"src"："图像/图标.png","尺寸"："192x192"}]}查看原始基本-清单.json托管❤ 通过GitHub它通知浏览器首选图标，类似于favicon的工作方式，并给出应用程序本身的名称和简要描述。每个浏览器使用这些信息的方式不同，从帮助内部历史搜索到为"最近访问过"的文章提供更丰富的信息。但所有这些都是为了使应用程序更容易发现，或者在大多数情况下，可以快速重新发现。一个更高级的文件，如我们在演示应用程序中使用的文件，更进一步，帮助浏览器解释应用程序。这个文件描述了应用程序变得可发现的基本要素，以及使浏览器更容易显示内容并使其作为接近本机应用程序的正确行为的元数据。要使此清单对浏览器可见，您需要将以下标记添加到页面的：查看原始头部-标签.html托管❤ 通过GitHub这些元标记告诉浏览器（1）在哪里可以找到清单，（2）显示的设置，以及（3）应用程序的主题颜色。它这样做是为了让它在移动设备上被发现并正确显示设备。步骤3： 离线应用程序离线工作吗？应用程序的下一个最重要的部分是确保它脱机工作（否则，根据定义，它不是一个渐进式的Web应用程序）。这样做的方法是注册一个服务工作线程，它将在后台运行，并处理来自缓存的信息，以及当它具有网络连接时来自internet的信息。由于并非所有流行的浏览器都符合ServiceWorker规范，因此需要进行一些特性检测。//添加服务工作人员if（navigator中的"服务工人"）{navigator.serviceWorker.register('./软件js'，{scope:'./'}）.then（函数（reg）{如果(注册安装) {控制台.log（"安装工人"）；}否则如果(注册等待) {控制台.log（"已安装服务工人"）；}否则如果(注册有效) {控制台.log（"服务工人活跃"）；}}).catch（函数（错误）{//注册失败控制台.log（'Registration failed with'+错误）；});}查看原始服务人员-注册.js托管❤ 通过GitHub此代码段检查服务工作线程是否是navigator对象的一部分，并且只有当它可用时，它才会尝试注册位于软件js给了它一个相对于./的作用域。如果成功，它将创建软件js并将在服务工作者中执行事件代码。我们在此应用中使用的完整服务人员可以在此处找到。文件由三个关键事件触发：安装事件：在服务工作线程首次注册时生成缓存，然后继续保存我们希望从一开始保存的所有URL。var cacheNameStatic='cloudinary-pwa-react-v1'；var currentCacheNames=[cacheNameStatic]；变量cachedUrls=[//第三方CDN'https://unpkg.com/babel-core@5.8.38/browser.min.js','https://unpkg.com/lodash@4.17.4/lodash.js','https://unpkg.com/react@15.3.1/dist/react.min.js','https://unpkg.com/react-dom@15.3.1/dist/react-内存最小js','https://unpkg.com/react-router-dom/umd/react-router-dom.min.js','https://unpkg.com/cloudinary-core@2.3.0/cloudinary-核心.js','https://unpkg.com/cloudinary-react@1.0.3/dist/cloudinary-react.js公司','https://unpkg.com/axios/dist/axios.min.js','https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialie.min.css',//当地资产'/样式表',//假API'/图像.json'];//已注册新的服务人员self.addEventListener（"安装"，功能（事件）{事件.等待直到(缓存.删除（cacheNameStatic）。然后（function（）{返回缓存.打开（cacheNameStatic）；}).then（函数（缓存）{返回缓存.addAll（储藏室）；}).catch（功能（e）{}));});查看原始服务工作人员安装-任务.js托管❤ 通过GitHub激活事件：在浏览器调用服务工作人员时运行，例如启动新的浏览器会话时。它执行常规清理以防止缓存增长过大，并删除不再注册使用的所有缓存。//新的ServiceWorker现在处于活动状态self.addEventListener（"激活"，功能（事件）{事件.等待直到(缓存.keys().then（函数（缓存名）{返回答应。全部(cacheNames.map（函数（cacheName）{如果(currentCacheNames.indexOf（缓存名称）===-1）{返回缓存.删除（缓存名）；}}));