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.



Comments

Popular posts from this blog

Outsystems Integrations - Connecting to Microsoft Azure Sql Server

In this article, I will show you how to set up your own Microsoft Azure SQL Server Database and then how to integrate this SQL Server database in Outsystems. Create a free Microsoft Azure Account. https://portal.azure.com. Microsoft Azure is a cloud computing service for building, deploying and testing application through Microsoft managed data centers (similar to Amazon’s AWS services) Microsoft provides free accounts with free credit of $200 to spend in the first year of new account. I am using this feature to create a Microsoft Azure SQL Server database in the cloud and will show how easy it is to connect this Azure AQL Server from Outsystems. Click on Add button to add a Azure SQL Database Fill in the details and click on Create button. Your deployment will take few seconds to few min to create. Look for the status in the table. It will change to Created automatically without refreshing the screen and finally when your screen says deployment is compl...

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.