PWA Quick Start

Get push notifications working in your web app in minutes.

Prerequisites

A CloudSignal account with PWA service enabled
Your organization credentials (ID, secret, service ID)
HTTPS-enabled website

Basic Setup

1. Install the SDK

npm install @cloudsignal/pwa-sdk

2. Add Web App Manifest

Create public/manifest.json:

{
  "name": "Your App Name",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Add to your HTML:

<link rel="manifest" href="/manifest.json">

3. Copy Service Worker

cp node_modules/@cloudsignal/pwa-sdk/dist/service-worker.js public/

4. Initialize and Register

import { CloudSignalPWA } from '@cloudsignal/pwa-sdk';

const pwa = new CloudSignalPWA({
  organizationId: 'your-org-uuid',
  organizationPublishableKey: 'pk_your_publishable_key',
  serviceId: 'your-service-uuid',
  debug: true
});

// Initialize (registers service worker, downloads config)
await pwa.initialize();

// Register for push notifications
const registration = await pwa.registerForPush({
  userEmail: 'user@example.com'
});

if (registration) {
  console.log('Registered:', registration.id);
}

Complete Example

import { CloudSignalPWA } from '@cloudsignal/pwa-sdk';

const pwa = new CloudSignalPWA({
  organizationId: 'your-org-uuid',
  organizationPublishableKey: 'pk_your_publishable_key',
  serviceId: 'your-service-uuid',
  debug: true
});

// Listen for events
pwa.on('install:available', () => {
  console.log('PWA can be installed');
});

pwa.on('push:registered', (data) => {
  console.log('Push registered:', data.registrationId);
});

pwa.on('permission:denied', () => {
  console.log('User denied notification permission');
});

// Initialize
const result = await pwa.initialize();
console.log('Device:', result.deviceInfo?.deviceModel);

// Check if installable
if (pwa.canInstall()) {
  const installResult = await pwa.showInstallPrompt();
  console.log('Install accepted:', installResult.accepted);
}

// Register for push (will prompt for permission if needed)
const registration = await pwa.registerForPush({
  userEmail: 'user@example.com',
  userName: 'John Doe'
});

// Start heartbeat for online status tracking
pwa.startHeartbeat();

CDN Usage

For non-bundled environments:

<!DOCTYPE html>
<html>
<head>
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <button id="enable-push">Enable Notifications</button>
  
  <script src="https://unpkg.com/@cloudsignal/pwa-sdk/dist/index.global.js"></script>
  <script>
    const pwa = new CloudSignalPWA.CloudSignalPWA({
      organizationId: 'your-org-uuid',
      organizationPublishableKey: 'pk_your_publishable_key',
      serviceId: 'your-service-uuid'
    });

    pwa.initialize().then(() => {
      console.log('PWA initialized');
    });

    document.getElementById('enable-push').onclick = async () => {
      const reg = await pwa.registerForPush({
        userEmail: 'user@example.com'
      });
      if (reg) {
        alert('Notifications enabled!');
      }
    };
  </script>
</body>
</html>

What's Next?

Push Notifications API - Full push API reference
Installation Prompts - Handle PWA install flow
Device Detection - Access 35+ device attributes

On this page