# Progressive Web App (PWA)

How to access on Fynd Commerce 
Commerce Panel → Sales Channel (select application) → Themes → Store Design → Edit theme → Settings [Tab] → Application (PWA)

## Introduction

Progressive Web App (PWA) functionality allows you to deliver an app-like experience for your storefront. It enhances your customers' engagement by offering features such as offline access and better performance. Follow the steps below to enable and configure PWA for your storefront:

1. Edit a theme, navigate to the **Settings** section, and choose **Application (PWA)**.


![QG1](https://cdn.pixelbin.io/v2/doc/original/v2.2/NDR/Screenshot_2025-01-27_at_8.39.06_PM.png)

center
em
Figure 1: Theme Settings
br
1. In the Application (PWA) section, check the option to **Enable Application Mode**. Enter a name and description for your app.


![QG1](https://cdn.pixelbin.io/v2/doc/original/v2.2/NDR/Screenshot_2025-01-27_at_9.01.58_PM.png)

center
em
Figure 2: Enable Application Mode
br
1. Upload **Application Icons**. You need two types of icons for your PWA:


* **Solid Icon**: This will be used as the primary app icon across all devices and platforms.


![QG1](https://cdn.pixelbin.io/v2/doc/original/v2.2/NDR/Screenshot_2025-01-27_at_9.03.23_PM.png)

center
em
Figure 3: Solid Icon
br
* **Transparent Icon**: This ensures the PWA icon looks seamlessly across various device-specific icon styles, especially on Android devices.


![QG1](https://cdn.pixelbin.io/v2/doc/original/v2.2/NDR/Screenshot_2025-01-27_at_9.04.31_PM.png)

center
em
Figure 4: Transparent Icon
br
The icons should be PNG format with a max size of 15MB and an aspect ratio of 1:1.

1. Upload **Application Screenshots**. Upload 2-6 screenshots of your storefront to provide a visual preview of how the PWA will appear on mobile devices.


![QG1](https://cdn.pixelbin.io/v2/doc/original/v2.2/NDR/Screenshot_2025-01-27_at_9.04.31_PM-cJAomX26Y.png)

center
em
Figure 5: Application Screenshots
br
1. Create shortcuts in the **Shortcuts** section within the PWA settings. Give your shortcut a name (e.g., Product Listing Page) and upload the desired icon for it.


![QG1](https://cdn.pixelbin.io/v2/doc/original/v2.2/pwa/Screenshot_2025-01-28_at_9.52.07_PM.png)

center
em
Figure 6: Create Shortcut
br
1. After configuring the PWA, ensure you save the changes by clicking the **Save** button at the bottom left. Your storefront will be set up to work as a Progressive Web App, providing an enhanced experience for your customers.


![QG1](https://cdn.pixelbin.io/v2/doc/original/v2.2/NDR/Screenshot_2025-01-27_at_9.04.31_PM-jfe-l8mbX.png)

center
em
Figure 7: Save Changes
br
## Use PWA on Mobile:

1. Open your browser (e.g., Chrome) and visit the store's website.


![QG2](https://cdn.pixelbin.io/v2/doc/original/v2.2/pwa/Screenshot_2025-01-27-21-06-28-405_com.android.chrome.jpg)

center
em
Figure 8: Cash On Delivery Toggle
br
1. In the top-right corner of your mobile browser, tap the three dots (menu icon), and select **Add to Home Screen**.


![QG2](https://cdn.pixelbin.io/v2/doc/original/v2.2/pwa/Screenshot_2025-01-27-21-06-34-336_com.android.chrome.jpg)

center
em
Figure 9: Add to Home Screen
br
1. A pop-up will appear, showing the app name (e.g., "PWA Testing") and the icon. Tap **Install** to start the installation.


![QG2](https://cdn.pixelbin.io/v2/doc/original/v2.2/pwa/Screenshot_2025-01-27-21-06-38-185_com.android.chrome.jpg)

center
em
Figure 10: Install App
br
1. After installation, the PWA icon will appear on your mobile device's home screen.


![QG2](https://cdn.pixelbin.io/v2/doc/original/v2.2/pwa/Screenshot_2025-01-27-21-07-29-352_com.mi.android.globallauncher.jpg)

center
em
Figure 11: App on Home Screen
br
1. Tap on the icon to open the app and enjoy the enhanced experience with faster performance and offline access. To use the created shortcut, simply long-press the installed app.
Once installed, you can use the PWA just like a regular app, with access to store features.


![QG2](https://cdn.pixelbin.io/v2/doc/original/v2.2/pwa/Screenshot_2025-01-28-21-55-28-806_com.mi.android.globallauncher.jpg)

center
em
Figure 12: Shortcut on Home Screen
br