Skip to main content

Progressive Web Applications - How to develop in Outsystems

Outsystems is the best tool available in the current market for rapid development of Progressive Web Applications. As explained in my previous post, PWAs are light weight, fast and easy to distribute to your users without the need of installing the apps from Google Play Store or Apple App Store. The best thing on top of everything is you could always use your free personal environment to create these apps from Outsystems.

Here are some requirements before getting started :
You need to install Service Studio Version 11.7 or later.
Outsystems Platform Server

Step 1 : Login into your Lifetime environment and click on Environments. 





Step 2 : Choose Options and click on Early Access Features and enable Progressive Web Apps.



Step 3 : Open Service Studio and create your Mobile Application. 

Please note that PWA's are only supported for Mobile Applications currently in Outsystems. Create a Mobile Application module using the mobile application template available in Service Studio. Here I have create a simple Mobile Application called Success Quotes. This application just shows some inspiration quotations from famous people. Since this article is not about how to create a mobile application in Outsystems, I will not be focusing on this topic for now.

As you see here below, after you have enabled the PWA option in lifetime, you will see another option for PWA when you click on Distribute button. All you need is to drag the "Distribute as PWA".



Step 4 :  Distribute your PWA 

Now you can distribute the app just by sharing a QR code or providing the URL of the application.
Once users access the application through a mobile they will see an option automatically to save the app in the home screen. If you don't see that option, you can still install it by clicking on the three vertical dots on the chrome browser and select the option to "Add to home screen". One the app is added to the home screen, it will act like an regular mobile app and will be able to receive all the updated from the new versions of the code and also be able to send notifications to the mobile users.

So if you want to check how this actually works, scan the QR code and install this PWA app. This is a simple app showing some beautiful quotes from famous people. Download the PWA app now and get inspired. That's it for now. Thank you for your time to read through this. Stay safe.



Labels:

Comments

Post a Comment

Popular posts from this blog

Outsystems Tips and Tricks : Adding iFrame in Reactive Web App

In Outsystems Version 11+, there is no iFrame widget available when you are building Reactive Web Applications. So in case you want to add an iFrame HTML tag or for that matter any other HTML element, you could do so by creating a generic web block and pass HTML in to it by doing as follows.
Post a Comment
Read more

Consuming Workday WSDL into Outsystems

WSDL (Web Service Description Language) is an XML format for describing network services as a set of endpoints operating on messages containing either document-oriented or procedure-oriented information. The operations and messages are described abstractly, and then bound to a concrete network protocol and message format to define an endpoint . Generally consuming a WSDL (Webservice Description Language) in Outsystems is an easy task but it might get trickier when the WSDL has unsupported use cases built into it. This article will help to understand the difficulties associated with such unsupported use case and attempts to provide a solution. Here is the list of unsupported SOAP use cases from Outystems: https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/SOAP/Consuming_SOAP_Web_Services/Unsupporte d_SOAP_Use_Cases#list-attribute-in-a-single-list-attribute Workday WSDL: The following link provides the WWS (Workday Web Services) API Documentation f...
Post a Comment
Read more

How to take Full Page Screenshot using Google Developer Tools in Chrome Browser

Click on 3 vertical dots on the top right hand side of the browser. Click on 3 vertical dots again in the Developer Tools Menu and choose "Run Command" option or use keyboard combination ctrl+Shift+P. If you do not see Developer Tools you might have to go to chrome settings and enable this option in your chrome browser. Now type "Capture Full Page Screenshot" in the command bar. Thats it. You should now see the whole page you are viewing will be downloaded automatically in your PC as a PNG file.
Post a Comment
Read more