You can build Progressive Web Apps with any HTML/JS framework and OpenUI5 is not an exception. This example shows how to easily build a simple PWA with
The demo is a simple TODO list application. Add new tasks with the input field at the bottom of the screen. The tasks are stored locally and the application works online as well as offline without any difference. You may install it on the home screen of a touch device like a native full screen application.
This sample is a static HTML application. There are different possibilities to test it locally:
Clone this repo and:
- with Chrome Web Server: Run the web server from the
- with Node.js: Run
npm run serve
- with a trial SAP Cloud or any other Cloud-Foundry account: Change the application name in the
manifest.ymland upload the app with
This sample is a simple one-page OpenUI5 TODO application with
index.html as a starting point. Use it as a template for your own application. The
todo-app.js contains the logic. Replace it with something more useful.
A service worker is a prerequisite for a PWA. The main purpose of it is to cache application resources (and data) for the offline use on mobile devices. One can use different caching strategies. The
service-worker.js template in this sample caches application specific resources during the
install event and OpenUI5 libraries during the
fetch event, on the first network response. This scenario is neither complete nor ideal and should serve just as a starting point example.
A set of good looking icons is an essential part of a PWA. The
icons folder contains a minimal set of images.
Do not forget to include PWA related meta tags to the HTML head of your application. Use
index.html as a reference.
Create a Web App Manifest (
manifest.json) and reference it in the HTML header of your applications index.html. For more details, see the Web App Manifest documentation.
After all the steps above are performed, run the application within a Chrome Desktop browser and run a PWA audit in Chrome devtools. If you see an image like below, everything is OK and you can submit your application.
OpenUI5 still uses synchronous XMLHttpRequests to load
messagebundle.properties files with default UI labels and text. Due to the fact that a service worker cannot handle synchronous XHR, the texts cannot be cached and may be unavailable in offline mode. You need to provide custom labels for such default texts.
This sample uses the LocalStorage for persistence. Caching of application data and implementation of offline CRUD patterns are not considered here.