UI5ers Buzz #13: Build a Progressive Web App with OPENUI5
With Chrome 57, Progressive Web Apps (PWA) have been grown into a mainstream mobile web technology. The idea is simple and attractive – allow websites to be like the native ones, but without the need to install from the Play Store.
UI5 is the main front end technology at SAP and its partners, with stress on fast UI implementations for server-side applications. Now, after PWAs technology has arrived at production status, we need to answer a question: is UI5 compatible with PWA and can we build Progressive Web Apps with it today?
Development of native mobile applications is expensive, requires special skills and special deployment processes. Most of Play Store applications are homogeneous, implement a single user story and usually have a purpose to achieve maximal possible target auditory.
That makes creation of mobile business applications a challenge for developers and managers, because a typical business process implementation consists of several highly specialized and customized applications with a predefined and limited number of users. Only limited number of business scenarios can justify the resulting price overhead of a single application per a user.
PWAs allow to overcome these limitations and to combine mobile and desktop development into a single process – using the same skills, tools, and deployment as well as support channels.
OpenUI5 and PWA
You can start building responsive UI5 PWA applications right now. PWA is not a special framework but a combination of existing Web technologies: Web App Manifest, responsive Web Apps, and service workers for offline persistence. Google Chrome combines all the three and integrates them into Android OS as a single concept. PWA is framework independent and works practically with any modern Web UI framework including OpenUI5.
To illustrate it, we have created a sample UI5 ToDo application. We will not go into technical details, you can find the source code and description in GitHub. In general, making a responsive Web application to a PWA is simple:
- Specify meta tags in the HTML header.
- Create and link a Web App Manifest.
- Create icons and a splash screen.
- Add a service worker.
- Check if it works.
It is a short list of simple and straightforward steps. A mobile application can be adapted as a PWA in a matter of minutes. When you open such am application on a mobile device, Google Chrome will propose to install it on the home screen, and, when installed, it will be indistinguishable from any other full screen native app.
There are some limitations though. Despite OpenUI5 did a good job switching to asynchronous loading of resources recently, it still loads
messagebundle.properties files with standard UI texts synchronously. An OpenUI5 PWA application should replace standard UI texts for dialog buttons, input placeholders etc. with specific ones. The
sap.ui.model.* library does not have any fail-and-retry smart handlers for application data, and a special logic is needed for request handling in offline situations.
PWA concept just opens the door for HTML apps into the mobile world. Our sample shows how to load and store the code on a device by request, but this alone does not make such an application 100% mobile until it is consequently built following the offline-first mindset. Still, there is a way to go and there is a lot to learn, but the perspective is very promising now.
Previous Post: UI5ers Buzz #12
Talk to you soon,
|Sergej is a Senior Developer working at SAP. His interest lies mainly in front end programming in various areas.|