對漸進式Web應用程序（PWA）的高級討論，它們變得流行的原因以及如何測試這些應用程序。
漸進式Web應用程序或PWA正在統治著科技世界。自從他們到達以來，幾乎每個應用程序都在朝著成為一個漸進的Web應用程序或計劃這樣做的方向發展 在我們之前關於 漸進式網絡應用程序的文章中，我解釋了漸進式網絡應用程序是什麼以及測試漸進式網絡應用程序的內容。
那麼，讓我們現在進入下一個級別。
在本博客中，我們將討論組織在將Web應用程序轉換為漸進式Web應用程序格式以及如何克服這些挑戰時所面臨的挑戰。
構建漸進式Web應用程序時使用哪種框架
當您計劃升級到PWA或構建PWA時，第一個讓您撓頭的問題是我應該使用什麼框架？Vue.js？何反應？Preact？或者是其他東西？
好吧，為了解決這個問題，我們對一些升級到PWA的公司進行了一些研究，以找出最常用的框架是什麼以及為什麼。
從我們的研究中，我們發現許多公司都使用了React，因此我們決定進一步深入研究它。我們分析了Garbarino和Twitter Lite等產品的案例研究，發現選擇React框架的主要原因是它的可用性，在線支持以及對遺留框架的熟悉程度。
此外，React還為您提供了以下優於其他框架的優勢：
- 由於Facebook管理和支持它，該框架每天由22億用戶進行嚴格測試。
- 作為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版本。所有你需要做的就是坐下來看看調試時的結果。
閱讀更多 愛碼農 的文章
