Progressive Web Apps (PWA)

Experience Success with Progressive Web Apps

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.

Mobile app for your website?

With Ionic you can have interactive apps programmed in a short time and at low cost. Read More

Mobile app for your website?

With Ionic you can have interactive apps programmed in a short time and at low cost. Read More

Mobile app for your website?

With Ionic you can have interactive apps programmed in a short time and at low cost. Read More

The 11 most frequently asked questions and their answers about Progressive Web Apps

What is a Progressive Web App?

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.

How do Progressive Web Apps work?

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.

What are the differences between Progressive Web Apps and other technologies?

  • Websites:

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.

  • Web Apps:

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.

  • Hybrid 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.

And what does PWA have in common with these three formats?

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.

What are the advantages of a Progressive Web App?

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:

  • browser-based
  • platform-independent
  • expansive reach
  • fast development
  • easy to optimize
  • cost-effective
  • low storage requirements
  • reduced loading time

What are the disadvantages of Progressive Web Apps?

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.

What are Progressive Web Apps for?

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.

Which popular Progressive Web Apps are there?

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.

Which browsers support a PWA?

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.

How fast can a Progressive Web App be developed?

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.

How is a progressive web app created?

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!

Mobile app for your website?

With Ionic you can have interactive apps programmed in a short time and at low cost. Read More

We, at codafish, are your competent partner for Progressive Web Apps

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.

Would you like to learn more with no obligation? Simply fill in the contact form or call us directly: 00800 2632 3474

Dive into our World

Here is where we inform you about exciting digital trends and explain how you can use them in your business. In addition, we offer you a closer look at our work as a digital agency. Thank you for your interest. Thank you for your interest.
wordpress blog create blog

How to create a WordPress blog

Greetings to you, the current reader of our blog article! Are you also on the brink of starting your own blog and adding your unique ...
Read More
Pincore demo

Your comprehensive Pimcore demo

In the web industry, this topic is unavoidable: Pimcore. Everyone is talking about it, but you might be asking yourself: what is Pimcore and how ...
Read More
Live chats​ Chatbots

Live chat vs. chatbots – how do I pick what’s right for me?​

Live chat or chatbots? In this article, we will bring you up to speed on all the advantages and disadvantages of both options and suggest ...
Read More

We call you!

Are you planning a new digital project and you have questions about our services? Complete this form or call us at +1 888 9263234
  • This field is for validation purposes and should be left unchanged.
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.
Error: Embedded data could not be displayed.