Preact-cli: Error 404 when registering Service Worker in GitHub Pages

[andrevargas]

Hello!

I'm new to this world of PWA's, so I'm trying to use Preact CLI as my first _real world_ experience. Therefore, I'm deploying my app to GitHub Pages, using gh-pages, to get HTTPS domain and stuff.

I'm trying to host my app in a URL like this: my-username.github.io/my-app-name. So, I'm getting an 404 error when registering the generated Service Worker.

And this makes sense! According to MDN, the path to my service worker file must be written relative to the origin, not my app's root directory.

So, the real problem here is that I don't have access to the script that registers the service worker, and I can't configure the path to be relative to the origin. The CLI registers the service assuming that it's hosted directly in root (/sw.js).

My question is: Is there a way I can configure the path to register the service worker file? Is there an option (maybe in Webpack config) that I can just override?

I'm really sorry if this question doesn't make sense or was already answered elsewhere, but I didn't find it. :disappointed: By the way, I'm really loving using Preact CLI. If there's something I can help in this case (code or docs), let me know. :coffee:

Thank you all for this awesome tool. :heart: :octocat:

[developit]

Ah looks like we need to do something to support a base path like that. FWIW I think gh-pages URLs would have issues with routing too, right now preact-cli kinda assumes it's producing a build that runs at the root of a domain.

[andrevargas]

@developit Yeah. This assumption is so true that when I first deployed, I got 404 when fetching the most basic files:

Of course this can be fixed just by overriding the template or some webpack config. But for service worker files, it's a special case.

Do you think it's relevant to add this option right now? Deploying to GitHub Pages may be a common use case for simple/learning purpose PWA's, since we need HTTPS.

[thangngoc89]

@andrevargas I think Github Pages is still the most popular choice for deploying a static sites.

[jeffposnick]

FWIW, passing in a relative URL to navigator.serviceWorker.register() is sometimes the right approach. The one reason not to use a relative URL is if you have subpaths underneath your top-level path. I don't know how common that would be with preact-cli-scaffolded web apps, but if there's a chance that navigations might be done to anything other than a single-level path, it's best to continue using absolute URLs.

On the create-react-app side of things, registration uses absolute URLs, with a previously-defined process.env.PUBLIC_URL prefix.

[reznord]

in CRA, it will ask you to add a home_page URL and it will use that as a the public_path. (IIRC)

[developit]

^ I'd be up for adding a --public-path /root-dir option to preact build, and/or looking for process.env.PUBLIC_URL.

[reznord]

I'd be up for adding a --public-path /root-dir option to preact build, and/or looking for process.env.PUBLIC_URL

I wouldn't go for a flag. It looks ugly.

Instead we can add it to the package.json and read it from there.

[developit]

Only issue there would be if you wanted to build with different output paths (maybe development and production). Perhaps it's best to leave this up to preact.config.js.

[prateekbh]

@reznord @developit @rkostrzewski i am planning a preact cli workbox plugin which will simplify all of this process without a flag, if we can get #85 to merge/review, or even get the discussion started

[nandubatchu]

@developit What is the current solution to this problem?

[helgeh]

Me too, I tried to host my app on Github Pages but the sw.js was requested from the root so no dice.

[lhuria94]

Facing the same issue. :(