TRINIDAT-WIKI

Progressive Web Apps

All about Progressive Web Apps

All about Progressive Web Apps

App yes or no? For companies that offer a lot of content on their site or operate an online store, this very question will arise at some point. But developing an app is expensive, plus it has to be updated regularly.

An alternative is the so-called Progressive Web App (PWA), which is installed directly from the website. There is no need for installation via the App Store, including approval processes. This makes the PWA simple and cost-effective. Another plus point is that the PWA is accessed via the URL just like a website. This offers additional SEO opportunities. Google already prioritizes PWAs over traditional websites or regular mobile apps. Users therefore come across it more easily, which increases the product’s visibility.

You have questions?
We have the answers!

We develop your Progressive Web App. Simple, fast, cost-effective.

Get advice now

How does a PWA work?

A Progressive Web App is basically a mobile website or web app, but specially programmed. This allows PWAs to be easily installed on smartphone, tablet, or desktop computers. They have a faster loading time than websites and have an offline function. Although classic web applications can also run browser-based on mobile operating systems such as Android or iOS, a PWA makes it easier for users. This is because the functions of the PWA adapt to the usage framework. Even if the end device and/or browser are not compatible with all of the application’s functions, the app can still be used.

A PWA is loaded in the background when a user visits the page for the first time. With just a few clicks, the progressive web app can be installed on desktop PCs and mobile devices such as smartphones or tablets. After that, PWAs work almost exactly like “normal” apps. For the user, the differences are usually not noticeable. With a web browser in full-screen mode, users do not notice that they are actually on a website. Well-known PWAs come from Trivago, Pinterest, and Booking, for example.

Progressive Web Apps-1
Progressive Web Apps-2
Progressive Web Apps-3

» A PWA is a cost-effective and simple way to benefit from the popularity of apps. The simple handling and fast loading time are plus points compared to classic websites. «

Christoph Spielmann,
managing director of trinidat


Progressive Web Apps vs. Native Apps

When deciding for or against a PWA, it is worth taking a closer look at “real” apps. Native apps are applications that are programmed and installed for a specific target platform. They only work on one operating system; the app must be adapted anew for every other platform. Native apps can only be obtained and installed via the respective app stores. This is particularly useful for apps with a subscription model or in-app purchases. Companies that want to be represented in an app store for image reasons or because they want to reach their target group there must therefore invest in a native app. The development of native apps is particularly suitable for complex game applications. The more interfaces are required, the more expensive the development. Native apps also have a high range of functions, which makes it easy to use Bluetooth and indoor geolocation, for example.

» A PWA is a cost-effective and simple way to benefit from the popularity of apps. The simple handling and fast loading time are plus points compared to classic websites. «

Christoph Spielmann,
managing director of trinidat

Popular browsers support PWA

Popular browsers support PWA

Progressive Web Apps are a type of application software that are delivered over the web and use common web technologies such as HTML, CSS, and JavaScript. This is the biggest difference between a PWA and a classic native app, and shows why developing a PWA is much more cost-effective. Basically, PWAs should work on all platforms that use a standards-compliant browser and run reliably on desktop and mobile devices. A PWA is therefore programmed to be deployed in a web browser. This works for Chrome, Opera, Edge, Firefox, and also Safari on iOS and iPadOS. However, there are some limitations. For example, the iOS browser Safari does not support all functions of the PWA. Adding it to the home screen and push notifications are only partially supported. Chrome, on the other hand, is quite different. Since Google promotes the PWA, Chrome supports all functions very well.


What are the advantages of a PWA?

With a PWA, companies kill several birds with one stone. First of all, it’s a cost-effective and simple way to benefit from the popularity of apps in general. After all, most people now prefer apps. The easy handling and fast loading time are plus points compared to classic websites. Unlike a native app, a Progressive Web App does not have to be actively searched for and installed in the App Store. Although users spend a lot of time in their familiar App Store and thus find new apps, when it comes to information, search engines are in demand. And Google has the lead in mobile searches worldwide, with a market share of 80 percent. Users therefore come across a PWA quite simply when they Google it. As soon as the user visits such a website, the browser displays a button that can be used to install the app. One click is all it takes for the PWA to run like a normal app on the mobile device.

Even if the user does not install the app, the special technology saves the PWA in the browser’s cache on the first visit. This means that the page runs faster with every future call. This is also reflected in the Google ranking. The PWA offer is therefore always worthwhile for companies and represents a typical win-win situation.

Another advantage: The PWA can be stored as an icon on the screen. Once loaded, all data is stored in the smartphone’s internal memory and functions even without an Internet connection. When the Internet connection is available again, the app synchronizes itself and downloads updates if necessary.

What are the advantages of a PWA? Hintergrund

What possibilities does a PWA offer?

A PWA is interesting for companies and website operators whose content or offers should also be available offline. The following examples show the possible uses of a PWA.

Provision of
forms:

Forms are excellent for collecting data from leads. With a PWA, this is also possible offline. This means that data can be collected anywhere, even at trade shows or events.

Interactive applications:

Small, simple quiz or game apps can be developed inexpensively with a PWA. They cannot compete with the complex gaming app from the App Store. But that’s not the point either. It’s more about attracting attention and generating leads with fun eye-catchers and interactive offers.

Offline catalogs and price lists:

Field sales and distribution depend on up-to-date information that they can present to their customers on site. Offline price lists and catalogs can be accessed on smartphone or tablet at any time. As soon as Internet is available, the catalog is automatically updated in the background.


How is a PWA created?

Creating a PWA is easier and faster than most people think. Any professional website can be extended with a PWA feature without much effort. This is because Progressive Web Apps are an addition based on the normal web technologies HTML, CSS and JavaScript. The prerequisite for this is Responsive Web Design, which guarantees automatic adaptation of web content to mobile devices. In order to offer such a responsive website as a Progressive Web App, a so-called Service Worker is still necessary, which forms the technical basis. Service workers extend web applications with important features of native apps such as offline capability, push notifications, background sync or performance acceleration. Service workers are pure JavaScript code that runs in a separate thread alongside the actual web app. In addition, there is a so-called app manifest that defines the look of the app as well as the icon. Good to know: The Service Worker and App Manifest functions required for PWA can be retrofitted to any responsive website.

For whom is a PWA suitable?

For whom is a PWA suitable?

The big plus of the Progressive Web App is its simple, cost-effective implementation. The PWA is ideal for companies that want to save on their budget or want to try out the possibilities of an app first. If a complex structure is not planned, then the development of a native app can usually be dispensed with anyway. A Progressive Web App can also be implemented quickly. It does not take long from the idea to implementation. Companies can therefore immediately test their product with the target group and adapt it if necessary.

Christoph Spielmann, trinidat Managing Director

Christoph Spielmann, trinidat Managing Director

Want to learn more about Progressive Web Apps?

Christoph Spielmann looks forward to your call or e-mail. Find out now in a free consultation if a PWA is right for you.


This is a required field
This is a required field
This is a required field
This is a required field

More contributions from our wiki