# Create Contact Center Apps for PWA

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

Zoom PWA (Progressive Web Client) allows an application to operate as a Zoom App inside the Zoom web client. Creating apps for Zoom PWA follows the standard process for creating a [Contract Center app](/docs/contact-center/apps/create-zcc-apps/).

In this article, we call out only information specific to creating apps for Zoom PWA.

---

## Prerequisites

-   You have read the procedure to [create a Contact Center app](/docs/contact-center/apps/create-zcc-apps/).
-   You have a [Zoom account](https://zoom.us/).
-   Zoom PWA client 5.14.10 or higher.
-   Zoom Apps SDK 0.16.12 or higher.

---

## Step 1 - Create a Contact Center app with PWA support

1. Follow the steps to [Create a Contact Center App](/docs/contact-center/apps/create-zcc-apps/).
2. To enable PWA client support for Contact Center:

    1. Go to the **Features** page > **Surface**.
    1. Under **Select where to use your app**, select **Contact Center**.

        ![](/img/zcc-surface.png)

    1. Scroll down to the **Zoom client support** section, and enable **PWA Client**.

        ![](/img/UBF-pwa.png)

---

## Step 2 - Download and Install Zoom Apps SDK

Download and install the [Zoom Apps SDK](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html). Add [`appssdk.zoom.us`](http://appssdk.zoom.us) to the script-src in Content-Security-Policy. See sample code for headers below.

---

## Step 3 - Get the app context token

Use the `getAppContext()` API to get the latest app context token from the PWA client. The API returns a token that contains signed app context data for secure backend validation.

> **Note:**
> Do not use the `x-zoom-app-context` header. The header is usually sent by the Zoom client, however, it is not sent by the PWA client. Remove any usage of this header from the backend.

1. Call `getAppContext()` API after config().
2. Pass the context via a `GET` request to the backend.
3. Decrypt the app context in the backend, and use the decrypted app context information as required.

    Add cross-origin headers:

    ```plaintext
    "cross-origin-embedder-policy":"require-corp"
    "cross-origin-resource-policy":"cross-origin"
    ```

4. Remove X-Frame headers from your app configuration:

    ```plaintext
    X-Frame-Options "DENY";
    frame-ancestors 'none'; Content-Security-Policy
    ```

---

### Example Context Security Policy

**Frontend:**

```javascript
add_header Content-Security-Policy "default-src 'none'; object-src 'none'; worker-src 'none'; connect-src 'self'; script-src 'self' appssdk.zoom.us";
add_header Strict-Transport-Security "max-age=31536000";
add_header X-Content-Type-Options "nosniff";
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Cross-Origin-Resource-Policy "cross-origin";
add_header Cross-Origin-Embedder-Policy "require-corp";
```

**Backend:**

```javascript
securityHeaders: {
strictTransportSecurity: 'max-age=31536000',
xContentTypeOptions: 'nosniff',
contentSecurityPolicy: 'default-src 'none'; object-src 'none'; worker-src 'none'; connect-src 'self' ${isDevelopment ? ' ws: wss:' : '' }; script-src 'self' appssdk.zoom.us ; font-src 'self'; img-src 'self';
referrerPolicy: 'no-referrer',
crossOriginResourcePolicy: 'cross-origin',
crossOriginEmbedderPolicy: 'require-corp',
},
```

---

### Cookie sessions

Make these changes if you have set up a Cookie Session.

-   Add `sameSite: 'none'` in Cookie Session.
-   Add `secure: true`, in Cookie Session.
-   Remove `httpOnly: true` from Cookie Session (if present).

---