Implemented guest-only PWA using vite-plugin-pwa (the actual published package; @vite-pwa/plugin isn’t on npm) with

injectManifest, a new typed SW source, runtime caching, and a non‑blocking update toast with an action button. The
  guest shell now links a dedicated manifest and theme color, and background upload sync is managed in a single
  PwaManager component.

  Key changes (where/why)

  - vite.config.ts: added VitePWA injectManifest config, guest manifest, and output to /public so the SW can control /
    scope.
  - resources/js/guest/guest-sw.ts: new Workbox SW (precache + runtime caching for guest navigation, GET /api/v1/*,
    images, fonts) and preserves push/sync/notification logic.
  - resources/js/guest/components/PwaManager.tsx: registers SW, shows update/offline toasts, and processes the upload
    queue on sync/online.
  - resources/js/guest/components/ToastHost.tsx: action-capable toasts so update prompts can include a CTA.
  - resources/js/guest/i18n/messages.ts: added common.updateAvailable, common.updateAction, common.offlineReady.
  - resources/views/guest.blade.php: manifest + theme color + apple touch icon.
  - .gitignore: ignore generated public/guest-sw.js and public/guest.webmanifest; public/guest-sw.js removed since it’s
    now build output.
This commit is contained in:
Codex Agent
2025-12-27 10:59:44 +01:00
parent efc173cf5d
commit 3e3a2c49d6
30 changed files with 3862 additions and 812 deletions

View File

@@ -0,0 +1,22 @@
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import PullToRefresh from '../PullToRefresh';
describe('PullToRefresh', () => {
it('renders children and labels', () => {
render(
<PullToRefresh
onRefresh={vi.fn()}
pullLabel="Pull"
releaseLabel="Release"
refreshingLabel="Refreshing"
>
<div>Content</div>
</PullToRefresh>
);
expect(screen.getByText('Content')).toBeInTheDocument();
expect(screen.getByText('Pull')).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,23 @@
import { describe, expect, it } from 'vitest';
import { getTabKey, getTransitionKind, isTransitionDisabled } from '../RouteTransition';
describe('RouteTransition helpers', () => {
it('detects top-level tabs', () => {
expect(getTabKey('/e/demo')).toBe('home');
expect(getTabKey('/e/demo/tasks')).toBe('tasks');
expect(getTabKey('/e/demo/achievements')).toBe('achievements');
expect(getTabKey('/e/demo/gallery')).toBe('gallery');
expect(getTabKey('/e/demo/tasks/123')).toBeNull();
});
it('detects tab vs stack transitions', () => {
expect(getTransitionKind('/e/demo', '/e/demo/gallery')).toBe('tab');
expect(getTransitionKind('/e/demo/tasks', '/e/demo/tasks/1')).toBe('stack');
});
it('disables transitions for excluded routes', () => {
expect(isTransitionDisabled('/e/demo/upload')).toBe(true);
expect(isTransitionDisabled('/share/demo-photo')).toBe(true);
expect(isTransitionDisabled('/e/demo/gallery')).toBe(false);
});
});

View File

@@ -0,0 +1,42 @@
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { vi } from 'vitest';
import { ToastProvider, useToast } from '../ToastHost';
function ToastTestHarness({ onAction }: { onAction: () => void }) {
const toast = useToast();
React.useEffect(() => {
toast.push({
text: 'Update ready',
type: 'info',
durationMs: 0,
action: {
label: 'Reload',
onClick: onAction,
},
});
}, [toast, onAction]);
return null;
}
describe('ToastHost', () => {
it('renders action toasts and dismisses after action click', async () => {
const onAction = vi.fn();
render(
<ToastProvider>
<ToastTestHarness onAction={onAction} />
</ToastProvider>
);
expect(screen.getByText('Update ready')).toBeInTheDocument();
const button = screen.getByRole('button', { name: 'Reload' });
fireEvent.click(button);
expect(onAction).toHaveBeenCalledTimes(1);
expect(screen.queryByText('Update ready')).not.toBeInTheDocument();
});
});