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 as its support is growing across multiple platforms, and major companies are deciding to work on PWA versions of their web apps, including Twitter, Lyft, Starbucks, NASA, and more.

It gained more attention recently, 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 platforms.

Well, that should be enough to convince you that they are worth passing on.

So this article is a summary of the concepts and approaches that progressive web apps follow. I wrote this from my own experience building them, and I outlined this article after reading Google Progressive Web Apps Training.

The training does a good job of explaining how everything works together, and also gets you straight into the code. Udacity’s Mobile Web Specialist course can also be helpful here.

Why PWA?

The web is operating system independent, widely available, and is the largest platform on the Internet. Yet we see that users spend more time on native apps than on the web.

Why is it like this?

The main reason is to provide seamless experience and connectivity to native apps. How do we bring these features to web apps? That means a combination of accessibility and ease of access to the web (3x that of native apps), plus the immersive experience of native apps.

These vitamins are just features of native apps that we add to web apps to get the best of both worlds. Apps that you can access directly from the web yet work smoothly and quickly, are installable, and may even contain notifications.

Reliable: Offline-first, which means it should provide an interface even in poor or no internet connection. But this also does not mean that the app should be able to work only when offline, but also provides uninterrupted service in all network conditions.

Fast: Instant-loading, and smooth experience even when loading content.

Engaging: Should provide an immersive experience at par with a native app. Could be push notifications, web payments, or credential management, etc. Being installable is also a major feature here.

But these are just concepts – how do we think about implementation from a technical standpoint?

service worker

It is a JavaScript file that runs in the background separately from the main browser thread, intercepting network requests, caching resources, and providing a basis for several APIs, including push notifications, background sync, and caching.

The ability for service personnel to run separately in the background helps the app deliver a lot of functionality even when it’s turned off, providing a more native app-like and engaging experience.

It also helps in making the app offline first as it acts as a proxy between the server and the application.

An introduction to service workers can be found here, and Google has some assistants open source in their service worker toolbox.

HTTPS

Hypertext Transfer Protocol Secure is an adaptation for secure HTTP communication using SSL or TLS encryption. But let’s not get into it—rather, we’ll go into the reason why it’s important.

Besides the fact that PWAs are expected to be highly secure, the service workers they use can intercept network requests and modify responses. This can be easily exploited to cause serious attacks. There are many services that help your site get SSL certificates like LetsEncrypt and SSLforfree.

web app manifest

Basically, a JSON file that gives information about how the app should look on the home screen, on the web, and so on. It can be used to add theme colors, icons for the home screen, and splash screen to name a few.

It gives the app a more native-friendly look with all the icons, themes and splash screen. It is installable with just one JSON file.

Read more about them in Mozilla’s web docs and generate one here.

For favicons of different sizes, you can generate them from a single high quality image using favicon-generator and themes. Background colors can be selected from the app’s palette.

Push notifications and background sync

The server sends push messages to service personnel, which intercept and update the local status or display a notification to the user. Since they run independently as a background process, this is possible even when the app is closed. Push API can help you to implement this functionality.

Leave a Reply

Your email address will not be published. Required fields are marked *