Progressive Web App (PWA)

Zap.ts comes with built-in support for Progressive Web Apps (PWA), allowing your app to work offline, send push notifications, and provide a native-like experience on any device.

Overview

• Customizable: Easily update icons, theme color, and manifest settings.
• Installable: Users can install your app to their home screen or desktop.
• Offline Support: Users can access your app even without an internet connection.
• Performance: Faster load times and improved reliability with caching strategies.
• Push Notifications: Real-time notifications delivered via the browser's Push API and service worker.

How it works?

1. Service Worker

A service worker (public/sw.js) is registered automatically to handle caching, offline support, and push notifications.

2. Manifest

The PWA manifest (public/manifest.json) defines your app's name, icons, theme color, and how it appears when installed.

Note: The manifest.json is generated automatically at build time from your settings, so you don't need to edit it manually.

You can configure it in zap.config.ts.

// zap.config.ts
import { ZapSettings } from "@/zap/types/zap.config.types";
import { Metadata } from "next";

export const APP_NAME = "Zap.ts";
export const APP_DESCRIPTION =
    "Build application as fast as a zap.";
export const BASE_URL = DEV
    ? "http://localhost:3000"
    : "https://demo.zap-ts.alexandretrotel.org";

export const ZAP_DEFAULT_SETTINGS: ZapSettings = {
    // Other settings...
    PWA: {
        NAME: APP_NAME,
        SHORT_NAME: APP_NAME,
        DESCRIPTION: APP_DESCRIPTION,
        START_URL: "/",
        BACKGROUND_COLOR: "#ffffff",
        THEME_COLOR: "#000000",
        ICONS: [
            {
                src: "/icon-192x192.png",
                sizes: "192x192",
                type: "image/png",
            },
            {
                src: "/icon-512x512.png",
                sizes: "512x512",
                type: "image/png",
            },
        ],
    },
};

3. Push Notifications

Zap.ts integrates push notifications using the browser Push API and the service worker.
See Notifications & Emails for details on subscribing users and handling push events.

4. Customizing Your PWA

• Edit manifest: Change PWA settings to update app name, colors, and icons.
• Extend service worker: Add caching strategies or custom logic in sw.js.
• Update icons: Replace the icon files in public/.