PWA — Weblisk

Runtime Manifest

Web App Manifest generated and injected at runtime — no static JSON file needed.

Manifest injected at boot (see <head>)

import { enhance } from 'weblisk';

enhance('#demo-pwa-manifest', (el, { $ }) => {
  $('#btn-manifest').addEventListener('click', () => {
    const link = document.querySelector('link[rel="manifest"]');
    if (link) {
      $('#output-manifest').textContent =
        `Manifest injected at:\n  ${link.href}\n\n` +
        '(Generated at runtime by shell.js via pwa/manifest.js)';
    } else {
      $('#output-manifest').textContent =
        'No manifest <link> found';
    }
  });
});

Connectivity & Sync

Reactive online/offline signal plus sync engine status. Toggle network in DevTools.

Checking...

import { effect, enhance } from 'weblisk';
import { online, syncStatus, pendingCount } from 'weblisk/pwa/offline.js';

enhance('#demo-pwa-offline', (el, { $ }) => {
  effect(() => {
    const isOnline = online();
    const status = syncStatus();
    const pending = pendingCount();
    let text = `Network:  ${isOnline ? 'Online' : 'Offline'}\n`;
    text += `Sync:     ${status}\n`;
    text += `Pending:  ${pending} mutation(s) in queue\n\n`;
    text += 'Toggle network in DevTools → Network → Offline';
    $('#output-offline').textContent = text;
  });
});

Push Notifications

Request permission and show local notifications.

Permission: checking...

import { effect, enhance } from 'weblisk';
import {
  permission, requestPermission, notify
} from 'weblisk/pwa/push.js';

enhance('#demo-pwa-push', (el, { $ }) => {
  effect(() => {
    $('#output-push').textContent =
      `Permission: ${permission()}`;
  });

  $('#btn-push').addEventListener('click', async () => {
    const result = await requestPermission();
    $('#output-push').textContent = `Permission: ${result}`;
  });

  $('#btn-notify').addEventListener('click', async () => {
    if (permission() !== 'granted') {
      $('#output-push').textContent =
        'Permission not granted — click "Request Permission" first';
      return;
    }
    await notify('Weblisk Demo', {
      body: 'This is a local notification!',
      icon: '/images/favicon.svg'
    });
  });
});