August 30, 2017 3 minute read

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?

Introduction

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.

Image courtesy of Jacky

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.

Further considerations

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

Sergej is a Senior Developer working at SAP. His interest lies mainly in front end programming in various areas.

6 Comments

You must be Logged on to comment or reply to a post.

Douglas Cezar Kuchler

September 1, 2017 at 3:04 am

Sergej, it's really interesting, thank you for sharing!

I've opened your demo on my Galaxy S7 Chrome v60 and the app didn't ask anything related to be added to the initial screen. I've used the Chrome menu and added an initial screen icon. After that I could successfully launch the PWA from the initial screen even with my phone on offline/plane mode. Do you know why I wasn't automatically asked to

Do you know why I wasn't automatically asked to create the icon? If it's common maybe we should design a button or something like that on our apps to offer this option to the user.

I've also finished some days ago to build an app that was meant to be used off-line , so I've used Apache Cordova to do so. I'll work in transforming it to a PWA.

Thank you for your time and effort sharing this,

Douglas

Michael Lichtinger

September 5, 2017 at 4:50 pm

Hi Douglas,

have a look at these link https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

One of the criteria for displaying the banner is the following:

Is visited at least twice, with at least five minutes between visits.

BR
Michael

Mauricio Pinheiro Predolim

September 5, 2017 at 1:20 pm

Awesome post! Txs!

Sergey Chebotarev

October 29, 2017 at 9:11 am

Hi, Siarhei

Thanks for you post. After read it, I tried to make my Fiori-like application as PWA.

But when I use custom component loaded in Component Container.

sap.ui.getCore().attachInit(
    function(){
        document.getElementById("splash-screen").remove();
        new sap.m.Shell({
            app: new sap.ui.core.ComponentContainer({
                    height : "100%",
                    name : "mobui.mobile.inspection",
                    async: true
                })
        }).placeAt("content");
    }
)

I get error

I think this error is caused by synchronous loading Component

Tell me please, how solved this problem

Mehmet Arziman

November 30, 2017 at 6:42 pm

Hi Sergey,

Have a look at this:

https://blogs.sap.com/2017/11/30/ui5ers-buzz-19-lets-be-progressive-convert-an-openui5-application-into-a-progressive-web-app/

Mehmet Arziman

Sergey Chebotarev

December 3, 2017 at 6:56 pm

Hi, Mahmet.

Thank you very much

UI5ers Buzz #13: Build a Progressive Web App with OPENUI5

Introduction

OpenUI5 and PWA

Further considerations

Assigned Tags