sw-toolbox not working on gh-pages

Question

I made a simple AngularJS to-do app and used sw-toolbox. It is working fine on my localhost but when I am using it on gh-pages, few 404 errors are thrown on console and service worker is also showing 404 error while fetching scripts.

DEMO

CODE

Answer 1

The thrown error, TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script., tells us that the SW script itself was never found. The browser tried to fetch the script but was not able to since 404 was returned.

Very simple mistake. Your app tries to register the sw.js file from https://viveksharma619.github.io/sw.js while it's actually located in https://viveksharma619.github.io/PWA_simple_to_do/sw.js

The evil here is /sw.js - on your computer you were probably running the site in localhost:8080 when /sw.js was the real location but now the app lives inside PWA_simple_to_do folder and the sw.js script should be pointed to by either "sw.js" (current folder) or /PWA_simple_to_do/sw.js

Answer 2

Since gh pages are hosted using jekyll, jekyll version 3.3 by default ignores node_modules and vendor files. Hence, you won't be getting them when fetched from gh-pages. It will instead log "Failed to load resource" for sw-toolbox.js.

Your can bypass this by adding a simple .nojekyll file to the root of your github repository and your code will work just fine.