28.08.2018, Know-How

Progressive Web Apps – a hype or more?

PWAs are a highly discussed topic lately. They promise to combine the advantages of native apps and web. But what are PWAs? What are their advantages and limitations? Are they more than just another hype?

 

 

Since the birth of smartphones or latest since they became our daily companions, the big question is how to best target the constantly growing mobile audience. In our daily work we are confronted with these questions on a regular base: Is it enough to provide a responsive website? Or should I invest in a native app, which can be distributed in the app stores?

In most of our projects concluded: A mobile website is a must, but for many use cases, a native app is a must as well. Mobile web has many limitations in terms of usability and functionality. To provide a seamless user experience, a high level of security and to include all device functionality like offline, push, camera etc., many of our clients decided to go with the best possible solution: a native app.

In 2015 Google launched a new web approach: Progressive Web Apps (PWA). Their promise is to provide the experience of a native app on a mobile web browser. Nowadays there is a hype around PWAs and big app providers such as Twitter, Pinterest and Alibaba are experimenting with PWAs.

In this blogpost we take a closer look at PWAs to see how they work and we analyze their benefits and limitations. In our second post – Our first PWA is live! – we compare a PWA and and iOS app based on various criteria.

 

What are Progressive Web Apps?

 

PWAs look and feel very much like a native mobile app, but indeed are not really apps but «only» websites. Ok, not classic websites, because they offer more.

For those who are interested in the technologies behind:

  • The app shell is the HTML5, CSS3 and JavaScript code, which builds the interface of the app. The interface is the static part of the app. The app shell is cashed on the device and can be loaded immediately.
  • All content is displayed dynamically and refreshed every time an internet connection is established. Like in native apps the content is loaded via web service calls and rendered by the client, unlike in classic websites, where for each request, content and layout are merged on the server side and then delivered to the client altogether.
  • The core technology of a PWA is service workers. A service worker is JavaScript code that runs in the background. It can be responsible for network requests, push notifications, connectivity changes and more. A service worker acts as a proxy/middleware for such requests. It needs to run on HTTPS, in order to prevent man-in-the-middle attacks.
  • Many frameworks such as React or Angular are used to build PWAs. They also already provide a set of service workers, so they don’t need to be rebuilt for every app.

 

Advantages of PWA’s compared to responsive Websites

 

As said, a PWA is a website. Therefore, it can be loaded via browser and an icon can be added to the home screen like for any responsive website. PWA’s design is responsive, meaning it adapts to screen sizes of all devices. But this is also true for any responsive website. So, what are the differences and key advantages of a PWA compared to a classic responsive website?

Compared to responsive websites, PWAs offer functionalities, that have been limited to native apps so far:

  • Short loading Times: PWAs are available instantly. The content is loaded fast via web services, like in a native app.
  • Push Notifications: PWA users on Android can be reached and engaged via push notifications like with native apps (on iOS this functionality it not yet possible).
  • Offline Work: The cache is created by the service worker. In case there is no internet connection, the cached data will be displayed.
  • App-Like-User experience: When launched from the home screen, PWAs don’t show any URL/Browser navigation like mobile websites. Thanks to this and the fast loading the usage of a PWA very much feels like the use of a native app.
  • Security: The connection is based always on HTTPS. This makes them safe against vandalization.

 

Are PWAs an alternative to traditional websites?

 

Yes, they can be. As PWAs are responsive to any screen size, they can be used on any device, be it a mobile or desktop device. So basically, any company website can be programmed as a PWA. As today over 50% of browser accesses are coming from mobile devices, to think of PWAs as an instrument of building any website in the future seems to be a logical conclusion, especially in case additional functions like push or offline usage or a maximum of mobile user experience are required.

Technology-wise some prerequisites are needed: the CMS/Backend used has to offer web services (eg. RESTFul), for the PWA to access the backend content. In regards of UX/UI: the efforts to optimize the design and functional scope of the app to all screen sizes stay the same as today. But the approach might be a different one: as today many companies first design the desktop version and later adapt the layout to mobile, the approach in the future might be mobile first.

If a traditional website already is in place, it can also be gradually upgraded with PWA functionality such as push, enhanced site speed, offline functionality etc.

 

Highlights of PWA’s in comparison to native Apps

 

By catching up on functionality and user experience to native apps, PWAs can offer to some extent the best of the two worlds.

The highlights of PWAs compared to native apps are:

  • Reach: PWAs can be found via browser search and thus potentially reach a wider audience than apps in the app stores. On the other hand, also native apps or its content can be found via browser search, but it requires additional efforts and for the app-installation the user still needs to go to the app store.
  • Savings in development time: As PWAs are developed for one platform only, development efferts are lower compared to natively develop an app per platform. Also, updates are simpler, as they can be done immediately without the need to deploy the app again to the stores.
  • No restrictions by the App Stores: All rules dictated by Apples and Googles app stores don’t apply to PWAs, including the 30% revenue split for selling digital content inside apps.

 

What are the Limitations of PWAs?

 

Even though PWAs offer promising advantages compared to classic responsive websites and native apps, they have limitations that need to be considered, before an app provider decides to go with a PWA.

The functional limitations are:

  • Not fully supported by iOS yet: Since Safari 11.1 and iOS 11.3. PWAs also run on Apple devices. But still there is no full support on iOS yet as on Android. E.g. the push functionality is not possible yet on Apple devices. Also access to private data on the device and background sync are not possible. Furthermore, the installation is not as easy as on Android: there is no web app banner indicating that you are about to access a PWA and you need to use the «Add to home screen» option in the share sheet.
  • Restricted access to hardware features: On both platforms – iOS and Android – PWAs have limited capabilities to offer integration with hardware features such as NFC and Bluetooth functionality, as well as to the device’s sensor package like accelerometer, fingerprint sensor etc.
  • ARKit, CoreML, Siri still require native apps: Latest toolkits for augmented reality, machine learning or voice assistants can only be used within native apps. Also, a wide variety of existing 3rd party SDKs which vastly extend the functionality of native apps (e.g. barcode scanners, video players) cannot be used within PWAs.

Therefore the range of planned functionality determines, if a PWA is an alternative to a native app. Also, other aspects in regards of marketing & sales need to be considered:

  • Restricted Monetization: Many app providers make money by selling their app or functionalities via in-app-purchase. The whole sales process is supported by the app stores, whereas for PWAs no such process is in place. Purchase mechanisms will have to be organized by the app provider. On the other hand, no contributions for selling digital content need to be made to the app stores.
  • Stores cannot be used as Marketing platform: Even though it is nowadays difficult for a new app to get noticed on the app stores, there is still a big audience searching for apps directly in the stores. Especially already successful apps benefit from getting listed and featured in the stores.
  • «Preferred Supplier»- Status more difficult to reach: Once an app found its way on a user’s home screen, the app provider benefits of some preferred supplier status. Whereas PWAs found via browser search might be found easier, but also get replaced more easily after a next browser search.

 

How to decide which way to go

 

The decision how to best target the mobile audience is not an easy one and depends on various factors, such as the required range of functionality, reach, available budget etc.

There are pros and cons for each way to go, and finally for every case these factors need to be carefully evaluated before taking a decision. The crucial factor is the functional scope: in case a full support for iOS devices and an unlimited access to hardware features, toolkits and 3rd party SKDs are required, PWAs are not yet an option to replace a native app.

Worth mentioning: many big players such as Pinterest, Twitter or Facebook offer native apps and PWAs on the same time. Some of their PWAs offer limited functionality and content only, probably for experimental reasons. An overview of current PWA apps you can find here: https://pwa.bar/

 

Upcoming in our blog: Comparison of a native App and a PWA

 

We built one of our iOS apps – the Stations iOS App for users of public transport – as a PWA and compared the two. Read the analyse and the results of the comparison in this article: Our first PWA is live!

 

 

Share with your friends: