# "Hello world of PWA!" app

The article provides the steps to create a basic application and add an app icon to Home Screen.

\_\_\_\_\_\_\_\_\_\_\_\_\_\_

## CREATING APP <a href="#creating_app" id="creating_app"></a>

1. Log in to your Mobsted account
2. Click **Create new Application**
3. Name you application as _"Hello world of PWA!"_ and click **Next**
4. Drag and Drop **Text** element from the left panel to the device emulator in the centre of the screen
5. Go to the properties of **Text** element and change its text to _"Hello world of PWA!"_

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1556132581951/screen-shot-2019-04-25-at-12-01-30-am.png)

1. Click **Save Screen.**

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

## CREATING ADD TO HOME SCREEN WIDGET <a href="#creating_add_to_home_screen_widget" id="creating_add_to_home_screen_widget"></a>

&#x20;Widgets control how the app is saved to the home screen, how messengers are connected, how promo pop-ups look like and act.

In this case we create widget that offers an app user to add the app to the Home Screen.

1. Mouse over **Application** section and select **Widgets**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1556134571146/image.png)

1. Click **Add widget**
2. Next to the added widget click **Add scenario**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1557723454260/screen-shot-2019-05-13-at-9-57-07-am.png)

1. Add widget **Description**
2. Leave the boxes in **Condition** column blank and set conditions in **Where** and **When** columns. We want the widget to appear on the Home Screen with 5 seconds delay. Total number of times would be set to 0, which means no restrictions
3. Save the scenario by clicking the "Diskette" button framed red on the screenshot below

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1557134804232/screen-shot-2019-05-06-at-2-25-17-pm.png)

1. Click **Gear** to set up the widget view

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1557137171404/image.png)

1. Drag and Drop **WA2hs** template to the widget emulator.

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1557723573243/screen-shot-2019-05-13-at-9-58-53-am.png)

One screen app and the widget to save it are now created.

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

## OBTAINING APPLICATION ACCESS LINK <a href="#obtaining_application_access_link" id="obtaining_application_access_link"></a>

This link is used to distribute the app, for example, it can be placed on the website to make the app publicly accessible. You can use the link in any from - as QR, on images and buttons, etc etc. Do not confuse the Common Access Link (CAL) with the direct invitational links, which you will also see on the platform. The CAL acts based on rules on Security page and may require user registration and/or authorisation. There is no user pre-set in CAL.

1. Mouse over **Application** section and select **Security**
2. In the **Common Access Link** section you should see the link and the QR code to access the App

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1560499452253/image.png)

1. Click **Show QR Code**
2. Scan the QR code with the phone's QR reader and choose Chrome or Safari to open it.
3. Wait 5 seconds for the widget to appear

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/99nwnhyqyu/1560499982848/image.png)

1. Launch the instruction and perform the steps shown. You will have the app icon added to the Home Screen
2. Tap the icon to see your app's content
3. Offload the app from the phone's memory & switch your device to Airplane mode
4. Launch the app from the Icon again and check if it works offline.

That's it!

## RECOMMENDED ARTICLES <a href="#recommended_articles" id="recommended_articles"></a>

* [Constructor elements](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app)
* [Show / hide screen elements](https://kb.mobsted.com/article/uxp0kjy3sq-hide-show-screen-elements)
* [React to user actions](https://mobsted.helpdocs.io/app/content/article/4jb98oxf8g)
