mittl medien | Webentwicklung in Stuttgart

Progressive Web App
- essential for every website?!

PWA serves as another key technology to increase the success of a website

PWAs are Apps,
which are accessible to everyone

The basic principle of a Progressive Web App - PWA for short - is that it can be used by any user, regardless of operating system and browser. Progressive stands for barrier-free, simple and easily accessible - for a free web. Accessibility and accessibility seems to become more and more important on the web. The following points make it clear that the trend Progressive Web App is justified and has a future.

Progressive Web App (PWA) for websites

SEO advantage over a native app

Search engines like Bing and Google index Progressive Web Apps

A Progressive Web App is based on a responsive website and is enriched with new technologies like the Service Worker. Since the PWA is accessible like a web page, it can also be indexed via Google and thus be found. A PWA can also be created from any good mobile website. Basic requirement is a good usability, because a PWA should give the feeling of a native app.

What does a Progressive Web App need?

A PWA is characterized by different technical features

As mentioned above, the service worker is the technical hub and the heart of a PWA. The website must be transmitted via the HTTPS protocol, i.e. SSL encryption should be in place, otherwise the Service Worker will not be registered. The Service Worker handles all requests of the Progressive Web App. This acts as a kind of proxy server. In addition to the Service Worker, a Web App Manifest should exist in order to install a PWA. The PWA manifest tells the browser that the PWA is a Progressive Web App, which icons are available, where the scope of the app is located and what color the splash screen is. You can also specify whether the app should be displayed as a full screen (fullscreen), standalone application (standalone), standalone application with minimal UI elements (minimal-ui) or the normal browser (browser). Further detailed features can be defined in the manifest.

The IndexedDB (for client-side storage of structured data) available in the browser can be accessed and used very well via the Service Worker or PWA to store offline data. In addition to data storage, cache access is another component that should be used with every PWA. In a simple PWA, the IndexedDB is usually not used, but the offline cache in the browser is. If you want to store more complex data structures, alternative databases such as CouchDB are available.

No App Store or Google Play Store is required for a PWA

Since Progressive Web Apps are installed via the browser, it is not necessary to go through the time-consuming process of publishing an app and adhere to the guidelines. On the one hand, publishing an app in the store can take a lot of time, but on the other hand, you have to allow a certain amount of time until the app appears in the App Store or Google Play Store. In addition, the distribution of Native Apps incurs proportional costs for the sale. However, one would have to think about other monetization methods of a PWA to make money with a PWA, because a direct sale via the App Store is not possible. The already well supported Payment Request API can help to ask the user to pay for certain features. Placement of advertising in the App could be another source of income, but it will make the Web App less attractive.

However, it may make sense to use the Google Play Store as an additional marketing channel.

Basically every website could be a PWA

The speed often determines how long a visitor stays on the website. PWAs are very fast due to cache capabilities. Since Progressive Web Apps do not need to be installed, the visitor usually only indirectly notices that it is a PWA. In the console of the browser you can see how many pages have already registered or installed a service worker. To check whether it is a PWA, the browser provides Google Chrome "Lighthouse". A correct manifest is a basic requirement for a PWA.

Offline App

Another charm is the offline availability of the Progressive Web App, since the visitor can still consume the content of the website even if the network is not available.

Who would want a visitor to find a browser window without content instead of the website? This is individually adjustable according to the Internet connection, whether the visitor finds the stored data in the cache of the browser or accesses the data of the server.

Defining the cache strategy of a PWA

Before a Progressive Web App is implemented, the data to which the website visitor has access should be defined and determined in advance. Offline or Network First specifies which content, content areas or images should be displayed. It is always possible to access the cache.

App can be installed

Your website is out of sight when the visitor closes the browser tab or window. In order to maintain a more intensive customer relationship, the installation of a PWA on the desktop or smartphone means that your company is still present.

Push Notifications

The often hated, but also much loved feature "Push Messages" certainly offers added value to an app. If used sensibly, the conversion rate can be increased significantly. With PWA there are two types of push messages, first when the app is open (Foreground Message) and second when the app is closed (Background Message). When updating the app, push messages can be helpful to inform the user about the update. If you want to send push messages to larger groups of users, Firebase Cloud Messaging is a good choice. Firebase is already GPDR-ready regarding DSGVO.

Background Synchronisation

In order to synchronize data with the user on the mobile device different techniques can be used. One of the newer methods is background synchronization, which unfortunately is not supported by all browsers. The fallback of the background synchronization is a status check of the browser on a network connection, so that the data can be synchronized. This is how the data synchronization of a Progressive Web App takes place in the normal process.

Not yet enough reasons for a PWA

On PWA Stats finds enough reasons why one should not do without a PWA. Examples of well-known companies can be found under PWA.BAR or under . Big companies like Debenhams, Forbes, Financial Times and Starbucks are already living it, smaller companies are just discovering the advantages of a PWA.

PWA is (not yet) the egg-laying wool-milk sow

Unfortunately not all features are supported by all devices. Only newer browsers support the service worker, which is required for a PWA. Apple is still a bit behind with the implementation of special features, but has followed up with the last iOS updates. Push Notifications are not yet supported by Apple with the available standard API. Also the installation of the PWA on Apple devices under iOS is currently only possible by manually adding "Add to Homescreen". In contrast to Android, iOS does not display an installation note.

Costs of the App

No matter if PWA, Hyprid or native, it costs money to implement these apps in a reasonable way. However, depending on the scope and features a Progressive Web App can be cheaper.

Meanwhile, companies are using apps on both systems to benefit from the advantages of a Progressive Web App and at the same time have a native app on the market. Not every user is willing to install an app. Progressive Web Apps do not have to be installed to take advantage of offline availability and website speed. Meanwhile, there is a kind of inertia in the installation of apps, which is due to data protection on the one hand and the large number of apps on the other.

Crucial question -
Native App oder PWA?

The balance is based on the goal to be achieved and how it is to be implemented. Any website can benefit from a Progressive Web App, so it is not impossible to provide a native app and a PWA at the same time. This way you can use all the advantages. Google Maps is available e.g. as Native App as well as PWA, but at first sight there is no difference.

The way to your own Progressive Web App

You are thinking about the realization of a Progressive Web App? Would you like to benefit from the advantages such as speed, offline capability and / or push messages, as well as increase the time spent on the website?

The reasons for a PWA can be different. One customer wants to spread his news via push messages, the other one sees the advantages in performance and offline capability. Since there are basically no disadvantages, there is nothing to be said against implementing a Progressive Web App. The scope can be individually tailored to customer requirements and budget.

Joomla App - Joomla PWA

Besides PWAs, I have developed an extension for the CMS system Joomla that transfers the website into a Joomla app. The Joomla PWA can be installed, opened with the "Protocol Handler" feature and much more.

Progressive Web App - PWA
Development from Stuttgart

As a professional web developer from the Stuttgart area, I advise you on the implementation of the various possibilities of a Progressive Web App, which is completely geared towards your goals and wishes.

More articles about PWA (Progressive Web App)

15 tips for improving a PWA (Progressive Web App) Read more...

My presentation at the JoomlaDay in Vienna "Show me your Offline Page (PWA)" Vienna I will show the creation of a Progressive Web App using an example. Read more...

Realization of the Progressive Web App with push messages in Joomla for a commune.Read more...

Speaker at the Digital Breakfast in Stuttgart "PROGRESSIVE WEB APP (PWA) EINE ALTERNATIVE ZUR NATIVEN APP? Read more...

The scope of the Progressive Web App can be defined when the service worker is registered. Read more...