Skip to main content

 

 

 

 
Language:

 

 
Service Studio version:
 
 
OutSystems

Distribute as a progressive web app

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • A progressive web app (PWA) provides a native-like experience without having to distribute a native mobile app. PWA is an emerging technology that combines existing web technologies with modern browser features.

    The main benefits of PWAs:

    • More efficient to manage, as they don't require app stores like native mobile apps.
    • Based on the web browser technology that doesn't depend on a platform:
      • The same app runs on Android and iOS. Additionally, in OutSystems you can distribute an app as a PWA and as native builds for Android/iOS.
      • They can run on a web browser with the same offline capabilities of a mobile app.
    • They update the moment you publish changes to your OutSystems environment.
    • Lighter on user devices' systems resources.
    • When you develop PWAs in OutSystems, you get all benefits of the low-code development. It's enough to turn on the PWA distribution of the app.

    PWA in OutSystems is a distribution mode for mobile apps. A mobile app belongs to the Mobile App runtime, and the default app templates of this type are Phone App and Tablet App. Select them when you're creating a new app in Service Studio that you want to offer users as a PWA. You can simultaneously distribute a mobile app as a native mobile app and as a PWA.

    Prerequisites

    To distribute your app as a PWA, you need:

    • Service Studio 11.6 or later
    • Platform Server 11.9 or later
    • LifeTime Oct.2019 CP1 or later
    • A valid SSL certificate to allow HTTPS communication

    Creating an app and enabling the PWA

    Create a mobile app and turn on the toggle Distribute as PWA in the app details.

    1. Start creating a new app, and in the New Application window select Phone App or Tablet App app template.

      New Phone or Tablet app

      You can use an existing Mobile App to activate the PWA distribution. Review the user experience if your mobile app uses native plugins that work only with native Android or iOS builds.

    2. Add a Screen and some logic to it.

    3. Publish the app.

    4. In the app details, under the Distribute tab, turn on the toggle Distribute as PWA. To locate the Distribute tab, go back to the home screen of Service Studio and click your app icon.

      The PWA toggle to activate progressive web app distribution

    Notes

    • You don't have to republish your app after changing the value of the Distribute as PWA, as this change is effective immediately.
    • You can also change the PWA settings for an app in an environment through Service Center. For more information, see Generate and distribute your mobile app.

    Mobile best practices apply for PWA development as well, particularly about designing lightweight local storage.

    Running the PWA

    Here is how you can run your PWA. Go to the app details in Service Studio and click Distribute tab:

    • Scan the QR code to open the PWA on your mobile device.
    • Click the link to open the PWA in a desktop browser.

    The QR code and links to run progressive web app

    PWA in Android

    Follow these steps to install and run your PWA on an Android device.

    1. Visit the app URL in Chrome.

    2. Tap the banner Add (my app) to Home screen.

      Installing app in Android

    3. After you see a confirmation that Android added the shortcut to the home screen, open the app like any other app installed from a store. You can uninstall it like any other Android app.

      PWA on Android home screen

    PWA in iOS

    Follow these steps to install and run your PWA on an iOS device.

    1. Visit the app URL in Safari.

    2. Tap the Share button. The share menu opens.

      Share button in Safari iOS

    3. Tap Add to home screen. The confirmation screen opens.

      Share options on iOS

    4. In the confirmation screen, tap Add.

      Confirm adding to iPhone home screen

    5. Your app should now be on the home screen. You can uninstall it like any other iOS app.

      Add to home screen share option on iOS

    Customizing your PWA

    You can customize your app by:

    Changing the PWA properties

    You can edit your app name, description, color, and logo through the UI of Service Studio. Make sure you republish the app. For overriding properties with the PWA manifest, check out Advanced settings and customizations.

    Prompting users to install PWA in iOS

    Use a prompt to tell your users they can install the PWA version of the app. For the iOS devices, try out the community-contributed plugin Prompt to Install PWA, or develop a custom solution.

    A prompt to install PWA in iOS

    Android (Chrome) offers a native experience for the install prompt, so you don't need a plugin.

    Using plugins

    These are the officially supported plugins for PWAs:

    More plugins are coming soon, and you can contribute with your own on the Forge.

    Debugging your PWA

    To debug a PWA, emulate the app in Google Chrome. Go to the Debugger tab, and then in the Debug Setup select Emulate using Chrome.

    Activating the PWA debugger

    Having issues with your PWA? Check out Troubleshooting and known issues.

    Learning resources

    • PWAs overview and best practices is an intermediate course about progressive web apps in OutSystems. Learn more about differences between PWAs and native apps, advantages and challenges, installation and desktop support.

    The team would love to hear what you think of this document and if it helps you. Please leave feedback in the feedback section. If you want to get a reply, select Yes, you may contact me about this feedback.


    QR CODE is a registered trademark of Denso Wave Incorporated.

    Articles in this Section

    • Was this article helpful?