Progressive web apps (PWA, for short) are the latest trend in the app business because they combine the advantages of a website with the advantages of a mobile app. Some think that they are the app format of the future.
In this blog post, we answer the top questions on the topic.
In order to answer this question, let’s first take a moment to look at the different app formats that exist. There are the normal apps that you can download as a smartphone user in the App Store. These are called native apps because they were the first of their kind and they are written in the programming language specified by the operating system manufacturer. For Apple this is Swift, for Android Java is used. There are also hybrid apps that look like native apps, but are built with the help of modern web technologies such as JavaScript and CSS, and thus run independently of the operating system on any device. And, there are web apps that are launched from the browser – they look like a classic desktop application, and they have various interactive features.
Progressive web apps are the latest in development and work similar to hybrid apps. However, PWAs can be installed directly from a website and are available after installation in a reserved web container of the mobile device. They run like a website or a web app with the help of web technologies, but look more like an app to the user. Why? Because they have native functions such as push notifications, GPS or the camera can be accessed, and because you can add their icon to the home screen like a normal app. Unlike native and hybrid apps, progressive web apps do not need to be downloaded from the App Store. In simple terms, we can say:
A progressive web app (PWA, for short) is a website that has the functions of an app.
Progressive Web Apps are run with the help of web technologies inside of a web container that is stored on a mobile device. They can be launched like a normal mobile app. PWAs are installed through an installation routine which is usually executed via the corresponding website.
PWAs are created using web technologies such as HTML, CSS and JavaScript. Open Source applications such as ReactJS or Ioniccan be used free of charge. These are frontend frameworks in which certain elements of the graphical user interface are already set up.
It is also possible to convert existing websites to PWAs. Tools such as the PWABuilder from Microsoft help with this. A website built with WordPress can be converted into a PWA using plugins such as “Super Progressive Web Apps”, “PWA” or PWA for WP & AMP.
Progressive Web Apps run in the browser like a normal website, but do not require an internet connection after the first installation.. Unlike normal websites, Progressive Web Apps can control the native functions of the mobile device (for example, push notifications, camera or GPS) and thus enable more interactions.
Unlike web apps, Progressive Web Apps can also be used offline. It is also possible to offer Progressive Web Apps in the App Store. This is not possible with web apps.
A hybrid app is opened in a browser-like container, but in terms of usability, it acts like a normal (native) app. A Progressive Web App can also be accessed through such a web container and can be used like a native app, but, in addition, you can access PWAs in the same way that you would a website. While hybrid apps are only available through app stores, PWAs can be downloaded independently, as well.
All four formats are connected by the fact that they are browser-based and therefore work platform-independent. While developing a native app always requires at least two versions (one for Android and one for iOS), web apps, hybrid apps and progressive web apps require only one application.
Progressive Web Apps have many advantages – which we are going to summarize here. When making the comparison to native apps, the main advantage is that you can develop and maintain Progressive Web Apps quickly and cost-effectively – you don’t need two versions for different devices. A PWA is executed via the browser and thus works independently of the platform.
Unlike a website and a web app, you don’t have to be online to use a PWA. Once downloaded and installed, you can use it offline.
In addition, Progressive Web Apps allow more interactivity compared to websites and can access the native functions of the phone (such as push messages, camera or GPS). In contrast to many native apps, Progressive Web Apps require significantly less storage space (often only a few hundred KB compared to several MB) and impress with reduced loading time when compared to websites. This makes it possible for your customers to surf fast and to interact faster, without any wait time – even videos and animations don’t disrupt smooth scrolling.
The fact that there is no need to make Progressive Web Apps available in app stores offers the advantage of saving time and costs associated with registering an app with the Apple, Google and other distribution platforms: You are free of the terms of the app stores, don’t have to wait until an app has been officially reviewed and approved and you can bypass the commission payments that are incurred for apps and in-app purchases.
But, you can offer a PWA there if you want. There are good reasons for that too. Customers are used to searching for apps in app stores. If you, yourself, want to use this form of outreach, then you should definitely offer your Progressive Web Apps in the Apple App Store, Google Play Store and/or Microsoft Store as a hybrid app.
All advantages of Progressive Web Apps at a glance:
Of course, for as many advantages as there are to Progressive Web Apps, there are also a few disadvantages. These are not fundamental arguments against PWAs, in our opinion. We would just like to mention them to you briefly here, however: On the one hand, compared to native apps, PWAs cannot access all of the functions of a mobile device and there are some browsers that do not (yet) fully support PWA. On the other hand, PWAs are still largely unknown and need an explanation if you do not offer them in the App Store and only via the website.
But: It really is not difficult to install a PWA and once these few clicks have been completed, the PWA can be launched by clicking on the icon on the Home Screen just like a normal app on your phone or tablet. The cost-effective creation and maintenance, independence from app stores, fast loading times and the other advantages just mentioned make Progressive Web Apps an innovative alternative for classic websites and native apps.
The potential uses for Progressive Web Apps are extremely diverse. PWAs are especially recommended for smaller companies that do not have a large budget for the development and maintenance of websites and apps. Instead of having to develop a website, an iOS app and an Android app, it is sufficient to create and maintain a PWA.
Progressive Web Apps are also useful whenever your content should be available offline – for example, you can create a city guide with a PWA, on which POIs are stored and can be used for route planning. Even for large companies that already have native apps for their customers, Progressive Web Apps are an attractive technology. Among other things, a PWA can be used to provide employees with helpful tools for forms or an intranet with a push function for new messages.
The app market is, up to now, not dominated by Progressive Web Apps, but there are some companies that are already using the new technology, including Pinterest, Spotify, Starbucks, Uber and ZDF.
Many start out by running parallel tracks, so they will offer a Progressive Web App initially as a beta version – running it parallel to their “real” websites and apps. For example, to get to the PWA on ZDF, enter pwa.zdf.de in the browser. Depending on the browser and device, there are various ways to install the PWA – on iOS, this is done using the Safari browser, for example, via the Share menu and the “to Home Screen” function, on Android devices and the Chrome browser via the “Go to Home Screen” function. On the desktop you start the app installation via the “plus” or “download” icon.
On both desktop and mobile, many browsers allow you to install and use PWA, including Chrome, Edge, Opera Mobile, Safari, and Samsung Internet. With these browsers, you can install the PWA via functions such as “Add to Home Screen”. Then you can open the PWA via the icon on the Home Screen and use it like an app (without seeing the browser and a URL). Firefox, on the other hand, does not support this.
However, the PWA can be used here, at the very least, like a normal website. In addition, there are differences in the native functions of the browsers: Not all browsers support all functions that are theoretically possible in a PWA: For example, a PWA used via the Safari browser cannot send push messages.
If you do not have a website yet, you should plan about one to three months for the development of a PWA with our help – every step in the process is included here: from the first strategic consultation to the technical implementation. This process is completely different if you already have a website, however, and want to expand on it with the additional functions of a PWA. In this case, depending on the scope, a time frame of about one to four weeks is realistic.
If you do not already have a website, a PWA is programmed like a normal website – based on web technologies such as HTML and JavaScript. For this, you can use Open Source frameworks such as ReactJS or Angular in combination with Ionicor Mobiscroll, as well as all of the other types of website builder software and content management systems such as WordPressor Drupal.
If you want to convert your existing website into a PWA, there are also a number of tools or plugins to help you.
With the free PWABuilder from Microsoft, for example, you can enter the URL of your website and have it checked for free.
It will show you which requirements have already been met and what you still have to adjust. If you want to convert your WordPress-built website into a PWA, you can use plugins such as “Super Progressive Web Apps”, “PWA” or “PWA for WP & AMP”.
Basically, there are three requirements for transforming a website into a PWA:
1. Your PWA must have an https URL
2. You need a “Web App Manifest”, which is a file that contains metadata about your app
3. You need a so-called “Service Worker” that makes the contents of your PWA available offline
And if you think now: This all sounds great, but I would like professional support in the creation of a PWA … Then give us a call!
We are happy to advise you on which app format would be best for your business goals and to implement your wishes using the latest web technologies.
From product updates to practical tips on building with Zoho's developer platforms, our Know How section keeps you current on everything Zoho, so you always get the most out of your setup.
With us, you have one partner for all your digital needs. From strategy and consulting to development, marketing and ongoing support, we help you build, connect and optimise your digital systems. We work with you from the initial idea through implementation and beyond, supporting your digital transformation every step of the way.
codafish ><> your digital agency
+1 888 9263234
hello@codafish.netFeel free to contact us for a free initial consultation. We’d be happy to hear from you!
The data provided will be transmitted in encrypted form and treated in accordance with the data protection law. You can find our data protection information here.
From strategy to SEO, development and support – let's build it together.
Don’t hesitate to call us for a free initial consultation. 30 minutes, with no obligation. We’ll be happy to speak with you! +1 888 9263234
