The Definitive Checklist for PWAs

Abhinav Girdhar
By Abhinav Girdhar | Last Updated on February 16th, 2022 10:45 am
app software

App Builder Appy Pie: Since iPhone was launched in 2007, developers have really been going all the way they can in order to develop and implement pure web based apps for mobile phone devices. However, in the past couple of years though, things seem to finally be moving in the right direction.

Progressive Web Apps or PWAs are pure web-based applications that behave and feel like native apps. These can be added as icons to the home screens or app trays. They open in full screen without the browser and offer the same experience as that of a native app, and even generates notification! What’s not to love?

Apart from all these similarities with the native mobile apps, progressive web apps have certain discerning advantages as well. They take little to no space on your mobile device, they are faster, and do away with the tedious process of getting updates and releases in order to change a feature or tweak the look and feel of your app. In addition to all this, they can work offline too!

Are you excited about Progressive Web Apps now? Ok, let’s give you more! PWAs are web applications that are built with the intent to offer an app like experience to the user and have all the modern web capabilities all packed in one. This technology has made it possible to pack all the app like functionalities straight from the browser and would save you from the pain of searching, downloading, and updating which is the hassle when you use a native app on your mobile device.

Though we have talked a lot about the progressive web apps in the past and have discussed at length about how great they can be for your business. Here, we are going to be talking about the testing checklist that you should have at your hand right before you decide to launch your brand new PWA!

The checklist for testing your PWA –

1. Is the site being served over HTTPS?

Safety today is one of the biggest concerns in a progressive web app, and it is for this reason that you would need to make sure that your web application be served only over HTTPS.

How to Test?

You can test whether your website is being served over HTTPS or not, by using any of the following tools including Lighthouse by Google Developer, jitbit, seositecheckup, digicert, ssl chopper, ssl labs etc.

To Fix

In case you figure out that the website or your Progressive Web App is not being served over HTTPS, you need to implement HTTPS.

2. Are the web pages responsive?

You must make sure that your progressive web app is responsive across all mobile and desktop devices which includes laptops, computers, smartphones, tablets etc.

How to Test?

You can test this aspect by using Lighthouse to verify that your design is mobile-friendly, but you can also manually check it out.

To Fix

If the results indicate that the web pages on your web app are not responsive, you need to work on implementing a responsive design or the other way is to adaptively serve a viewport-friendly site.

3. Is offline loading working?

When you are building your progressive web app, either all of your web pages or at least on some of them work even when your app is offline. This means that when you carry out the testing you need to ensure that your web app responds with a 200 at the time when it is offline.

How to test?

You need to load various pages in the PWA while keeping the airplane mode on. Once the airplane mode is on, make sure that app showcases at least some content even when the app is offline. You can use Lighthouse to verify that the start URL responds with a 200 when offline.

To Fix

Use a Service Worker

4. Is it compatible across browsers?

create apps for free

When you have a progressive web app of your own, you need to test it for cross browser compatibility to make sure that your web app gives a flawlessly smooth user experience to all the users irrespective of the browser that they are going to use.

How to Test?

To test the compatibility of your progressive web app across different browsers, you would need to try and open it in Chrome, Edge, Firefox, and Safari.

To Fix

You would have to handle each one of the issues as and when they pop up and the fix would differ for each of them.

5. Is Metadata for ‘Add to Homescreen’ available?

While testing the progressive web app you have developed, it is important that you test whether the web app provides a metadata for ‘Add to Homescreen’.

How to Test?

This can be done by using Lighthouse and verifying that ‘User can be prompted to Add to Homescreen’ is all set to Yes!

To Fix

If run into problem with this, you can simply add a Web App Manifest file to your project.

6. Are the page transitions smooth?

The page transitions are most important to the perceived performance of the web app, hence they should never feel snappy when you navigate through it, not even when the internet connection is slow.

How to Test?

This testing should be carried out manually on a slow network particularly. Try clicking on different buttons or links, and see that it responds immediately either by transitioning smoothly to another screen and should also show a placeholder loading screen or have a loading indicator till the app waits for some response.

To Fix

In case it is a client rendered single page app, you should work to transition the user immediately to the next page and then show them a skeleton screen and make use of any content including the title or thumbnail that is already available while waiting for the content to load.

7. Does each page have a URL?

Each and every page on the web app must have a URL and that all those URLs are unique.

How to Test?

You must make sure that individual pages are deep linkable through the URLs and that each of the URLs are unique so that they can later be shared easily on the social media by testing whether individual pages can be opened and directly accessed through new browser windows.

To Fix

In case you are building a single-page app, make sure that the client-side router has the ability to re-construct app state from a given URL.

8. Is the content shareable?

how to make my own app

All the content on your web app must be easy to share even through the full screen mode and it should also form cards for all the social media platforms.

How to Test?

This test needs to be conducted manually by sharing the content within your app through the full screen mode. Test for the cards can be done in the following ways:

  • Facebook – Debug the URL by entering the post to be shared and verifying if cards have been generated or not.
  • Twitter – Check whether a suitable type of card for your content is added to the given HTML’s HEAD of the page

To Fix

You can sort this out by providing social share buttons or a generic share button within your User Experience. If you are putting a generic button, you can make a provision to directly copy the URL to the user’s clipboard automatically when tapped, and then offer them options of different social networks to share to. You can even try out the new Web Share API to incorporate the native sharing system on Android.

9. Is Metadata available whenever needed?

The web app you make should be able to create a rich card for you (if applicable). Doing this can help improve the appearance of your website or the web app by different search engines.

How to Test?

In order to test this one out, you can use Google’s Structured data to make sure whether image, description, title, etc. are available.

To Fix

You can fix this up if you Markup the content. For example:

10. Are Push notifications available?

If push notifications are needed for your web app, make sure that they are not overly aggressive. Though the push notifications are not a requirement if you want an exemplary web app, but do implement them, if it makes sense.

If you are including Push Notifications in your web app make sure that you provide context to the user about how the notifications are going to be used.

How to Test?

To test this out, you would have to visit the site or the web app and find the push notifications opt-in flow. Here, when the browser shows you the permission request you must check whether it provides some context explaining what the permission is for. When the site is requesting for permission on page load, make sure that the context is clear regarding the reason why the user must enable the push notifications.

To Fix

Create a notifications permissions flow that is user friendly and provides clarity.

You must make sure that the User Interface encourages the users to turn on the Push Notifications and does not become overly aggressive.

How to Test?

Go to the web app and find opt in flow for the push notifications. Here you need to check and make sure that in case you dismiss push notifications, the site or the web app does not re-prompt in the same manner in the same session.

To Fix

When you are designing the opt in flow, make sure that when the users say they don’t want a particular kind of notification they do not re-prompt for at least a few days.

The next thing to test for is whether the site dims down the screen at the time when the permission request comes up.

How to Test?

Go to the opt in flow for the push notifications on your web app or the site. When the browser is displaying the permission request, make sure that the page is dimming down the rest of the content on the site which is not relevant to the permission request by placing a dark overlay on it.

To Fix

Dim the screen at the time of calling Notification.requestPermission. However, remember to undim it after resolution of promise.

Test must be carried out to ensure that the push notifications are delivered in a timely, precise manner and that they are relevant to the user.

How to Test?

Enable the push notification from the site and make sure that the use cases for which the push notifications are being used fit the criteria below:

  • Timed perfectly – a push notification must reach the user at the exact time when they want it and when it matters to them the most.
  • Precise – a push notification must have the specific information that can be acted upon at the very instant.
  • Relevant – a push notification must be about people or about topics that the user would be interested in.

To Fix

In case it comes to your notice that the content in your push notification is not timely, precise, or relevant to the user, you can send the same through an email instead for better effect.

One of the most important things to test here is that whether the user has control on enabling and disabling the push notifications from your site or web app.

How to Test?

Go to the site and enable the push notifications from the site. Now it is important that you have a place on the site or the web app where user can go and manage the push notification permissions and disable or enable them at will.

To Fix

Build a UI that would let the users easily manage their notifications so that they can choose to turn them on or off as needed.

11. Is the First load fast (even on 3G)?

Speed is one of the biggest advantages that are advertised to people when they create or use a progressive web app. Hence, it is of prime importance to test your web apps and check the first load on 3G connections.

How to Test?

This can be done by using Lighthouse on a Nexus % or something comparable to verify the time to interactive < 10s for the first visit on a simulated 3G network.

To Fix

There are a whole lot of ways in which the performance of the first load speed of your web app can be enhanced. However, first you would have to understand the performance of your site a little better and for that you can make use of tools like Pagespeed Insights and SpeedIndex on WebPageTest.

One thing that you can do is to focus on loading less script, ensure that the maximum amount of script is loaded asynchronously through <script async>, and ensure that the render blocking CSS is marked suitably. Apart from this, you can also try your hand at using the PRPL pattern and at tools like PageSpeed Module on the server.

What’s next?

Now that you are done testing your web app you would have, at your hands the results that would declare whether your app is truly progressive or not. If the results indicate a “No” then you must go back on begin working on it. If the indication is a “Yes” then simply sit nack and watch the conversion rise up and see the magic of PWA for your website.

Did we miss out on something else that needs to be tested here? Let us know, we’d love to hear from you!

Abhinav Girdhar

Founder and CEO of Appy Pie

App Builder

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts