对渐进式Web应用程序（PWA）的高级讨论，它们变得流行的原因以及如何测试这些应用程序。

渐进式Web应用程序或PWA正在统治着科技世界。自从他们到达以来，几乎每个应用程序都在朝着成为一个渐进的Web应用程序或计划这样做的方向发展 在我们之前关于 渐进式网络应用程序的文章中，我解释了渐进式网络应用程序是什么以及测试渐进式网络应用程序的内容。

那么，让我们现在进入下一个级别。

在本博客中，我们将讨论组织在将Web应用程序转换为渐进式Web应用程序格式以及如何克服这些挑战时所面临的挑战。

构建渐进式Web应用程序时使用哪种框架

当您计划升级到PWA或构建PWA时，第一个让您挠头的问题是我应该使用什么框架？Vue.js？何反应？Preact？或者是其他东西？

好吧，为了解决这个问题，我们对一些升级到PWA的公司进行了一些研究，以找出最常用的框架是什么以及为什么。

从我们的研究中，我们发现许多公司都使用了React，因此我们决定进一步深入研究它。我们分析了Garbarino和Twitter Lite等产品的案例研究，发现选择React框架的主要原因是它的可用性，在线支持以及对遗留框架的熟悉程度。

此外，React还为您提供了以下优于其他框架的优势：

1. 由于Facebook管理和支持它，该框架每天由22亿用户进行严格测试。
2. 作为React Native的基础，React允许您轻松地将使用React构建的应用程序移植到本机应用程序。

尽管有更多的大公司使用React，但我们认为，所有上述框架都会让React面临激烈的竞争。最终，这取决于您的团队。您可以选择任何适合您要求的框架，这些框架对您组织中的人员非常方便。

单页应用程序还是多页面应用程序？

在开始构建PWA之前，您需要先构建一个应用程序。在这样做时，您的应用程序可以有两种选择。您可以使用SPA（单页应用程序），也可以开发MPA（多页应用程序）。

是的，我完全理解这里的脸部时刻。可能只有这两种类型的应用程序。

所以这里的主要问题是，哪种方法最好？那么，这取决于您通过构建PWA实现的目标。

单页面应用程序（SPA）是一个单页面应用程序，当您从中发送一些请求时，无需重新加载或重定向到新页面。它就像一个Gmail或Facebook应用程序。因此，如果您要从已经构建的应用程序迁移到PWA，因为您想要提高页面加载速度或与加载速度相关的其他因素，那么我建议您去SPA。一些使用SPA模型的PWA包括Twitter Lite，Housing Go，Flipkart Lite，Polymer Shop等。

但是，如果您想要在页面之间进行隔离和解耦等优点，则可以使用MPA。在构建移动网站时，它允许您将其不同的部分构建为“微服务”，这反过来允许您独立地迭代这些服务，在需要时将它们嵌入到第三方应用程序中，甚至可以由不同的团队维护。一个使用MPA模型建立其PWA的组织是Ele.me.

因此，您可以使用给定的信息来获取SPA或MPA。

在缓存App Shell时遇到问题？

构建PWA时，您的目标是为您的客户提供更快的性能。通过缓存应用程序外壳可以通过离线缓存页面来减少页面加载时间，从而确保多次访问时用户的性能更佳。

您可以使用静态资产预缓存工具（如sw-precache），也可以使用手动编写的服务工作人员来提示页面缓存。

手动缓存时，您可以使用以下代码：

var cacheName = 'shell-content';

var filesToCache = ['/css/styles.css', '/js/scripts.js', '/images/logo.svg', '/offline.html’, ' / ’, ];

self.addEventListener('install', function(e) {

console.log('[ServiceWorker] Install');

e.waitUntil(

caches.open(cacheName).then(function(cache) {

console.log('[ServiceWorker] Caching app shell');

return cache.addAll(filesToCache);

}));

});

根据Twitter Lite，在启用ServiceWorker预缓存后，它们从6秒加载时间改为不到1.5秒。这是75％的持平改善！

让我们进行AB测试！

AB 测试 可以帮助您监控PWA中的一些因素，例如转换率，跳出率，应用时间等。

所以你需要做测试，它需要数据。

数据，数据和大量数据。你听到了我并收集了大量的数据。但是为了监控你需要什么？你是如何监控的？你觉得这个问题很难回答吗？

如果不是，太好了！

如果是的话，不用担心！我们有一个答案给你。

以下是您在监控各种因素时可能遇到的一些困难：

• 分离谷歌分析。
• 衡量PWA内外的转换率，例如购物车和结账，就像电子商务PWA一样。
• 在实验的两侧都有相同的URL。
• 看过A的人应该看A，但最初看B的人应该看B.

对于前两个用例，您可以根据某些自定义维度在分析上配置新视图。必须通过PWA的代码并基于cookie直接填充维度。

对于最后两点，您所能做的就是将所有流量发送到PWA。在那里，随机抽奖决定你是否继续在那里，或者你是否会被重定向到移动网站。完成此操作后，您可以将此选项永久存储在Cookie中。

一旦解决了所有障碍并扣紧，即可发布应用程序的PWA版本。所有你需要做的就是坐下来看看调试时的结果。