Going offline with Progressive Web Apps
Building a Progressive Web Application from an existing app
A couple of months ago at UruIT, along with the UX team, we started to work on a web app to assess a website’s usability. The app consists of a welcome page where the user registers his/her email, followed by five wizard steps and a final results page.
We implemented the app with Angular 2.4 and made it responsive because we had mobile devices in mind. But, it was far from a native app because it needed internet connection all the time. So we decided to go one step further, and allow the user to do the quiz even without an internet connection. It means we wanted our web app to behave just like a native app, so we aimed to make it a Progressive Web Application (PWA).
This post is the first of a series of two. Here we’ll go over the process of making our app offline, step by step, giving some tips and explaining the problems we faced and how we solved them.
From the technical standpoint, we will be covering the basics of Service Workers.
Stay tuned for the next post, in which we will cover the Application Cache as a fallback mechanism, and also how to create a web manifest file to tell the devices how to install and show our app.
Going offline with Progressive Web Apps
PWAs use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment, says Addy Osmani
That being said, we understand being progressive means that we need to adapt to the browser’s capabilities, providing a fallback mechanism in older browsers. Also, in order to deliver an immersive experience, we must give some information to the devices through a web manifest.
The idea of making a web app work offline is similar to the idea of a native app. Once it’s installed, you can open it any time you want, regardless of the connectivity.
Therefore, the first time a PWA is visited, the resources (scripts, styles, markup, fonts and whatever the developer chooses) are downloaded and cached. It means that subsequent visits will grab them from the cache rather than request them to the server. Here is where Service Workers come to the rescue.
The idea of a progressive app is that it should work even when the appropriate technology (say Service Workers) is not supported in the browser.