best of both worlds?

Jul 9, 2019Cuckoo Coding GmbH, English, PWA

A Progressive Web App combines the best of two worlds. It’s a responsive website – but it is downloadable to your phone’s home screen, it has offline capabilities, access to  several native device features and works on Android as well as on iOS (albeit with some restrictions). These restrictions can be a reason to decide against this solution. Let’s have a closer look at the Pros and Cons of PWA development.

A considerably cheaper option

Most potential costumers nowadays approach the Cuckoo Coding team asking for a cross-plattform solution. Designing and developing two native apps, preparing them for Google Play and the Apple Store and thereafter maintaining them for years and answering to every required update – that’s a lot of time and money there. 

And often the costumers also need some kind of web presence to go with their project. A PWA can grant you all three wishes in one go and you don’t need to deal with any app store at all.

This however is something you should be aware of/ you should remind your costumers of: Since the app will not be attainable via either app store, they need an alternative strategy concerning the marketing channels and how to deal with monetization.

Why now?

The PWA technology has been there for a while, but only recently everyone got excited about it. The reason is that Apple was not willing to integrate the necessary features into their Safari browser. Last year they released a new update that now allows not all, but most of the tools you can use with Chrome.

Development

You can turn any website into a PWA. It doesn’t matter if you code plain HTML, CSS and Javascript or if you like to use React, Vue or Angular for web development. Every framework has a slightly different way on how to achieve this transformation from website to PWA. There is now even a plugin to turn your WordPress site into a PWA. But what basically happens is, you add two files, a manifest file and a service worker file. 

Backwards Compatibility

An important thing to consider is the reason PWAs are called “Progressive”: You need to ensure backwards compatibility and take care to integrate alternative functions to support older browser versions. And you need to be aware of the different features that Chrome, Safari, Firefox and others support. This is the tricky part about PWA development, and the part that takes longest. It includes excessive testing of all features in different browsers, with different browser versions, and on different devices.

Which native features are accessible? (July 2019)

Although browser support is continuously growing, there are some native device features that are not accessible (yet). Let’s review what’s accessible in summer 2019:

  • Camera  —> Is accessible from all browsers.
  • GPS data  —> Is accessible from all browsers.
  • Download Prompt   —> Is triggered automatically only on Chrome. On Safari you can intercept it and show your custom prompt that explains how to download the app through Safari’s menu. On Firefox there is a download button that appears in the navigation bar next to the URL.
  • WebBluetooth —>  The WebBluetooth API is so far only accessible on Chrome and Samsung Internet.
  • NFC —> NFC is currently in an experimental phase only on Chrome.
  • Notifications —> Are accessible to all browsers except Safari.
  • Background Sync —>  Is accessible to all browsers except Safari.
  • Safari also ignores some attributes of the Manifest file.

Conclusion

Going with a PWA can considerably fasten up, ease and cheapen your development process. But before you decide to go for it, you should consider two important things: 1. Are the browser versions, that my potential users have installed, compatible with the native device features I want for my app? 2. Will I reach my user base WITHOUT being featured in one of the app stores? If you can answer both questions positively, your way to a PWA is clear.

If you need some help coding your PWA or want to visit a workshop on the technology drop us an email 😉