Often, a PWA will use a combination of these strategies for different types of resources, configured via routing rules within the service worker's \`fetch\` event listener. Libraries like Workbox can simplify implementing these strategies.

` } }; const nav = document.getElementById('strategy-nav'); const contentArea = document.getElementById('strategy-content'); const navLinks = nav.querySelectorAll('a.nav-link'); function renderContent(strategyKey) { const data = STRATEGY_DATA[strategyKey]; if (!data) { contentArea.innerHTML = '

Error: Content not found.

'; return; } let html = `

`; html += `

${data.title}

`; if (data.content) { html += data.content; // Used for intro and choosing sections } else { html += `

`; if(data.flow) { html += `

Visual Flow:

${data.flow}

`; } html += `

How it works:

${data.howItWorks}

`; html += `

Use Case:

${data.useCase}

`; if (data.pros && data.pros.length > 0) { html += `

Pros:

`; data.pros.forEach(pro => html += `
• ✅ ${pro}
`); html += `

`; } if (data.cons && data.cons.length > 0) { html += `

Cons:

`; data.cons.forEach(con => html += `
• ❌ ${con}
`); html += `

`; } html += `

`; // end space-y-6 } html += `

`; contentArea.innerHTML = html; } function setActiveLink(targetLink) { navLinks.forEach(link => link.classList.remove('active')); targetLink.classList.add('active'); } nav.addEventListener('click', (e) => { const link = e.target.closest('a.nav-link'); if (link) { e.preventDefault(); const strategyKey = link.dataset.strategy || (link.getAttribute('href') === '#intro' ? 'intro' : null); if (strategyKey) { renderContent(strategyKey); setActiveLink(link); // Scroll content area to top smoothly contentArea.scrollTo({ top: 0, behavior: 'smooth' }); } } }); // Initial Load renderContent('intro'); setActiveLink(nav.querySelector('a[href="#intro"]')); });