Ably Web Push Notifications

# Getting started: Web Push Notifications This guide will get you started with Ably Push Notifications in a web application using vanilla JavaScript and a service worker. You'll learn how to set up an Ably Realtime client with push notification support, register a service worker, activate push notifications, subscribe to channel-based push, send push notifications, and handle incoming notifications in both the service worker and main page. ## Prerequisites 1. [Sign up](https://ably.com/signup) for an Ably account. 2. Create a [new app](https://ably.com/accounts/any/apps/new), and create your first API key in the **API Keys** tab of the dashboard. 3. Your API key will need the `publish` and `subscribe` capabilities. For sending push notifications from your app, you'll also need the `push-admin` capability. 4. For channel-based push, add a rule for the channel with **Push notifications enabled** checked. In the dashboard left sidebar: **Configuration** → **Rules** → **Add** or **Edit** a rule, then enable the Push notifications option. See [channel rules](https://ably.com/docs/channels.md#rules) for details. 5. A modern browser that supports the [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) (Chrome, Firefox, or Edge recommended). Safari has limited Web Push support. 6. A local web server to serve your files over `http://localhost` (service workers require a secure context or localhost). ### (Optional) Install Ably CLI Use the [Ably CLI](https://github.com/ably/cli) as an additional client to quickly test Pub/Sub features and push notifications. 1. Install the Ably CLI:



#### Shell

```
npm install -g @ably/cli
```

2. Run the following to log in to your Ably account and set the default app and API key:



#### Shell

```
ably login
```

### Serve your files locally Service workers require files to be served from a web server (not opened directly as `file://`). Navigate to your project directory and use one of the following methods to start a local server: **Python (built-in on macOS):**



#### Shell

```
# Python 3
python3 -m http.server 8000
```

**Node.js:**



#### Shell

```
# Install a simple HTTP server globally
npm install -g http-server

# Serve the current directory
http-server -p 8000
```

**PHP:**



#### Shell

```
php -S localhost:8000
```

Then open your browser at `http://localhost:8000`. ### Project structure Your project consists of two files: - `index.html` — the main page with UI and Ably client logic. - `service-worker.js` — the service worker that handles push events and notification clicks. ## Step 1: Set up Ably This step initializes the Ably Realtime client with the necessary configuration for push notifications, including the API key, client ID, and service worker URL. It also sets up a subscription to the specified channel to listen for incoming messages and log them to the output div. First, create the `index.html` file with the Ably SDK scripts and a HTML structure for logging messages and displaying status of operations:



### Html

```



    
    Ably Web Push Notifications
    


    Ably Web Push Notifications

    
        
            
            
        
    

    
    
    


```

The two script tags load the Ably Realtime SDK and the Ably Push plugin respectively. Now add this code inside the empty `