# Mobile App

PWAs (Progressive Web Apps) are web apps that provide users with an experience similar to that of native desktop and mobile apps. This means that your Softr app users will have an option to install it on their device, being able to access it later on through an icon on their home screen or elsewhere. Let's see how you can enable and configure PWA on your Softr app.

{% hint style="info" %}
Please, note that the Mobile App feature is only available to [Business Plan](https://www.softr.io/pricing) users.
{% endhint %}

To configure PWA, you need to navigate to **Mobile App** settings in your Softr app's **Application Settings**. There, you will see several options that allow you to enable a PWA on your Softr app as well as customize its look and feel. So, let's go over the settings and test the feature.

{% hint style="warning" %}
Your users will still need to have Internet access to be able to use your Softr app as a PWA, so it's won't be accessible when offline.
{% endhint %}

## Settings Overview

### Enable mobile app (PWA)

This toggle allows you to enable the mobile app (PWA) option for your users.

### App Name

You need to specify a name that will appear under your PWA icon on your users' home screen or wherever it's added.

### Logo / icon

Here, you set the icon that will be used on user's device to represent your app.

{% hint style="warning" %}
Please, note that the uploaded image should be in **.png** format and should have a resolution of **512x512px**.
{% endhint %}

### Background color

When opened as a PWA, your Softr app will have a splash screen. So, here you can customize the background color of the splash screen. We'll see what this looks like further in this guide as we test the feature from the user's perspective.

### Floating action button

Here, you can configure the button that will prompt the users to install the PWA when they visit your site. You can choose its **alignment** on the screen as well as on **which device types** to show it. So, let's configure all these settings and see what it looks like from your users' viewpoint.

## Configuring Mobile App Settings and Testing

Below, you can see how we've configured the PWA settings.

![PWA Setup](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FbFXhm7dYbeyaedEhevPk%2Fpwa-new-b.png?alt=media\&token=0c311e49-7c4a-4552-a7b1-cd367439496e)

Now, let's see what the user will see when visiting your site.

![Testing the PWA feature](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FgKYmf6Vy3TSfx0Cxg1e7%2FScreen%20Recording%202022-05-19%20at%2011.29.41.gif?alt=media\&token=efb53b10-1e7e-4758-93f0-14234d99e6e4)

As you can see, we were able to click the PWA icon and successfully install the app on our desktop device (as a Chrome App in our case). The PWA install icon appeared in the bottom left corner of the screen (as we had set in settings) and the app had a red splash screen, which we had specified as well.

## Compatibility

There are certain browser/OS combinations that are not compatible with the PWA technology. However, it is still compatible with the absolute majority of the most used browser/OS combinations, which are the following:

* Windows/Chrome
* Windows/Edge
* MacOS/Chrome
* MacOS/Edge
* iOS/Safari
* Android/Chrome
* Android/Samsung Internet

## Push Notifications

{% hint style="info" %}
Push notification support **COMING SOON**.
{% endhint %}
