Our agency partner giftGRÜN has used WordPress to build a progressive web app (PWA for short) for the University Hospital RWTH Aachen, which supports the onboarding of new employees. We spoke to Patrick Heinker about the advantages and disadvantages of PWAs versus websites and native apps.
How a progressive web app works
Patrick, how exactly does a PWA work and what about data storage?
The content is maintained in WordPress and output via normal templates. A ServiceWorker provides the offline functionality. When the page is initially opened, the ServiceWorker downloads a zip file with all the pages, which is generated on the server side.
If a page is now called up, the page already in the cache is displayed. And the ServiceWorker takes care of the update in the background so that it shows new content on the next visit if something has changed. Optionally, you could also reload the page after an update, but this was not necessary for our use case.
Data is stored completely offline, with an Internet connection only required for videos and external content.
PWA vs Native App
What are the differences but also the advantages compared to native apps?
Native apps are platform-specific, often complex and therefore expensive to implement. They also have to be distributed via the official stores to achieve a wide reach. PWAs, on the other hand, can be installed at the touch of a button when visiting the website.
However, Apple is still a little behind in supporting PWA functionalities. But it's nothing new among web developers that Safari doesn't support things that have been commonplace in other browsers for years...
How does the interaction of the Progressive Web App with WordPress?
We use WordPress for data maintenance, but also for the templates. It's a completely normal website, with the only difference being that the content is made available offline via a JavaScript ServiceWorker. And that it behaves almost like a native app.
There is also the option of using the WordPress REST API and rendering everything on the client side, as would be usual in native apps. For our use case, however, we have only seen additional effort here, which hardly brings any benefit.
Implementing a progressive web app with WordPress
What approaches are there if you want to implement a progressive web app with WordPress?
There are several plugins that can be used to transform a page into a progressive web app at the touch of a button and with a few settings. There are also push notification services that can be used to inform all blog visitors about new posts. However, these ready-made plugins are more intended to make a normal blog offline-capable and to preload specific files.
After playing around with some of these plugins, we went for our own solution. We built our functionality separately from the plugins, for example, to enable complete loading of the page content via a server-side generated zip and to be more flexible in terms of function customization. Push notifications are usually mapped via paid services, but you can just as easily build them yourself.
PWAs: Compatibility and data protection
What are the potential pitfalls and how did you solve them? And what about the issue of data protection?
The usual thing with web development: every browser ticks differently and it has to be tested extensively on all devices. Apple refuses to fully support PWA functionality and has its own Apple-specific meta tags to make the app work, which deviate from the standard.
The caching model should be selected to suit the use case. ServiceWorkers can output cached pages in milliseconds and update them in the background. However, if I am on a news page, the user may prefer to see a small waiting bar until the latest content is loaded.
Data protection was one of the main reasons for us to choose a PWA. The user's content and learning progress are kept completely offline. The server never sees which user is accessing what, as there are no logged-in users. Whether a new employee has worked through everything or has not even installed the app is therefore impossible to track.
Advantages and disadvantages of the systems
How do you decide for each customer which technology is best suited for such a project?
There are applications that can only be implemented via a native app. For example, if a customer absolutely wants to have push notifications on an iPhone, then there is no other way than natively. On the other hand, the production of PWAs is also significantly cheaper than a native app due to the use of web technologies and the absence of the entire store handling. Of course, the available budget also plays a decisive role.
Do you have any other PWA projects in the pipeline that you can tell us about?
A lot - but we don't want to reveal them yet 😉 Just this much: great things can also be done with PWAs in the e-commerce sector.
A few words about you and your agency?
giftGRÜN is the digital agency within the GRÜN Group. Our group of companies is the leading provider of donation and member management systems in Germany. Most of our projects involve setting up a complete system for our customers, i.e. connecting our ERP system with websites.
We do a lot of interface work and also develop our own WordPress themes. Our team consists of designers, front and back end developers and project managers. Our favorite host is of course from Münster 🙂
