Progressive Web App Compatibility — Part #11 of 11

This is the final post for Movies store, Vue & Vuex E-commerce app tutorial series created by appbase.io. The final result of following this series is your own feature-rich, scalable movies store built with Vue and Vuex!

In this tutorial, we’re going to make our Vue app compatible with the PWA standards to get a 100% lighthouse score from Google dev tools.

Table of Contents

1. Getting Started with Vue and Nuxt.JS

2. Basics of Vue

3. Home Page + Layout + CSS-in-JS (Emotion.JS)

4. Basics of VueX

5. Appbase.io + ReactiveSearch UI Components

6. Building The Search Page

7. Authentication with Auth0

8. Product Page + Checkout Page + Payment with Stripe

9. Analytics with Appbase.io

10. A. Deploying the Nuxt App with Heroku

10. B. Deploying the Nuxt App with Vercel

11. PWA (Progressive Web App) compatibility (→ You’re here!)

Introduction

Progressive web apps are the next generation of applications which are really fast, reliable and engaging. They are cross-browser, cross-platform & have a native app feel on mobile devices.

Any web application can be converted to a PWA by following a checklist of features. Let’s focus on the capabilities, a web application must have to be considered a Progressive Web app. Lighthouse (available in Chrome DevTools) is a developer tool that evaluates an app against a set of features that it must have to be considered a PWA. Some baseline requirements are -

• The site is served over HTTPS
• Pages are responsive to tablets & mobile devices
• All app URLs load while offline(must register a service worker)
• Metadata provided for Add to Home screen
• First, load fast even on 3G
• Site works cross-browser
• Page transitions don’t feel like they block on the network
• Each page has a URL

So far we know about the PWAs and have an idea of things which needs to be done to make an app PWA compatible, now it’s time to add these features to our Movies store app.

Getting Started

In this post, we will be doing the following things to covert our Movies Store app to a PWA.

• Fix render blocking resources
• Register a service worker
• PWA Setup
• Bonus tips using Nuxt.js configuration
• Evaluate the Lighthouse score

Step 1: Fix Render Blocking Resources

Images are the blocking part of an application, they might block the first paint of the page and makes the page non-interactive on slower connections like 3G.

To achieve a better image rendering mechanism, we’re using a div with the same dimensions of the image to render when the actual image is loading.

Let’s create the Image component at components/Image.vue with the following content.

We are using vue-progressive-image package which helps to render a custom UI while the image is loading. We’re rendering a custom div element with some background color while the image is in the loading state.
Now, you have to render all your images with the help of this Image component to avoid the render blocking image issue.

Step 2: Service Worker Registration

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.

Let’s create a component to register the Service Worker that we will generate during build using Google’s Workbox.

Create a file OfflineSupport.js at components/OfflineSupport.vue with the following content:

Here you can see that we’re registering service worker inmounted() lifecycle method. We first check if the browser has support for Service Workers. If it does we try to register the service worker i.e. the sw.js file.

Let’s import the offline component and use it in the Container.vue. Let’s add the following content in the Container.vue :

We have defined a vue component so the content of this file will be available for all the pages.

Step 3: PWA Setup

Add @nuxtjs/pwa dependency to your project:

yarn add --dev @nuxtjs/pwa

Edit your nuxt.config.js file to add pwa module with the Manifest module configuration.To make our app into an “installable” PWA, we need to add a Web App Manifest file. It is a simple JSON file that provides information about the app and how it should behave when “installed” on a user’s device. This is the file that is required for the browser to pop that “Add to Home Screen” prompt to the users.:

{
  buildModules: [
    '@nuxtjs/pwa',
  ],
  pwa: {    
    manifest: {      
      name: 'Movie Store',      
      lang: 'en',      
      useWebmanifestExtension: false,    
    },    
    meta: {      
      theme_color: '#17181B',    
    },    
    workbox: {},  
  },
}

Step 4: Bonus tips using Nuxt.js configuration

Let’s edit our nuxt.config.js with the following content to improve the performance:

Here are the code highlights:

• To disable the prefetching on all links, set the prefetchLinks to false in the router.
• To add prefetch and preload of links for faster initial page load time set resourceHints to true in render.
• By setting asyncScripts to true , it adds an async attribute to <script> tags for Nuxt bundles, enabling them to be fetched in parallel to parsing.
• bundleRenderer is used to to customize vue SSR bundle renderer.
• Enable extractCss in build to enable common CSS Extraction.
• Enable splitChunks to true . See this for more explanation.
• We can add optimization property in our config file. We can set minimizer to a customized Array of plugins or set minimize to false to disable all minimizers.
• We’re applying the custom config settings only in production mode so dev build can work faster & smoother as it used to be.

Step 6: Evaluate the Lighthouse Score

We’d worked hard & now it’s time to examine the app, keep your fingers crossed 🤞 while running the audits from chrome dev tools.

Hurray! the score is on the board now.

Image: Our app’s performance on the PWA checklist.

Image: Our app’s final scoreboard

Check out the PWA features checklist, which has been evaluated by the lighthouse.

As you can see we are still lagging a bit behind on the performance. The goal of this tutorial has been to teach you the basic aspects of a PWA app. There is always room for improvement, but for now, we will take the wins in other areas! This concludes our tutorial series: Build an end to end movies store app with Vue + Vuex + Appbase 😊.

This entire tutorial series is available as an open-source Apache 2.0 project.

Checkout the codebase for this step over here: https://github.com/appbaseio-apps/vue-moviestore/tree/step-10.

Or checkout the entire codebase for this app over here: https://github.com/appbaseio-apps/vue-moviestore.

Follow us on Twitter and Medium (see the card 👇) for more tutorial series updates and keeping up with all things #search.

All things #search