Progressive Web App Case Study — Astrolink

Here we going to describe some techniques used to build our Progressive Web App

Photo by Bram Naus on Unsplash

About

Astrolink is the biggest platform about astrology in Brazil, with a lot of content and tools that help the users learn more about astrology and self-knowledge.

Motivation

Analysing some metrics, we realized that our mobile users are increasing. Thinking about that we decided to build a new version of Astrolink totally thought of mobile and offline first.

In this post, we will talk about some techniques used to provide performance optimization, troubles that we faced during the whole process and future possibilities for the project.

Benefits of building a PWA

Building a quality PWA brings incredible benefits, increasing the engagement, conversion and user satisfaction.

• Add to Home Screen
• Work reliably, no matter the network conditions
• Increased engagement
• Improved conversions

To learn more about PWA benefits access Google Developers PWA.

Time invested

Our strategy was started by the most accessed area of the website and to implement in the remaining areas for the time. We invested 6 months studying technologies and best practices, collecting user data, designing interfaces, testing and coding.

Old x New mobile site

Let’s talk about performance!

Below I going to show some metrics that were taken from old mobile website version to the new mobile website. It’s important to note that the test was made simulating a Fast 3G Network Connection and 4x CPU slowdown.

Mobile devices typically have more hardware constraints than laptops or desktops, so these settings let you experience the page load as if you were using a less powerful device.

Astrolink’s old mobile website took 3.1 seconds to get the first paint.

Astrolink’s old mobile website took 11.2 seconds to get interactive.

Astrolink’s new mobile website took only 1.1 seconds to get the first paint.

Astrolink’s new mobile website took only 5.5 seconds to get interactive.

Navigation Transition

Beyond the performance improved, we think about improving the experience of navigation too, where the navigation transition is not blocked when you lost the network connection and it was smoothed by adding fade animation between pages.

Example of fade animation between the page transitions.

Techniques

To provide the entire mobile experience we needed to implement a lot of techniques that, working together, could help us to get it. Here I will describe a little bit about some techniques used in this process.

Route-based Javascript Chunk — Code-Splitting

In order to reduce significantly the main bundle and provide a better experience in the initial load, we use this technique which breaks our main file in small chunks and we delivered it based on route access. Click here to know more about how to implement it using ReactJS and Webpack.

Webpack Bundle Analyzer

We use this plugin to have a comprehensive analysis of our bundle and take some actions to reduce the size of our files. This plugin allows you to see in detail what is being included in each file. There is a nice article describing other options to analyze your bundle, check it here!

Representative image generated by Webpack Bundle Analyzer

Service Worker: Cache Strategies

I guess this was the most important step in this project that helped us caching our files and provide the offline experience for our users. Jake Archibald explain it better in the following article: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/

On this project, we use the Workbox library made in order to facilitate all of the strategies of caching.

This is an example using the strategy: Stale While Revalidate

workbox.routing.registerRoute(
  new RegExp(‘.*\api/notification$’),
  workbox.strategies.staleWhileRevalidate({
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200]
      })
    ]
  })
);

Why Workbox?
Workbox is a library that bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers.

Other techniques used that I going to write by later

• Application Shell
• Caching Runtime
• Static Assets Offline
• Pre-caching initial files
• Redux with DevTools

To the Future?

• Push Notification (service worker)
• Source Map Explorer

I believe that the PWA is just the beginning of the new types of applications to provide a better mobile experience.
My motivation for this is that I believe the internet is for everyone everywhere, so our job is to provide easy access to information thinking about extreme cases like people with limited internet quality or even the quality of the device.

I hope this article is useful for anyone who wants to build a Progressive Web App.

With thanks to Astrolink team ❤