Orienteed logo en la cabecera
Go to blog

Converting the Oslo React into a fully functional Progressive Web Application

by Francesco Schettini, March 26, 2020

We have taken the sample Watson Content Hub Oslo React web application and converted into a working Progressive Web Application including the main and winning characteristics of a PWA:

  • Installable on home screen
  • Offline mode
  • Push notifications

What is Watson Content Hub Oslo React?

To get more information about Oslo, follow this link. IBM Watson Content Hub is a new and very interesting cognitive SaaS (Software As as Service) CMS built by IBM and soon be part of the portfolio of Centerbridge.

A screenshot of Oslo:

Screenshot-2019-05-14-at-11.31.21-300x268.png 

A screenshot of Watson Content Hub and the way you can update a content:

Screenshot-2019-05-14-at-11.29.13-300x142.png

Why we need a Progressive Web Application?

Well, there is so much excitement lately about PWAs. Without entering into the details I just drop here a table can exactly show the point of why PWA:
Screenshot-2019-05-14-at-11.13.13-300x106.png

We have already experimented the impact of PWA: much better User Experience (especially on e-commerce) and so better Conversion Rate!  It is really worth it!

 

What we have done on top of Oslo React?

We added the critical and most interesting PWA functionalities on top of Oslo React. We our development the application could:

  • install Oslo on home screen of a mobile and/or on a desktop of a workstation
  • get notifications every time a new event is added or deleted in Watson Content Hub
  • keep navigate Oslo despite the device/workstation is offline

From a technical point of view we have:

  • create a web app manifest file
  • implemented service worker for offline support
  • added transport layer security (TLS) to ensure private and data integrity
  • defined the base of an application shell architecture in order to allow fast loading time

 

Install Oslo on Home Screen

 

Go offline

 

Get a push notification on Oslo event change

 

The team

We spent the last weeks focusing on creating the PWA for Oslo; everything came up as a funny challenge rose by our friend and IBM colleague Antonio Fiol. Special thanks to

 

Do you need further details?

Don't be shy and contact us! We will be happy to answer your questions: info@orienteed.com

Related posts

We use cookies to improve your experience and our services by analyzing your navigation on our website. If you continue to browse, we consider that you accept its use. You can learn more by clicking here:
Cookies Policy
Logotipo de Orienteed

Cookies Policy

A cookie is a small text file that is downloaded to your computer when you access certain web pages. Cookies allow web pages, among other things, to store and retrieve information about the device or browsing habits of a user. Depending on the information retrieved, cookies can be used to recognize the user.
Technical Cookies are essential to provide the service offered and requested by a user, to remember configuration preferences, as well as for security and fraud prevention purposes. The website cannot function properly without these cookies.
Analytical cookies help us analyze the activity of users and the number of visitors on the website. They allow the collection of information on the number of visitors, their origin, the browser used, the duration spent on each page, the impact of ads, etc. These cookies are used exclusively for statistical purposes and do not allow identification of particular individuals.

How to deny or revoke cookie consent

Cookies can be blocked or deleted through the browser settings. The following links detail how to do it in each of the most used browsers.