JavaScript Service Worker Registration Scope Fix

// Wrong — scope defaults to the service worker file's location
// If sw.js is in /js/sw.js, scope is /js/
navigator.serviceWorker.register('/js/sw.js');

// Right — specify scope to control the entire site
navigator.serviceWorker.register('/sw.js', {
    scope: '/'
});

// Or place sw.js at the root — scope defaults to /
navigator.serviceWorker.register('/sw.js');

// Wrong — scope cannot be wider than the service worker's directory
navigator.serviceWorker.register('/blog/sw.js', {
    scope: '/' // This fails!
});
// Error: The path of the provided scope '/'
// is not under the max scope allowed '/blog/'

// Right — scope must be at or below SW location
navigator.serviceWorker.register('/blog/sw.js', {
    scope: '/blog/'
});

// Wrong — assumes registration succeeded
navigator.serviceWorker.register('/sw.js');

// Right — check registration result and scope
navigator.serviceWorker.register('/sw.js', { scope: '/' })
    .then((registration) => {
        console.log('SW registered. Scope:', registration.scope);
        console.log('Active:', registration.active ? 'yes' : 'no');
    })
    .catch((error) => {
        console.error('Registration failed:', error.message);
    });

// Wrong — registering without unregistering previous workers
navigator.serviceWorker.register('/sw-v2.js');

// Right — check which SW is active
navigator.serviceWorker.getRegistration('/').then((reg) => {
    if (reg && reg.active) {
        console.log('Active SW:', reg.active.scriptURL);
    }
    // Register new one — old will be replaced on next page load
    navigator.serviceWorker.register('/sw-v2.js', { scope: '/' });
});

// Wrong — default cache behavior may serve stale SW
navigator.serviceWorker.register('/sw.js');

// Right — control cache behavior
navigator.serviceWorker.register('/sw.js', {
    scope: '/',
    updateViaCache: 'none' // Always check for updates
});