How Progressive Web Apps work

Progressive web apps can hugely improve your performance. If you're internet goes down, you and your customers will still see your site instead of the Downasaur that Chrome shows you when you have no internet connection.

To see how it works open the Nuxt website and turn off your internet and you will see that you can still browse some of the pages. Of course not all of them, as to cache all the pages of the site would have a negative effect on performance. Anything that has previously been visited will be cached as well as the pages that have been prefetched.

The Service Workers

PWAs are made possible by the use of Service Workers that are working in the background of your application. Their job is to store what is needed for the first-time load of the app. This is done by caching some static assets which can of course speed up the performance of your web whether you are connected to the internet or not.

The Manifest File

The manifest file is a config file that contains your applications information such as the icon to be displayed, it's name, theme color and so much more. The Nuxt PWA module will set all this up for you and you can customize it further if you want to. You can easily see what has been setup by opening the Application tab of the Chrome Dev Tools.

Manifest file

The Icons

On of the requirements of a PWA is to have an icon which must be 512x512 pixels in size. This should be in the static folder of your Nuxt application. The icon is what will be shown to the user when they download your app to their mobile or desktop. Nuxt will automatically create the different sizes needed for the different devices. Again you can see this in the Application tab in the Chrome Dev Tools.

pwa icons

Installing your app

When browsing your apps website if a manifest file is found Chrome will trigger the web app install button so the user can install your application should they want to.

install app

Using the app

Once you have installed the application you can save it in the dock or even ask Siri to open your application for you, making it easer to find than opening the website in the browser. Once you close the app and open it again new content will be fetched so the PWA is always up to date.

PWA installed

Lighthouse Scores

And of course make sure you check your Lighthouse Score, which has changed in Lighthouse 7 (available in Chrome Canary), and now only includes 2 categories, Installable and PWA Optimised. Previously in Lighthouse 6 there were 3 categories.

The Fast and reliable category has now been removed due to the revamped installability requirements which now includes offline-capability checking and there are some other changes such as load-fast-enough-for-pwa audit which has been removed since Lighthouse's existing performance metrics more than cover the needs.

lighthouse pwa score

At the time of writing the only thing I had to add to the Nuxt PWA module to get full score was the theme colour as the default is undefined and Lighthouse requires it to be set. The theme colour can be set by adding it to the pwa.manifest.theme_color in your Nuxt config file.

nuxt.config.js
pwa: {
    manifest: {
      theme_color: '#091a28'
    }
  },

Check out some of my other posts:

...