How to tune up your Progressive Web App to get a perfect audit score

Ondrej Chrastina
Jun 18, 2018 · 6 min read
Image for post
Image for post

Progressive Web Apps (PWAs) quickly became the hottest development platform during the last year. Let’s take a look at what you need to do to adhere to the PWA standards.

Articles about the PWA concept are all over the place. I will focus on the actual steps that need to be done to have the PWA fully aligned to the specification. I will provide a GitHub link with the list of changes for each step I performed to allow you to easily try it yourself.

Prerequisites

I will start with that simple Angular application I used for showcasing the combination of Angular and PWA approach in my previous article. I have upgraded it to Angular v6 and Kentico Cloud SDK v4.

Image for post
Image for post
Upgrade changes

This application is a simple listing of interesting places stored in a headless CMS loaded by the SDK. The app already has these two perks that make it a PWA app:

  • manifest.json with a set of icons used when the app is installed in the system.
Image for post
Image for post

Although the app is ready to be installed and used, it still needs a few touches to meet the PWA specification.

How to get through the PWA checklist

To verify whether the app meets all the criteria defined by the Google checklist, one can use various tools these days. The most popular is called Lighthouse.

Image for post
Image for post
Google checklist

Lighthouse is already embedded into the Google Chrome browser developer tools on the audit tab. To run it, I recommend that you publish the production variant of the app on the internet, and perform the audit from there.

To achieve this, just download the app in the “initial state” and then run the following commands.

For deployment, I am using surge.You just have to register and install the CLI tools. Then, you're able to deploy the folder into a *.source.sh sub-domain.

Image for post
Image for post
Initial app state
  • npm install

Then, just navigate to the app in the Chrome browser. Go to “Developer Tools” > “Audits” > “Perform an audit” > select “Progressive Web App” > “Run audit”. You’ll see the following results.

Image for post
Image for post

As you could see, eight checks already passed.

Now, let’s inspect the PWA checklist.

PWA checklist

Fallback when no JavaScript is available

All you have to do to remove this message is to provide some message for non-JavaScript browsers. The noscript tag is an ideal way to do that. Just add the following HTML code to the body of index.html.

...
<noscript>
This page requires you to have the Javascript enabled.
</noscript>
...
Image for post
Image for post
Add no-script content

Address bar does not match brand colors

This warning tells you that you should specify the basic thematic color for the address bar. All you need is just an HTML meta tag in the head section of the page. I’ve chosen the same color that’s used for the top toolbar.

<html>
<head>
...
<meta name="theme-color" content="#1e88e5">
...
</head>
...
Image for post
Image for post
Add theme color meta tag
Image for post
Image for post

HTTP traffic is not automatically redirected to HTTPS

This is just about deployment configuration. To achieve automatic https enforcement just use “https://” before the domain you want to deploy the app to.

Now you are ready to perform the audit again.

Image for post
Image for post

Yippee!

You’ve passed all the automatic checks. Now, you might have noticed that there were manual steps outlined in the report:

  • Site works cross-browser

Bonus - quicker first load in Angular

Do you plan on making your app really big? Do you want it to render its app shell immediately while having all Angular components loaded in the background? In fact, with bigger apps, you might get a warning in the report saying that the first load takes too much time.

To make things fast, just add a static HTML code into the root Angular component file. This HTML will be shown during initialization. In the commit link below, you can see that I’ve also thrown in a few static styles to make things render in one go.

..
<app-root>
<header class="static" style="width: 100%;
height: 56px;
color: #fff;
background: #1e88e5;
position: fixed;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 2px 9px 1px rgba(0, 0, 0, .12), 0 4px 2px -2px rgba(0, 0, 0, .2);
padding-left: 16px;
margin: auto;
z-index: 10000;">
<h2 style="font-size: 20px;">Pack and Go</h2>
</header>
<main style="padding-top: 60px;
flex: 1;
overflow-x: hidden;
overflow-y: auto;"></main>
</app-root>
...

Below you can see the result when tested with the “Slow 3G” connection setting in place.

Image for post
Image for post
Image for post
Image for post
Add static app shell

Closing lines

All right, we’re done! If you strive for an ultra-modern PWA app built on top of a robust framework, now you have it.

The app runs on the latest version of Angular, and is backed by a fast and headless Kentico Cloud CMS. It meets all the requirements of the Lighthouse audit tool made by Google.

If you’re interested in seeing how to incorporate the Lighthouse checks into your continuous integration ecosystem, just reach out to me over Twitter!

freeCodeCamp.org

This is no longer updated.

Thanks to Jan Lenoch

Ondrej Chrastina

Written by

Traveler, tech enthusiast, and Developer Advocate at Kentico (Kentico EMS and Kentico Kontent).

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Ondrej Chrastina

Written by

Traveler, tech enthusiast, and Developer Advocate at Kentico (Kentico EMS and Kentico Kontent).

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store