Progressive Web Apps — The Convergence of Web and Mobile Apps

Are you tired of having to open your app store and install an app in order to do a thing, only to never open that app again? In a lot of cases the only reason you would even want to install an app for something is because it’s faster to open an app than it is to open your browser and go to the website, or maybe you want some functionality that you don’t typically get on a webpage, like sweet sweet push notifications. Wouldn’t it be great if you could just go to a website and have an app on your home screen in a matter of moments?

The Future is Now

The functionality that I described above isn’t some sci-fi future thing. No, I’m talking about progressive web apps or PWAs. In very much the same way as AMPs (Accelerated Mobile Pages) are trying to improve the end user experience so are PWAs, but with a different approach. AMP makes a lot of sense when you have some static content that you want to get to the end user FAST. PWAs on the other hand are great at increasing user engagement.

What are PWAs

PWAs are essentially just a checklist. One of the things I love about PWAs is that most of the work necessary for implementation boils down to just following best practices. For example, one of the requirements for a PWA is that it must be served over HTTPS, another is that the page has to work well on mobile. So, do a good job as a web developer and you’re already well on your way to having a PWA. In addition to best practices, there are some specific things that are required to have a PWA. One is to have a manifest.json which has information about how to display your PWA such as name, icon, theme color etc. Another is to have a service worker with offline caching. It’s gotta load when you open it, regardless of your internet connection status.

Why PWAs

Remember what I wrote earlier about having an app on your home screen in a matter of moments? In addition to all of the benefits you get from the individual PWA checklist items — security from HTTPS, better user experience from offline caching and responsive design, etc, A properly implemented PWA on Android will prompt users to add the PWA to their home screen. Users have always been able to add a webpage to their home screen but it was manual, they had to do it, now they get asked. You can even take this a step further and use your service worker for sending push notifications in addition to the offline caching.

Currently the add to home screen prompt is only implemented for Android, though there has been some speculation about Apple implementing this feature on iOS, iOS will still benefit from the improved user experience gained from implementing PWA.

Testing

If you are a developer that is concerned with the quality of their craft, you may be close to having a PWA without even realizing. A great utility for testing where you stand with your PWA is Lighthouse. Lighthouse will run through your page and test it against all of the criteria for PWAs and give you a score out of 100 with some information on how to improve that score. As an example (and a bit of bragging rights), here is the score for Clever.ly’s homepage.

Final thoughts

The line between mobile app and mobile web is becoming smaller with time. Ultimately, I think we’re going to see a decline for native apps in the the coming future, in favor of the much lighter web apps. AMPs and PWAs give us a good insight into what a future dominated with web technologies will look like, and it looks good.

Show your support

Clapping shows how much you appreciated Clever.ly’s story.