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.
43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
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();
|
|
});
|
|
});
|