Progressive Web Apps: Bridging the gap between web and mobile apps
Unless you’ve been living under a rock, you’ve probably heard of PWAs or Progressive Web Apps. It’s a hot topic right now because it’s support is increasing in multiple platforms, and major companies are deciding to work on PWA versions of their web apps including Twitter, Lyft, Starbucks, NASA, and more.
Recently it gained more attention, when Apple announced Service Worker and Web Manifest support for Safari. Microsoft brought PWAs to the Windows store, and Chrome has experimental PWA support for all the platforms.
Okay that should be enough to convince you that they’re worth going through.
So this article is a summary of the concepts and approaches that Progressive Web Apps follow. I’ve written this from my experience building them, and I outlined this article after going through the Google Progressive Web Apps Training.
The training does a good job of explaining how everything works together, and also takes you straight into the code. Udacity’s Mobile Web Specialist course also could be of help here.
The web is Operating System independent, is widely reachable, and is the biggest platform on the internet. Yet we see that users spend a lot more time on native apps than on the web.
Why is this so?
The main reason is the smooth experience and engagement native apps provide. How about we bring these features to Web Apps? That would mean the combination of the ease of access and reach of the Web (3x as compared to native apps), along with the immersive experience of native apps.
According to Alex Russell, who coined the term, PWAs are:
Just websites that took all the right vitamins
These vitamins are just features of native apps that we add on to Web Apps to get the best of both worlds. Apps that you can access directly from the Web, yet work smoothly and faster, are installable, and may even have notifications.
What makes PWAs what they are
The key features according to Google:
- Reliable: Offline-first, meaning it should provide interfaces even in poor or no internet connection. But this also doesn’t mean that the app should just be able to work when offline, but rather provides undisrupted service in all network conditions.
- Fast: Instant-loading, and smooth experiences even on loading content.
- Engaging: Should provide an immersive experience, equivalent to that of a native app. Can have Push notifications, Web Payments, or Credential management and so on. Being installable is also a key feature here.
But these are just concepts — how do we think about implementation from a technical point of view? Samsung Internet’s Peter O’Shaughnessy has a good approach for this:
So let’s get into these one by one:
The ability of service workers to run separately in the background helps give a lot of functionality to the app even when closed, providing a more native app-like and engaging experience.
It also helps in making the app offline-first as it acts a proxy between the server and application.
Hypertext Transfer Protocol Secure is an adaptation for secure HTTP communications using SSL or TLS encryption. But let’s not get into that — rather, we’ll go into the reason why it’s important.
Other than the fact that PWAs are expected to be highly secure, service workers that they use can intercept network requests and modify responses. This can be exploited easily to cause serious attacks. There are many services which help you get your site an SSL certificate like LetsEncrypt and SSLforfree.
Web App Manifest
Basically a JSON file that gives information about how the app should look in the home screen, on the web, and so on. It can be used to add a theme color, icons for the home screen, and a splash screen to name a few.
A simple manifest would look like this:
"description": "A simply readable Hacker News app.",
It makes the app look more native-friendly with all the icons, themes, and splash screens. It’s installable with just a JSON file.
For favicons of different sizes, you can generate them from a single high quality image by using Favicon-Generator and the theme. Background colors can be picked from the app’s palette.
Push Notifications and Background Sync
The server delivers push messages to the service workers, which intercept and update the local state or display a notification to the user. Since they run independently as a background process, this is possible even with the app closed. Push API could help you implement this functionality.
Background Sync API pushes periodic updates to the server so that the app can update when it’s online. Basically it makes sure all the messages are sent when there’s a good connection.
Below are few approaches and standards to follow while working on building Progressive Web Apps.
Lighthouse and PWA Checklist
Lighthouse is an automated tool for checking the quality of web pages by taking audits in performance, best practices, accessibility, SEO, and progressive web app standards. This is a good way to check if your app meets the standards and to see how good of a PWA it is.
You can figure out what your web app lacks and how it can be improved by using the suggestions from Lighthouse audits and also this PWA Checklist by Google which lays down all the general guidelines to follow, and how to fix issues. And the best part is, right now, Lighthouse comes built into Chrome DevTools!
According to Addy Osmani (on the Google Chrome team), the best practice for storage to be followed in PWAs is:
Use the Cache API for URL addressable resources (part of Service Worker). For all other data, use IndexedDB (with a Promises wrapper).
Both of these are asynchronous APIs which work with web/service workers. This makes them suitable for use with PWAs, unlike other methods such as localStorage.
For a quick idea of what IndexedDB you can refer to this resource.
Put simply, it’s a large scale noSQL storage system which can store about anything from the browser. It also works as a high performance API.
The Cache API which can be used in the Service Worker allows you store responses keyed by request. This allows content to be directly loaded from Cache in the event of a poor network and it can also be further configured to load only the necessary data while relying on the cache for everything else.
Fetch and Promises
For fetching resources, the latest and recommended way is to use the Fetch API with Promises.
// A basic fetch example with promises
// Do stuff with the response
console.log(‘Looks like there was a problem: \n’, error);
XMLHttpRequest (XHR) requests are unnecessarily verbose and so are callbacks, which fragments code and causes confusion when long callback chains are used.
Promises are a better way of handling asynchronous code.
Service Workers, Cache API, and Network requests extensively use these for performing a variety of tasks and are required at base level, hence it’s very important have a proper idea about these.
This not only means using responsive units of width. Content blocks should be manipulated for the needs of the layout. The app needs to look perfectly made for mobile, and overall it should look like a well-designed native app.
One of the key features of PWAs is that they should be blazing fast, and you can see that images aren’t helping. They need to be replaced with SVGs or removed wherever possible. Web optimized formats should only be used with the lowest size possible.
But it’s also important that these images be fluid and still go well with different screen sizes, as another import feature of PWAs is their native app-like experience.
Stories and Examples
With every service launching an app, people often find it inconvenient to actually go to the store and download it. They hate spending that much time, mobile data, and space on the device. This often leads them to the web, which requires way less effort. But then, we see high bounce rates, because the web experience is not as smooth and optimal as the native app.
The solution for both of these problems is Progressive Web Apps, which combine the best of the two worlds, giving the optimal user experience.
As mentioned, with the support for PWAs increasing greatly in all platforms, now would be the best time to get started.
Terms like “Progressive Web Apps” (PWAs) are useful to help spread concepts, but they come with a risk of misuse and…medium.com
Tinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to…medium.com
Converting React apps to PWAs:
Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the…medium.com
Converting Angular apps to PWAs:
Announcement: There is “Part 2: practice” of this article is available.medium.com