"The new rb2 website is a Progressive Web App. For us, the main reason to switch was the speed that it offers."
Zhihui Zhang (GK), Technical Lead
Progressive Web Apps
The future of web development
The possibilities of Progressive Web Apps
The Progressive Web App (PWA) is a new trend in the web development community. And rightly so: it brings less development time, a better user experience and a native app experience, but in the browser. It is a mix between a mobile application and traditional web pages. In this blog, you can find out about the options that PWAs offer and the technique behind them.
Service Workers: the power behind Progressive Web Apps
Users can easily access Progressive Web Apps through their browser. A native app must first be downloaded from an app store, whereas with a PWA this is not necessary. In the case of e-commerce, it removes many steps from the buying process: searching for an app, downloading it and granting access.
Another advantage of Progressive Web Apps is that pages can be loaded and consulted offline, provided they have already been requested once before. This is made possible by Service Workers, which is also at the core of Progressive Web Apps. It is acts as a proxy between the web app and the network. The purpose: to receive requests between the app and the remote network. It works in the background, even when the website (PWA) is not consulted.
Service Workers work on a different thread so that the main thread does not get overloaded. This has many advantages, such as the ability to load animations instantly, scroll smoothly and navigate quickly. Users usually only experience these benefits in native apps.
Better user experience and less development time
AliExpress discovered a 104% increase in conversion rates since they switched to the Progressive Web App. In addition, visitors now view twice as many pages per session and the session duration increased by an average of 74% across all browsers. It therefore appears that switching to a PWA leads to an improvement in the user experience. This is probably due to the speed and ability to consult pages offline. A PWA also gives the user the option of adding the app to their home screen. This makes the app even easier to access and lets you send push notifications to users.
Besides offering many advantages for users, it offers a great advantage for developers: less development time. Usually, you have to write codes for different devices, but with a Progressive Web App this is not required. This gives you more time for developing the app, since you then spend less time making adjustments and fixing bugs.
In addition to being incredibly fast and the ability to consult them offline, Progressive Web Apps offer several options such as:
- sending push notifications;
- Splash Screen (page displayed before the main page);
- geolocation (e.g. for geo-fencing applications);
- access to media such as audio, video and camera;
- handling online orders, loyalty programmes and customer information.
A Progressive Web App actually combines the best of both worlds: the offline operation and the options that an app has (such as push notifications), combined with the fast accessibility of a traditional web page.
The new rb2 website is a Progressive Web App. For us, the main reason to switch was the speed that it offers. Pages can also be cached in parts. For example, the header and footer remain fixed and only the rest is reloaded. The main purpose of our website is to inform, and because the content is loaded quickly (i.e. straight away), we can do this optimally.
The framework that we use to embed the Progressive Web App is called Nuxt.js; a framework for creating universal Vue.js applications. This is one of the best techniques for building Progressive Web Apps. However, if you don't have experience with Vue.js, but you do have experience with React.js, then Next.js would be a logical choice.
If you found this blog post interesting and are intrigued about what a Progressive Web App can do for your organisation, we would be happy to discuss the options and help you with the technical implementation.