Progressive Enhancement in MPAs — Building Without JavaScript Dependency

<!-- This form works without ANY JavaScript -->
<form method="POST" action="/search"
      class="search-form"
      data-enhanced>
    <label for="search-input">Search products:</label>
    <input type="search"
           id="search-input"
           name="q"
           placeholder="Search..."
           required
           minlength="2">

    <button type="submit">Search</button>
</form>

<!-- Results display — works with both full page load and AJAX -->
<div id="search-results">
    <% if (locals.results) { %>
        <h2>Search Results for "<%= query %>"</h2>
        <% if (results.length > 0) { %>
            <ul>
                <% results.forEach(result => { %>
                    <li>
                        <a href="<%= result.url %>">
                            <%= result.title %>
                        </a>
                        <p><%= result.description %></p>
                    </li>
                <% }); %>
            </ul>
        <% } else { %>
            <p>No results found for "<%= query %>".</p>
        <% } %>
    <% } %>
</div>

// Progressive enhancement — add JS features only if supported
(function() {
    // Check if browser supports required features
    const supports = {
        fetch: 'fetch' in window,
        querySelector: 'querySelector' in document,
        formData: 'FormData' in window,
        history: 'pushState' in window.history
    };

    if (!supports.fetch || !supports.formData) {
        console.log('Browser does not support enhancement features');
        return; // Core HTML experience remains
    }

    // Enhance search form with AJAX
    const searchForm = document.querySelector('.search-form');
    if (!searchForm) return;

    // Remove required attribute — we handle validation ourselves
    // but the HTML validation still works as fallback
    searchForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const query = formData.get('q');

        // Show loading state
        const resultsContainer = document.getElementById('search-results');
        resultsContainer.innerHTML = '<p aria-live="polite">Searching...</p>';

        try {
            const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
                headers: { 'Accept': 'text/html' }
            });

            if (!response.ok) {
                throw new Error('Search failed');
            }

            const html = await response.text();
            resultsContainer.innerHTML = html;

            // Update URL without page reload
            window.history.pushState(
                { search: query },
                '',
                `/search?q=${encodeURIComponent(query)}`
            );

            // Manage focus for screen readers
            resultsContainer.querySelector('h2')?.focus({ preventScroll: true });
        } catch (error) {
            // Fallback: full page load
            window.location.href = `/search?q=${encodeURIComponent(query)}`;
        }
    });
})();

// Test that the application works without JavaScript
async function testProgressiveEnhancement() {
    const tests = [
        {
            name: 'Navigation works without JS',
            run: () => {
                // All links use normal <a href> — no onclick
                const links = document.querySelectorAll('a[onclick]');
                return links.length === 0;
            }
        },
        {
            name: 'Forms submit without JS',
            run: () => {
                const forms = document.querySelectorAll('form');
                return Array.from(forms).every(form => {
                    return form.action && form.method;
                });
            }
        },
        {
            name: 'Content is in HTML (not JS-rendered)',
            run: () => {
                const main = document.querySelector('main');
                return main && main.textContent.trim().length > 0;
            }
        },
        {
            name: 'No empty containers waiting for JS',
            run: () => {
                const containers = document.querySelectorAll('[data-js-content]');
                return Array.from(containers).every(container => {
                    return container.innerHTML.trim() !== '';
                });
            }
        },
        {
            name: 'Form labels are associated with inputs',
            run: () => {
                const inputs = document.querySelectorAll('input, select, textarea');
                return Array.from(inputs).every(input => {
                    return input.labels.length > 0 || input.getAttribute('aria-label');
                });
            }
        }
    ];

    const results = tests.map(test => ({
        name: test.name,
        passed: test.run()
    }));

    console.table(results);
    return results;
}

// Expected output:
// ┌────────────────────────────────────────────────────┬────────┐
// │ name                                              │ passed │
// ├────────────────────────────────────────────────────┼────────┤
// │ Navigation works without JS                       │ true   │
// │ Forms submit without JS                           │ true   │
// │ Content is in HTML (not JS-rendered)              │ true   │
// │ No empty containers waiting for JS                │ true   │
// │ Form labels are associated with inputs            │ true   │
// └────────────────────────────────────────────────────┴────────┘