Progressive Web Apps

Dan

Dan
Written on 19th May 2020

Progressive web applications (PWA) balance the latest technologies available to web and mobile apps providing what is essentially a website that behaves and feels like a mobile app. PWAs provide access to many of the features usually only available to mobile apps.

Progressive web applications (PWA) balance the latest technologies available to web and mobile apps providing what is essentially a website that behaves and feels like a mobile app. PWAs provide access to many of the features usually only available to mobile apps.

Characteristics of a PWA

PWAs by nature are a web application and should work on any device but should take advantage of features available on the user’s device and browser.

They should be easy to find through search engines like any other website and application

They should remain linkable and shareable in traditional means (URL sharing)

They should be responsive and the web apps UI must fit a range of device form factors and screen sizes. Things like material and bootstrap already facilitate this.

They should be app-like and should look like a native app and be built on the application shell model, with minimal page refreshes. Relatively new yet common web technologies like angular and react very much facilitate this.

They should work offline or in low connectivity scenarios. This is genuinely one of the biggest benefits.

They should be Installable providing a focused experience “outside” of the traditional browser view. Not all devices allow this but it’s a great feature if supported (literally all modern, non-apple devices)

What is a service worker?

A service worker is a script that runs behind the scenes, completely separate to your webpage and controls and enables behavior which would traditionally require user interaction (in regard to websites at least). This currently enables things like background sync (sending and receiving data for use within the app) and push notifications. Since the concept of PWAs is relatively new they’re still being developed and new concepts and features could become available in the future, even as they become available on the device natively.

Why?

Modern browsers implement service workers which provide the technical foundation for many of the features you’d associated with mobile apps. Things like Push APIs for notifications, allowing users to install web apps to their home screen and even working offline all become possibilities in PWAs. The only real prerequisite for a PWA is that your browser must support service workers.

Access to the concepts and features associated with mobile apps, PWAs can be more engaging, provide better performance and familiarity, overall providing a better user experience and offering a gateway to improved user retention. PWA development removes the complications associated with maintaining a mobile application and since you’re not necessarily having to release things through an app stores, potentially become easier to deploy.

PWA over a mobile app or web app?

Being “progressive,” a progressive web app works in all modern browsers, and its capabilities increase as the users browser provides new features in future updates. You don’t need to develop for multiple platforms, you develop a single experience in a way that works for all.

Being a web app underneath, you still have access to frameworks and features available in web development. Utilising things like Bootstrap, Material, Angular, jQuery is completely possible, and there’s no reason an existing web project couldn’t be pushed in the direction of becoming progressive.

Is it a replacement for native applications?

The short answer is yes, but not completely. For traditional applications like online shops (ecommerce), a source for resource download or a CMS driven site then I personally see no reason for an app, but there are a few features not yet available. Anything that relies on ads, needs to respond or access certain device hardware, data or functionality (like NFC or contacts or SMS capability) may not yet be achievable through a PWA, but these features may come in future updates.

There’s a website online that explains current capabilities within PWAs:

https://whatwebcando.today/

People still expect things to be available in the app store when using a mobile device and this is perhaps the biggest reason to consider a native mobile app. It’s definitely what’s familiar to the user and not something that’s going away any time soon. That said in a lot of instances native apps are often a solution to a pre-existing web app so a PWA could still provide a better user experience on that front.

Although Apple have expressed no interest in allowing PWAs to be submitted and be installable through their app store it is actually something that’s available through many of the other app stores, and something that can be considered if a presence in those stores is still required.

A working example

I’m a keen home baker and if it’s dough based I likely bake it fairly regularly. There weren’t any applications available on the app store or web that provided a solution to requirements I had:

  • Must allow storing of recipes and pictures
  • Must work with bakers percentages
  • Must work with starters and dry yeast
  • Must allow ingredient management.
  • Must allow me to share recipes
  • Must work offline and be installable
  • Must have no backend (although could be expanded if necessary)

It’s very much a work in progress but in my personal time I have been slowly building an example of a PWA that offered me everything I needed. Check it out here

https://breadbaker.noplaytime.com

Although it lacks the finesse and polish of the work Webnetism produce (I’m no designer!), it’s fully functional and has given me a way to store my recipes, with pictures quickly and efficiently. I use it surprisingly regularly.

 

Let's contribute!

How about you help us a little and share this page with your friends? It’s just a click, we promise!

Want to get in touch?

Then why don't you? Just click the button below and secure your place in our office chair (before you ask... yes, spinning is allowed)!

Get in touch
Get in touch