Make ExtremeSetup a PWA part 2


Published 1 year ago

This is the second part of the Make ExtremeSetup a Progressive Web App series. Check the first part here if you missed it where we prepared extremesetup.com for a PWA implementation. In this part, we are going to actually transform our website into a PWA.

The first step was creating a so-called web app manifest file. This is a JSON file which controls how our application looks and behave. This file will give visitors of our application the possibility to add it to the home screen, define how the user can launch the PWA and define its appearance at launch. Basically, it's a config which controls what the user sees when launching from the home screen. We named it manifest.json as this is the recommended name but you can name it whatever you want. Save it in the root of your website. Now our manifest looks like follows:


{
  "short_name": "ExtremeSetup",
  "name": "ExtremeSetup Application",
  "background_color": "#642B73",
"theme_color": "#C6426E", "display": "standalone", "icons": [{ "src": "assets/img/touch/icon-128x128.png", "type": "image/png", "sizes": "128x128" }, { "src": "assets/img/touch/apple-touch-icon.png", "type": "image/png", "sizes": "152x152" }, { "src": "assets/img/touch/ms-touch-icon-144x144-precomposed.png", "type": "image/png", "sizes": "144x144" }, { "src": "assets/img/touch/chrome-touch-icon-192x192.png", "type": "image/png", "sizes": "192x192" }], "start_url": "/?utm_source=homescreen" }

To inform the browser about our manifest file we should include the next meta tag:


 <link rel="manifest" href="/manifest.json">

Also in meta, we can set theme color which tells the browser what color the UI elements should look like. Example:


 <meta name="theme-color" content="#C6426E">

Now let's analyze the manifest file. It contains config like:

short_name - for main application name, it appears on home screen for example.

name - for use on the splash screen and web app install banner.

background_color - used as the background color for the splash screen.

theme_color - used to style browser UI elements

display - use standalone if you want your app to look like a native app, without browser URL bar and other browser elements

orientation - I didn't include it because I want to let users rotate their devices.

icons - is a set of icons of different sizes to be used throughout the application and device OS.

start_url - will be the page the user will see when they start the PWA. It's also useful to set additional params for analytics.

 

We can test our manifest using Google Chrome Developer Tools:

Extreme Setup PWA test with Google Chrome Developer Tools

 

Now let's test the first version of our PWA with the actual phone. I tested it with Android 5.0.1 and Google Chrome.

ExtremeSetup PWA Live Test

With the progress that we did, we need to go manually to settings and select add to the home screen in order to create an icon on the home screen of the phone. In future articles, we will implement so-called App Install Banner which allows us to prompt automatically user to add our app icon to the screen. The result is as follows:

ExtremeSetup Live test

You can see our icon on the home screen. After launching it we will see the splash screen, the one we configured in the manifest. And at the end, we see our PWA without browser UI which is giving a native app feeling.

There is still more to be done but we already have good results I would say. There is a tool made by Google called Lighthouse which helps developers to test their web apps and PWAs and get reports of what should be improved. This tool helps us see the progress we've made transforming ExtremeSetup into a PWA. It is a Chrome Extension and we run a test against extremesetup.com with what we did at the moment of writing. You can see the results below:

 ExtremeSetup on Lighthouse

As you can see apart from PWA we are doing well so far. Now with the efforts, we've made so far we achieved for PWA a quite good score = 73. The remaining points go to Service workers which are a topic of the next article. So stay tuned for more PWA stuff.