Progressive Web Apps — the future of mobile?

Progressive Web Apps (PWA’s) are becoming more widespread every day and when you see their benefits it’s easy to understand why.

PWA’s are proven to bring about higher customer engagement, higher customer retention, and increased conversion rates to your web app.

So, what are PWA’s?

To put it simply, PWA’s are basically phone and desktop apps that are built with web technologies and downloaded through the browser.

This is crazy powerful.

Think about it: You no longer will have to deal with app store approvals, separate code-bases, different deployment methods and everything else that comes along with native apps.

Instead, you build a PWA once using web technologies and deploy it to the web. This might look a little something like Starbuck’s PWA:

If you notice, both of these things are actually the same app. The difference is that one is a website that is accessed through a browser, and the other is a PWA which, once downloaded, the user will access just like they access any other app or desktop application.

How is a PWA different from a native mobile app?

PWA’s are different from native mobile apps because they never go through an app store. PWA’s are “downloaded” directly from a website and the contents of the app basically is just the contents of that website except it’s not within a browser, but rather is a standalone experience.

Native apps take a lot of development time to create. If you want to build a native app for android and iOS that will take 2 development frameworks, 2 programming languages, 2 deployment pipelines etc.

Progressive Web Apps, on the other hand, are built using the same technology as your website. In fact, if you already have a website built you can convert it into a PWA without too much effort.

This is awesome because you don’t have to write a new app to deliver a native mobile experience to your users.

How does a PWA work?

Modern PWA’s have 3 components to them. These components combined make the PWA possible. They are:

1. HTTPs (SSL) — PWA’s can only work on secured connections. If your site already uses https, then you’re all set for this step.
2. Service Worker — The service worker deals with caching and handling the network requests for your PWA. This lets it function properly as a standalone app.
3. Manifest.json — This JSON file simply contains configuration information detailing how your PWA should display. This can include the logo, app name, description, splash page etc

How Do I Setup a PWA?

I’ll be writing a blog post soon to describe the setup process for a PWA. For now, the implementation is heavily specific to your existing codebase, what tools you’re building with, and whether or not you already have a service worker. For now, a good resource to learn more about this process can be found here: https://web.dev/progressive-web-apps/.

Thanks for reading! I’ll be writing many more articles related to PWA’s in the future. Have a nice day!