# Progressive web apps

In this guide, we will take you through everything you need to know about PWAs and how to enable them in your app.

### What is a PWA?

A PWA, or Progressive Web Application, is a web application that uses modern web technologies to deliver a native app-like experience to its users. PWAs are designed to work on any device, regardless of the operating system or screen size. PWAs can be accessed through web browsers and can be installed on the user's device, giving them an app-like experience. As a result, users of your app will have the option to install it, just like a native app.

### Benefits of PWA

We have integrated PWA to provide users with a seamless and fast experience. Some of the benefits of PWA:

* Faster load times: PWAs are designed to load quickly, even on slow network connections.
* Push notifications: PWAs can send push notifications to the user's device, increasing user engagement.
* App-like experience: PWAs offer an experience similar to a native app, with a smooth and responsive interface.

### Enabling PWA

{% hint style="info" %}
In order to install a PWA, your app [favicon](https://guides.noloco.io/general-settings/custom-logos#update-the-apps-favicon) needs to be exactly 192 x 192px
{% endhint %}

Enabling PWA for your app is easy and straightforward. Follow these steps to enable PWA:

1. Go to your app settings page, or you can visit: <https://portals.noloco.io/~/_/settings/pwa>, and you can choose the app you want, or it will automatically open the last active app after 5 seconds.
2. Switch the toggle to enable PWA. Please make sure that you have added a title, a description, and a favicon icon, and have published your app.
3. Now, just head to your app and do a reload. You will see a prompt to install the app.

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-3a2eccea3e54af01d9d21725e088c68ef034ae9a%2FJun-21-2023%2014-02-49.gif?alt=media" alt=""><figcaption></figcaption></figure>

#### Installing PWA on desktop

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-82603a5e3c8ad5316ea7d6c1a0ed871afd27417d%2FJun-21-2023%2014-07-28.gif?alt=media" alt=""><figcaption></figcaption></figure>

#### Installing PWA on mobile

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-e49f8eb72087e82b00ceefba1ff99350ef7e9b6a%2Fpwa-mobile-demo.gif?alt=media" alt="" width="300"><figcaption></figcaption></figure>

### Instant PWA Functionality

Enabling PWA for your Noloco app is seamless. Simply enable it from the PWA settings in your app. Your app users can then install it directly from their browsers, when they open your app, making it accessible from their home screens.

### Cross-Platform Compatibility

Whether your users are on iOS, Android, Windows, or MacOS, they can download and engage with your app as if it were a native application, ensuring a uniform experience across all devices.

### Native Push Notifications

Keep your app users engaged with native push notifications. Whether it’s for comments, mentions, or any custom Noloco notifications, this feature ensures that your users stay informed and engaged with your app, wherever they are.

Notifications will still appear in your notification centre, but if notification permissions are given to your app, then notifications will be sent as native notifications, whether the app is open or not.

## Troubleshooting PWA Issues

### PWA Install Prompt Not Appearing on Desktop

If the PWA install prompt doesn't appear when you expect it to, check the following:

#### **Browser Compatibility**

Not all browsers support automatic PWA install prompts:

* **Google Chrome**: Full PWA support with automatic install prompts ✅
* **Safari on macOS**: Does not support automatic PWA install prompts ❌
* **Firefox on macOS**: Limited PWA support ⚠️

**Solution**: Open your app in Google Chrome, wait a few seconds, and check for the install option in the address bar.

#### **PWA Configuration**

Ensure your app's PWA features are properly configured:

1. Navigate to **Settings** > **Progressive Web Apps** in build mode
2. Verify that PWA functionality is enabled
3. Check that your app has:
   * A title set
   * A description set
   * A valid [favicon](https://guides.noloco.io/general-settings/custom-logos#update-the-apps-favicon) (192 x 192px)
   * Been published

{% hint style="info" %}
If you've made recent changes, try disabling and re-enabling PWA settings. This can reset cached configurations and resolve display issues.
{% endhint %}

#### **Favicon Requirements**

The favicon must be exactly **192 x 192 pixels**. Incorrect dimensions are a common cause of install prompt issues.

**To fix**:

1. Check your favicon size in an image editor
2. Resize to exactly 192 x 192px if needed
3. Upload the corrected favicon in [General Settings > Custom Logos](https://guides.noloco.io/settings/general-settings/custom-logos)
4. Republish your app

### Can't Access PWA Settings

If you can't find the Settings or PWA options when logged in:

#### **Build Mode Required**

Settings are only accessible in build mode:

1. Click the **pencil icon** or press **Cmd/Ctrl + E** to enter build mode
2. Look for **Settings** in the top menu
3. Select **Progressive Web Apps** from the settings menu

#### **Role Permissions**

Only users with [Builder permissions](https://guides.noloco.io/users-and-permissions/user-roles-and-permissions) can access Settings:

* Contact your app administrator if you need access
* Verify your role has the necessary permissions
* Check your role assignment in the [Users table](https://github.com/noloco-io/guides/blob/main/users-and-permissions/users.md)

### Best Practices for PWA Configuration

To ensure optimal PWA functionality:

✅ **Use Google Chrome** for the best PWA installation experience ✅ **Verify favicon dimensions** are exactly 192 x 192px ✅ **Ensure Builder permissions** are granted to users who need to configure PWA ✅ **Keep browsers updated** to benefit from the latest PWA compatibility improvements ✅ **Test on multiple devices** to verify the installation experience

### Frequently Asked Questions

<details>

<summary>My PWA won't install</summary>

Please ensure that you are using a favicon with dimensions 192 x 192px in your project if you intend on installing it as a PWA

</details>

<details>

<summary>How do I install a PWA on iOS?</summary>

Simply follow these steps to install your PWA on iOS:

1. On your iOS device open Safari.
2. Go to the app URL.
3. At the bottom of the screen, tap the Share icon (with the arrow pointing up)
4. Scroll down the list of options, then tap Add to Home Screen.
5. Tap on Add at the top right.

</details>

<details>

<summary>What plan do I need to enable PWAs?</summary>

PWAs are currently available to users on all Noloco plans but please check our [pricing page](https://noloco.io/pricing) for the latest availability

</details>