Planning To Move Your App To A PWA: All You Need To Know

Deeksha Agarwal

Posted On: April 10, 2018

22008 Views

7 Min Read

Home
>
Blog
>
Planning To Move Your App To A PWA: All You Need To Know

Progressive Web Apps or PWAs are ruling the tech world. Since their arrival almost every application is moving towards progressive web app or is planning to do so. In our previous blog on progressive web app, I have explained you what a progressive web app is and what goes into testing a progressive web app.

So, let’s move to the next level now.

In this blog, we will find out what are the challenges that organizations face while moving their web application to progressive web application and how can these challenges be overcome?

TABLE OF CONTENTS

Which Framework To Use While Building A Progressive Web App?
Single Page Application or Multi Page Application?
Having Problem While Caching App Shell?
Let’s AB Test!

Which Framework To Use While Building A Progressive Web App?

When you plan to upgrade to a PWA or to build a PWA, the first question that makes you scratch your head is what framework should I use? Vuejs? React? Preact? Or some other?

PWA frameworks

Well to figure this out, we did a bit of research on some companies that have upgraded to a PWA to find out what is the mostly used framework and why.

From our research we figured out that many of the companies used React so we decided to further dig into it. We analyzed case studies of products like Garbarino and Twitter Lite, and found that the main reason for choosing React framework is it’s usability, online support, and familiarity with legacy frameworks.

Moreover React also provides you with the following advantages over the other frameworks.

Since facebook manages and supports it so it demonstrated that this framework is rigorously tested by 2.2 billion users daily.
Being the foundation for React Native, React lets you port applications built with React to native apps easily.

Even though there are more big firms using React, in our view, all of the above mentioned frameworks give a close competition to React. Ultimately it’s up to your team. You can choose any of the frameworks which suits your requirements and is handy to the people in your organization.

Single Page Application or Multi Page Application?

Before you go on for building a PWA, you need to build an application first. While doing so, there are two options for what your application can be. You can go with a SPA ( Single page application ) or you can develop a MPA ( Multiple Page Application ).

Yeah, I totally understand the face-palm moment here. There can be only these two type of apps 😛

SPA or MPA in a PWA

So the main confusion here is, which is the best approach? Well, that depends upon the objective you are trying to achieve by building a PWA.

Single page application, or SPA is an application that works as a single page and don’t need to reload or redirect to a new page when you send some request from it. It’s like a Gmail or Facebook app. So, if you’re migrating from your already built application to a PWA because you want to increase your page loading speed or other factor related to loading speed, then I would suggest you to go for a SPA. Some PWAs that use a SPA model includes Twitter Lite, Housing Go, Flipkart Lite, Polymer Shop, etc.

However if you want to refactor advantages of MPA like isolation and decoupling between pages, you can go for a MPA. While building a mobile site, it allows you to build its different parts as ‘microservices’ which in turn allows you to iterate these services independently, embed them into 3rd party apps if needed, and can even be maintained by different teams. One such example that used MPA model to build their PWA is Ele.me.

So, you can use the given information to go for SPA or MPA.

Having Problem While Caching App Shell?

When building a PWA, you aim to deliver faster performance to your clients. Caching the app shell helps you reduce your page load time by caching the pages offline to ensure better performance to users on multiple visits.

You can use a static asset precaching tool like sw-precache or you can prompt caching of pages using manually written service worker.

When caching manually you can take help of the following code:

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);
    })
  );
});

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);

})

);

});

As per Twitter Lite, after enabling ServiceWorker pre-caching they improved from 6 seconds load time to less than 1.5 seconds. That’s a flat 75% improvement!

Let’s AB Test!

AB testing comes as an aid in case you want to monitor some of the factors in your PWA like conversion rate, bounce rate, time on app, etc.

AB-Testing

So you need to do testing and it requires data.

Data, data, and lots of data. You heard me and collected an ample amount of data. But what you need to monitor? How would you monitor? Doesn’t you find this question difficult to answer?

If no, Great!

If yes, then again great 😉 We have answer for you. No worries.

Here are some of the difficulties that you might face while monitoring the various factors:

Separating google analytics
Measure conversion rate in and out of PWA like cart and checkout in case on e-commerce PWAs
Having same URLs on both the sides of the experiment
People who saw A should see A but those who saw B at first should see B.

For the first two use cases, you can configure a new view on Analytics based on some custom dimension. The dimension must be populated directly on PWA’s code and based on a cookie.

For the last two points, all you can do is to send all the traffic to the PWA. There, a random draw decides if you continue there or if you will be redirected to the mobile site. Once you are done with this, you can store this choice in a cookie ‘forever’ if anyone sees the PWA and if he/she sees the mobile site, in that case for some time like a day. This will help you to know the user came to know towards the final checkout from which version?

Once you solve all the hurdles and buckle up to release a PWA version of your application. All you need to sit back and see the results while debugging some on the spot unwanted bugs. Well, bugs are always unwanted ;).

Testing A PWA With LambdaTest

So, you have done developing and solved all the issues that you faced. Now it’s time to test your PWA. So how can you test it?

LambdaTest can help you test your PWA.

Check out how LambdaTest can help you test your PWA in this blog post.

Before you go, let’s have a look what some of the statistics by companies using progressive web apps.

Trivago

saw increase of 150% for people who add its PWA to home screen
97% increase in clicks
67% people continued to browser site after coming online from the point where they went offline