> For the complete documentation index, see [llms.txt](https://doc.uppush.io/uppush/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.uppush.io/uppush/settings/wpa-web-app-applications.md).

# WPA - Web App Applications

## Purpose of the PWA features

* **Enhanced User Experience**: By enabling PWA, merchants can provide a more app-like experience for their customers, which can increase engagement and usability.
* **Offline Capabilities**: PWAs often include features that allow users to interact with the store even when they have limited or no internet connectivity, making it more accessible.
* **Push Notifications**: PWAs can integrate push notifications, allowing stores to send updates directly to customers' devices, enhancing marketing reach.

For a deeper understanding, you can explore this article: [What are PWAs?](https://web.dev/articles/what-are-pwas).

## Here's how to set up your PWA in the settings for a smoother experience. 

* **Enable/Disable PWA**: This allows the user to enable or disable the Progressive Web App functionality for their store. Enabling PWA makes the store installable as an app directly from web browsers like **Chrome and Edge**.
* **App Name**: The name that will appear when users install the app on their device. This should be a recognizable name that aligns with the store's branding.
* **App Description**: A short description that provides an overview of the app's purpose or features. This helps users understand what the app is about before installation.
* **Primary Color**: Users can select the primary color of the PWA, which will define the theme color of the installed app, affecting how it appears on a device’s home screen and in the browser.

<figure><img src="/files/ANcyW09cpbe5CeCxDcg6" alt=""><figcaption></figcaption></figure>

## How can your customers install your web app on their browser or directly on their phone?

### Install on Chrome browser&#x20;

1. When customers are on your store page, they will see a download icon in the browser's address bar, as shown in the screenshot. By clicking this icon, they can install your Progressive Web App (PWA) directly on their device.

<figure><img src="/files/HodACPkfbUJ1jPbDpmio" alt=""><figcaption></figcaption></figure>

2. Click in the **Install app icon** -> Then click "**Install**"&#x20;

<figure><img src="/files/PBaNGrTt0s0Jqe9j0tvY" alt=""><figcaption><p>Install app from customers' browsers</p></figcaption></figure>

3. The app will appear in your computer's Chrome apps section, labeled with your store's name. Once installed, it will be accessible like a native app on your device. Users will continue receiving notifications from your store directly through this app.

<figure><img src="/files/kNWvMoeKsbVkJ7rBMvBL" alt=""><figcaption><p>The app downloaded on your device</p></figcaption></figure>

4. Here’s how your PWA will look. Customers can still receive notifications from your store through the app.

<figure><img src="/files/AORt6E00ya1qkib9HTvz" alt=""><figcaption></figcaption></figure>

## &#x20;Install on customers' smartphone

1. When using Safari on an iPhone, customers can tap the share icon at the bottom of the screen and choose "**Add to Home Screen**" to install the app on their device.&#x20;

<figure><img src="/files/Oct7JkL9ctr4AhWTMn8U" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/cxNe90DPbzx2D0zYGaaB" alt=""><figcaption><p>Add to Home Screen</p></figcaption></figure>

2. Customers can edit the app name as they wish, then click "Add"

<figure><img src="/files/41BcBw8WNg1XICvKiq38" alt=""><figcaption></figcaption></figure>

The app is now displayed on your home screen, functioning just like a native app on your phone.

<figure><img src="/files/FpPSJXb2pAeC4jvUWVaf" alt=""><figcaption></figcaption></figure>