pwa-helpers

import { installRouter } from 'pwa-helpers/router.js'; import { updateMetadata } from 'pwa-helpers/metadata.js'; import { installOfflineWatcher } from 'pwa-helpers/network.js'; // A dummy store and navigate action for the example const store = { dispatch: (action) => console.log('Dispatching action:', action) }; const navigate = (location) => ({ type: 'NAVIGATE', payload: location.pathname }); function handleNavigation(location, event = null) { console.log('Navigated to:', location.pathname); // Example of integrating with a Redux-like store store.dispatch(navigate(location)); // Update metadata based on the current route updateMetadata({ title: `My PWA - ${location.pathname.substring(1) || 'Home'}`, description: `Content for ${location.pathname}`, url: window.location.href }); if (event && event.type === 'click') { window.scrollTo(0, 0); console.log('Scrolled to top after click.'); } } // Install the router installRouter(handleNavigation); // Install the offline watcher installOfflineWatcher((offline) => { const message = offline ? 'You are currently OFFLINE' : 'You are currently ONLINE'; console.log(message); // Optionally update UI based on connectivity const statusElement = document.getElementById('network-status'); if (statusElement) statusElement.textContent = message; }); // Simulate a programmatic navigation setTimeout(() => { window.history.pushState({}, '', '/about'); handleNavigation(window.location); }, 2000); // Create a simple div for network status (if running in a browser environment) if (typeof document !== 'undefined') { const statusDiv = document.createElement('div'); statusDiv.id = 'network-status'; statusDiv.textContent = 'Checking network status...'; document.body.appendChild(statusDiv); }