PWA vs web app

Web app development

Developing web apps has become more popular lately around the world but also in Switzerland, but there are a lot of uncertainties about what a web app is and how it compares to PWAs and mobile apps.

We at Swiss Tomato, have been working on web and projects since 2014, so we prepared a detailed guide about web app development, including basic definitions, advantages and disadvantages and when and how to use them.

(Screenshot: web app Airbnb vs. mobile app Airbnb)

What is a web app

A web app is a web solution with app-like navigation and with certain features that you would rather expect in a regular mobile app. A web has its own URL and can be accessed via a browser, so it is accessible across devices (computer, tablet, apps). Since it is accessible in a browser, you can use search engine optimisation and Google ads to drive traffic.

A web app can be a good solution if you want to provide your users with a solution with intuitive navigation that resembles the convenience of an app and that can be accessed across multiple devices.

A web app will never have the speed and the performance of a mobile app and access to advanced hardware-related features is limited.

Jump to read more about Web App Development

What is a PWA (progressive web app)

A PWA is web app on steroids. It has certain features beyond a regular web app:

• It is installable on Android and on computers, for iOS it is installable from Safari only and with some caveats
• Once the app icon is added to the screen it can be launched separately and it opens not in the browser but in a standalone window
• It provides a certain amount of offline functionalities: it caches certain information and the navigation buttons are stored locally, accessible offline

At first, it is tempting to develop a PWA, but at a closer look you will be better of choosing either a web app or a mobile app. When you search around on the internet you will find a lot of good references to successful PWAs, but once you actually want to try them you will only find a few.

The main drawbacks of a PWA are:

• In order to profit from the advantages of a PWA you would need to install it. Slight problem: hardly anybody knows how to install and use a PWA. On Android, you can show a pop-up to prompt installation. Once you took the effort to install something, it could well be a mobile app, with many more features.
• There are hardly any developers who have experience in developing PWA

In a nutshell: we rarely recommend a PWA as in order to benefit from the advantages you would need install it, which hardly happens, so you are better off either with a normal web app, or if the project is more complex or you have a lot of recurring users, a native app.

Jump to read more about PWA Development

What is a mobile app

There is no need to explain what mobile apps are, these are apps that you can download from the app stores and run on iOS or Android. Mobile apps have unparalleled speed, ease of use with best-in-class performance and access to OS and hardware-specific features. The key downsides are that you need to develop it for both iOS and Android and hence the development cost can be higher.

Do you want to develop a web app or a mobile app? Reach out to Swiss Tomato for a consultation about your needs.

Comparison of web apps vs. PWA vs. mobile app

You can read a lot about what web apps, PWAs or mobile apps are capable of – so compiled the ultimate comparison.
Here is a comprehensive table which compares the possibilities and limitations of web apps vs mobile apps.

Web app development: advantages vs. disadvantages

In the above we already talked about some of the features of web apps, the line between a web app and a website can be quite blurry. Here a few features that differentiate a web app from a regular website:

• It has app-like navigation with buttons and controllers
• It is usually faster. The key reason is that it mostly uses SPA technology (Single Page Application), which means that a lot of the content (like buttons, navigation) is downloaded once and only the dynamic content has to be updated, when you click on a button, not the whole page has to be re-loaded.
• A web app is more task focused vs information sharing

When to use a Web App?

In our experience, a web app is a great solution over a simple website or mobile app if:

• You want to provide a solution that works across devices and where SEO is important
• You want to provide a relatively fast web solution with intuitive app-like navigation
• You already have mobile apps, but you want to extend the availability of your solution to those who don’t want to install a mobile app or who prefer to use the solution on computers as well
• The required functions is relatively straightforward and you don’t need offline access, push notification, advanced augmented reality, advanced camera usage or Bluetooth usage
• You want to first test the concept by developing an MVP (minimum viable product) with a lower budget

Good examples of web apps

You can think of the web version of the most popular apps, like Facebook, Google Maps, Gmail or Airbnb. You will note that they have app-like navigation and are relatively fast BUT they are slower than the mobile apps, so if people use them regularly, then they prefer to download the app instead. If you use it every now and then, then a web app can be great, Airbnb is a great example.

Good examples of web apps in Switzerland

Swiss Railways (CFF / SBB)
There is also a number of good quality web apps in Switzerland. The Swiss Railways (SBB / CFF), asked Swiss Tomato to develop an in-door navigation app for the Lausanne train station. It is a single page application, where the UX controllers are constant and only the dynamic map and navigation is refreshed.

This is a typical good use case for a web app: the functions are relatively simple and users need an easy-to-use, intuitive interface. The solution can be used both on mobiles and computers.

CFF web app

Do you consider developing a web app? Reach out to Swiss Tomato so we can better understand your needs

PWA development: advantages & disadvantages

PWA (Progressive Web App) is a buzz word that is user across different publications, but what is it really? The best way to define it, that a PWA is a web app with a few extras on top:

• It can be installed (easy on Android, a bit more tricky on desktop and iOS)
• If you install it, then it will add a regular app icon among your other apps, you can search for your app and launch it by clicking on it
• If you launch the app, it will appear in a standalone window, not in the browser (true for both desktop and mobile PWAs), so it will more feel like an app, as you can’t see the URL
• It can have some limited offline functions: this mainly includes the navigation buttons and cached information on some of the key pages. It makes the navigation quicker, but you will not have the possibility for a full offline usage, like in the case of some mobile apps

The big caveat with PWAs is that they need to be installed in order to benefit from the above advantages, and it is really not easy to install a PWA on an iOS.

On Android you see a little pop-up to prompt installation, but once people actually take the ‘big step’ to install, then why not prompt them to install the real mobile app? Unless you want to focus your strategy on web only.

In a nutshell, PWAs only have real tangible benefits vs a web app if they are installed, but they lack a lot of features from mobile apps.

When to use a PWA?

Developing a PWA makes sense if:

• You have a web only strategy, because the use case doesn’t justify the investment of developing two mobile apps (iOS + Android)
• You can ensure in your communication that your users install your PWA
• You are confident that even due to the low number of PWA developers you can maintain the PWA in the long-term

Technology stack for a Web App

There is not a single technology for a web app development, as most web solutions can be developed with a web app in mind. The best technologies are React and other javascript based technologies, like VueJS/NodeJS, but you can also adapt a CMS, even WordPress or use a headless approach, where the back-end is the CMS and the front-end is a Javascript based framework or other.

How to download a PWA?

One of the key features of PWAs is that it can be downloaded for Android, iOS and even on desktop, thought the latter two need quite some effort from the user. So the big question is how do you download them?

How to download a PWA on a computer

If you open the URL of the PWA, you will see a little icon that will allow you to download the app, see the example of Spotify below. Once you have downloaded it, you can have an app icon on your desktop or under the Start button. Clicking on the app icon will launch the app, but not in a browser, but in a standalone frame.

Downloading a PWA for Android

This is the most straightforward, when you open the web app in a browser, a pop-up appears that prompts you “Add to home screen”, which is actually the installation.

Installing a PWA on iOS

This is the trickiest, it only works in Safari and there is no apparent information that you have opened a PWA or that you can install it. Once you install it, the app icon will be added among the other apps and you can open the app and that it will open not in a browser but as a standalone app.

International PWA examples

If you google it, you will find a lot of success stories of different PWAs, but once you try to actually find working PWAs, you will hardly find. As surprsising as it may be, we could only find two examples outside of Switzerland: Starbucks and the app of the German TV channel, ZDF: the ZDF Mediathek web app.

They both have a specific URL (https://app.starbucks.com/ and https://pwa.zdf.de/ ) and surprisingly the existence of the PWA or encouragement to use it does not appear when you open their standard website.

PWA examples in Switzerland

There only limited use cases for PWAs for Switzerland, but here are two.

Newhome.ch
It is a platform to find properties to buy or rent. Their PWA can be installed on both mobile and computer and it works quite fast.

Zurich airport PWA
The Zurich airport is one of the few companies that decided to discontinue its mobile apps and rely solely on a web app. Their web app is quite fast and it caches the navigation and opened pages, so even if you lose connection, you can still open your previously opened pages.

One interesting feature is how they went about notifications: since web apps don’t allow for push notifications, you can opt for notifications via Whatsapp or Messenger.

The wep app was developed with a React front-end an a Sitecore headless CMS back-end.

Technology stack for a PWA

There is not a single technology for a PWA. The best technologies are React and other javascript based technologies, like VueJS/NodeJS. You can also consider a headless approach, where the back-end is a CMS and the front-end is a Javascript-based framework or other.

Developing your web app or mobile app

We have extensively reviewed web apps and PWAs, if you want to read more about mobile apps, you can read about it on our mobile app development page. Contact us to talk about your development needs.