PWA

bun add @absolutejs/pwa

bun add @absolutejs/pwa

import {
  initInstallPrompt,
  onInstallable,
  promptInstall,
  canInstall,
} from "@absolutejs/pwa/client";

initInstallPrompt(); // once at boot

// React to availability (show/hide your install button):
const off = onInstallable((installable) => setShowInstall(installable));

// From a click handler (must be a user gesture):
const accepted = await promptInstall();

import {
  createWebAppManifest,
  pushServiceWorker,
  createWebPush,
} from "@absolutejs/pwa";

const ICON = "/icons/app-512.png";

// Serve as application/manifest+json at /manifest.webmanifest
export const manifest = createWebAppManifest({
  name: "My App",
  shortName: "MyApp",
  themeColor: "#6366f1",
  icons: [
    { src: ICON, sizes: "192x192", type: "image/png", purpose: "any" },
    { src: ICON, sizes: "512x512", type: "image/png", purpose: "any" },
  ],
});

// Serve as text/javascript at /sw.js with header `Service-Worker-Allowed: /`.
// Pass `offline` to also precache an app shell + serve a fallback page when a
// navigation fails offline, and cache same-origin assets cache-first.
export const sw = pushServiceWorker({
  icon: ICON,
  offline: { fallback: "/offline.html", assetPrefix: "/assets/" },
});

// VAPID sender — pass empty/unset keys and it no-ops (isConfigured() === false),
// so push degrades gracefully to your email/in-app fallback.
const push = createWebPush({
  publicKey: process.env.VAPID_PUBLIC_KEY,
  privateKey: process.env.VAPID_PRIVATE_KEY,
  subject: "mailto:you@example.com",
});

// Fan out to a user's devices; prune whatever it reports gone.
const { gone } = await push.sendMany(subscriptions, {
  title: "New match",
  body: "Acme Co. just replied.",
  url: "/inbox",
});
await pruneEndpoints(gone); // your storage

new Elysia()
  .get("/manifest.webmanifest", ({ set }) => {
    set.headers["content-type"] = "application/manifest+json";
    return manifest;
  })
  .get("/sw.js", ({ set }) => {
    set.headers["content-type"] = "text/javascript";
    set.headers["service-worker-allowed"] = "/";
    return sw;
  });

import {
	createWebAppManifest,
	createWebPush,
	pushServiceWorker
} from '@absolutejs/pwa';
import { Elysia } from 'elysia';

const ICON = '/icons/app-512.png';

const manifest = createWebAppManifest({
	icons: [
		{ purpose: 'any', sizes: '192x192', src: ICON, type: 'image/png' },
		{ purpose: 'any', sizes: '512x512', src: ICON, type: 'image/png' }
	],
	name: 'My App',
	shortName: 'MyApp',
	themeColor: '#6366f1'
});

// Pass `offline` to also precache an app shell and serve a fallback
// page when a navigation fails offline.
const sw = pushServiceWorker({
	icon: ICON,
	offline: { assetPrefix: '/assets/', fallback: '/offline.html' }
});

new Elysia()
	.get('/manifest.webmanifest', ({ set }) => {
		set.headers['content-type'] = 'application/manifest+json';

		return manifest;
	})
	.get('/sw.js', ({ set }) => {
		set.headers['content-type'] = 'text/javascript';
		set.headers['service-worker-allowed'] = '/';

		return sw;
	});

// VAPID sender — with empty/unset keys it no-ops, so push degrades
// gracefully to your email or in-app fallback.
const push = createWebPush({
	privateKey: process.env.VAPID_PRIVATE_KEY,
	publicKey: process.env.VAPID_PUBLIC_KEY,
	subject: 'mailto:you@example.com'
});

// Fan out to a user's devices; prune whatever it reports gone.
const { gone } = await push.sendMany(subscriptions, {
	body: 'Acme Co. just replied.',
	title: 'New match',
	url: '/inbox'
});
await pruneEndpoints(gone); // your storage

import {
	getPushStatus,
	registerServiceWorker,
	subscribeToPush,
	unsubscribeFromPush
} from '@absolutejs/pwa/client';

// At boot:
await registerServiceWorker(); // defaults to "/sw.js"

// Toggle on: returns the subscription JSON — POST it to your own route.
const subscription = await subscribeToPush(vapidPublicKey);
await fetch('/push/subscribe', {
	body: JSON.stringify(subscription),
	method: 'POST'
});

// Toggle off: returns the endpoint to drop server-side.
const endpoint = await unsubscribeFromPush();
await fetch('/push/unsubscribe', {
	body: JSON.stringify({ endpoint }),
	method: 'POST'
});

const status = await getPushStatus();
// { supported, permission, subscribed }

import {
	canInstall,
	initInstallPrompt,
	onInstallable,
	promptInstall
} from '@absolutejs/pwa/client';

initInstallPrompt(); // once at boot

// React to availability (show/hide your install button):
const off = onInstallable((installable) => setShowInstall(installable));

// From a click handler (must be a user gesture):
const accepted = await promptInstall();

import {
	detectEmbeddedBrowser,
	getBrowserCapabilities
} from '@absolutejs/pwa/client';

const capabilities = getBrowserCapabilities();
if (!capabilities.pushNotifications && capabilities.embeddedBrowser) {
	showOpenInBrowserHelp(capabilities.embeddedBrowser.app);
}

// Pure classification is available for SSR and tests.
detectEmbeddedBrowser(request.headers.get('user-agent') ?? '');