ServiceWorker registration failed with localhost

Question

I'm very new to serviceWorker and I don't know what's wrong with my script. On my browser's console it appears:

ServiceWorker registration failed: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

And this is my script on app.js for registering serviceWorker:

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
});}

and the sw.js is in the same directory as the app.js.