Our agency partner giftGRÜN built a Progressive Web App (short: PWA) with WordPress for the University Hospital RWTH Aachen to support new employee onboarding. We talked to Patrick Heinker about the benefits and limits of PWAs versus websites and native apps.
How progressive web apps work
Patrick, can you tell us about how a PWA works and what do you do about data management?
The contents are maintained in WordPress and output via normal templates. A Service Worker provides the offline functionality. When the page is opened initially, the Service Worker downloads a zip file containing all the pages generated by the server.
Now when a page is called up, the already cached page will be displayed. And the Service Worker takes care of the update in the background so that, if anything has changed, the new content will be displayed on the next visit. Optionally, you could also reload after an update but that wasn't necessary for our use case.
The data storage is completely offline, an internet connection is only required for videos and external content.
PWA vs native app
What are the differences - and advantages - compared to native apps?
Native apps are platform specific, often complex and thus expensive to implement. In addition, they have to be distributed via the official stores to achieve a large reach. PWAs, on the other hand, can be installed at the touch of a button when visiting the site.
However, Apple is still a bit behind with the support of PWA functionalities. But that Safari doesn't support things that have been common in other browsers for years is nothing new for web developers.
How do progressive web apps and WordPress work together?
We use WordPress for data maintenance, but also for the templates. It is a normal website, with the only difference that the content is made available offline via a JavaScript ServiceWorker. And that it behaves almost like a native app.
There's also the option to use the WordPress REST API and render everything client side, as with native apps. For our use case, however, we couldn't see any real benefit of doing so and it would've simply meant more work.
Build progressive web apps with WordPress
Where should you start if you want to implement a progressive web app?
There are some plugins that can turn a page into a progressive web app with the click of a button and a few settings. There are also push notification services that can be used to inform all blog visitors about new posts. But these ready-made plugins are rather intended to make a normal blog offline capable and to preload targeted files.
After playing around with some of these plugins, we decided to go with our own solution. We built our functionality separate from the plugins to allow, for example, complete loading of page content via a server-generated zip and to be more flexible in feature customization. Push notifications are usually mapped via paid services but can just as easily be built in-house.
PWAs: compatibility and data protection
What are the potential pitfalls and how did you solve them? And what about the issue of data protection?
As always with web development, every browser ticks differently and the PWA has to be tested extensively on all devices. Apple refuses to fully support PWA functionality and again has its own Apple-specific meta tags to make the app work that deviate from the standard.
The caching model should be chosen to match the use case. Service Workers can output sites cached in milliseconds and refresh in the background. But if I'm on the 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. Users' content and learning progress are kept completely offline. The server never sees which user calls up what as there are no logged-in users. It's therefore impossible to track whether a new employee has worked through everything or has not even installed the app.
Pros and cons of the systems
How do you decide per customer which technology is best suited for such a project?
There are applications that can only be implemented via a native app. If a customer absolutely wants push notifications on an iPhone, for example, then there's no other way than native. On the other hand, building PWAs is also significantly cheaper than a native app due to the use of web technologies - and the fact that there's no need for all the store involvement. Of course, the available budget also plays a crucial role.
Do you have any other PWA projects in the pipeline you can tell us about yet?
A lot - but we don't want to reveal them yet 😉 Just this: 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 market-leading provider of donation and member management systems in Germany. Most of our projects are about setting up an overall 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 backendlers and project managers. Our favourite hoster is of course from Münster 🙂
