Progressive Web App Compatibility — Part #11 of 11

This post has been updated on August 13th, 2021! 🎉 We’ve updated the usage of React from v16.9.0 to v17.0.2, React-Redux from v6.0.0 to v7.2.4, and ReactiveSearch from 3.0.0-rc to 3.22.0.

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

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

Table of Contents

1. Getting Started with React and Next.JS
2. Basics of React
3. Home Page + Layout + CSS-in-JS (Emotion.JS)
4. Basics of Redux
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. Deployment with Heroku
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
• Extending the Next.js configuration
• Extending custom server with SSR Caching
• Bonus tips
• 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.js with the following content.

components/Image.js

We are using react-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: Installation

Install the next-pwa package.

yarn add next-pwa

Step 3: Extending Configuration

We have to extend the default Next.js config in next.config.js with the following content:

After running next build, this will generate two files in your distDir (default is .next folder): workbox-*.js and sw.js, which you need to serve statically, either through static file hosting service or using custom server.js.

Add Manifest File

Create a manifest.json file in your public/static folder:

Add _app.js in pages folder and add the following content:

You can know more about the next-pwa setup from here.

Step 4: Extending Custom Server with SSR Caching

We’re using lru-cache which caches the data by maintaining the least-recently-used items. Let’s create a cache instance at server.js with max results & time constraints.

const Cache = require('lru-cache');
const ssrCache = new Cache({
 max: 20, // not more than 20 results will be cached
 maxAge: 1000 * 60 * 5, // 5 mins
});

Let’s define a function namedrenderAndCache which setshtml in the cache, if not present already with the following content.

Now you can use the renderAndCache method to cache the existing routes, for example, the home page route can be served as:

server.get('/', (req, res) => {
 renderAndCache(req, res, '/');
});

Step 5: Bonus Tips

Redirect HTTP to HTTPS

Since we are using Heroku for Movies Store deployment then we can use heroku-ssl-redirect middleware to redirect all thehttp requests tohttps.

const sslRedirect = require('heroku-ssl-redirect');
const server = express();
server.use(sslRedirect());

Compress Responses

We can use compression middleware to compress response bodies for all request that traverse through it.

const compression = require('compression');
const server = express();
server.use(compression());

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 and accessibility front. The goal of this tutorial is to teach you the basic aspects of a PWA app. There is always room for improvement but for now, we will take the win! This concludes our tutorial series Build an end to end movies store app with React + Redux + Appbase 😊.

While the tutorial in its entirety is free and includes step-by-step instructions on how to build the app, it doesn’t include the original stylesheets and a few other intricate details about the app. You can get the whole movie store app codebase (along with updates and support for the next 6 months) for $99 only (valid for a limited time).

Tap on the image to get the complete Movie store tutorial + codebase + support

Thanks for spending your time with Appbase learning. We hope you learned and built well 🙌.

Follow us on twitter for more updates, or here on Medium to be notified when we publish our next story.

All things #search