Skip to Content
Author's profile photo Siarhei Ulasenka

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:

  1. Specify meta tags in the HTML header.
  2. Create and link a Web App Manifest.
  3. Create icons and a splash screen.
  4. Add a service worker.
  5. 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.

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.

 

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Douglas Cezar
      Douglas Cezar

      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

      Author's profile photo Michael Lichtinger
      Michael Lichtinger

      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

      Author's profile photo Mauricio Pinheiro Predolim
      Mauricio Pinheiro Predolim

      Awesome post! Txs!

      Author's profile photo Sergey Chebotarev
      Sergey Chebotarev

      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

      Author's profile photo Mehmet Arziman
      Mehmet Arziman

      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

      Author's profile photo Sergey Chebotarev
      Sergey Chebotarev

      Hi, Mahmet.

      Thank you very much