PWA Utilities

Build Progressive Web Applications with Orbitus PWA utilities. These tools help you add offline support, push notifications, and app-like experiences to your web applications.

What is a PWA?

A Progressive Web App (PWA) is a web application that can work offline and be installed on devices like a native app, while maintaining all the benefits of the web.

Service Workers

Orbitus includes a pre-configured service worker setup:


// src/app/sw.ts
/// <reference lib="webworker" />
const sw = self as unknown as ServiceWorkerGlobalScope;
 
(sw as unknown as { ORBITUS_SW_CONFIG?: Record<string, unknown> }).ORBITUS_SW_CONFIG = {
  defaultUrl: 'https://orbitus.dev',
  icon: '/favicon/android-chrome-192x192.png',
  badge: '/favicon/apple-touch-icon.png',
  vibrate: [100, 50, 100],
};
 
await import('@orbitusdev/core/pwa/sw');
export {};

Push Notifications

Enable push notifications for your app:


// Request permission
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    // Subscribe to push
    navigator.serviceWorker.ready.then(registration => {
      registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY
      });
    });
  }
});

App Manifest

Orbitus automatically handles the app manifest. Configure it in your next.config.ts:


{
  "name": "Orbitus App",
  "short_name": "Orbitus",
  "description": "A modern web application",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/favicon/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Offline Support

Service workers cache your app shell and critical resources:


// In your service worker
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Installation

Users can install your PWA by:

Visiting your app in a browser
Clicking the “Install” button (if available)
Launching the app like a native app

Best Practices

Always serve over HTTPS
Provide a valid manifest.json
Implement proper caching strategies
Test offline functionality
Monitor service worker updates
Handle update notifications