Deploying to Netlify and service worker fails to register, works on localhost fine

Support
, , ,
#1

Netlify site name: toki81.netlify.app

So I am using remix.run and have my application deploying via GitHub rather than directly through the Netlify-cli. Not sure it will make a difference or not.

So when I run locally the service worker shows within the network tab on developer tools and all is ok.
When I deploy to Netlify it does not show up. Although the sw.js is present in the root folder along with the manifest.json. It is not registering for some reason inside the app?

The SW is added from entry.client.tsx in the application.

But I have no idea why it does not register when in production on Netlify?

This is the contents of the .toml file if it helps?

[build]
  command = "remix build"
  functions = "netlify/functions"
  publish = "public"

[dev]
  command = "remix watch"
  port = 3000

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server"
  status = 200


[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

Thanks.

#2

Where have you added the JavaScript logic to register the service worker? I’m not seeing it.

There’s no JS in your index.html and I don’t see any JS file being loaded:

image

#3

Well this is part of the problem. In localhost the js is present in the main build. This does not carry forward when deploying to Netlify?

The sw is generated in entry.client.jsx file.

//entry.client.jsx
import { hydrate } from 'react-dom';
import { RemixBrowser } from 'remix';

hydrate(<RemixBrowser />, document);

if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
		// we will register it after the page complete the load
		navigator.serviceWorker.register('/sw.js');
	});
}

the folder structure is like this if it helps.

/
/app/entry.client.jsx
/public/ has sw.js, manifest.json, etc

So I am not sure why none of the JS is put into the main folder root when it is deployed?

If I run in localhost sw works and in network on inspector I get this,

screen
screen783×289 13.3 KB

#4

Well, I can’t guess this from code snippets. Could you share a repo?

#5

Sorry I should have added that before.
Here you go. GitHub - 81mark/toki-blog: Marks Blog

#6

Looks like this needs some environment variables. Should I access them from your site settings?

#7

yes you can, thank you.

#8

I created an .env file and it still doesn’t work for me.

It keeps complaining about:

Error: error: Environment variable not found: DATABASE_URL.
  -->  schema.prisma:9
   | 
 8 |   provider             = "mysql"
 9 |   url                  = env("DATABASE_URL")
   | 

Validation Error Count: 1

My .env file looks like:

DATABASE_URL=<token>
SHADOW_DATABASE_URL=<token>
#9

You might need to run

npx prisma generate first, the .env in the root how you have detailed above looks correct.

#10

That was it, but there’s a new error:

Error: No session secret
    at Object.<anonymous> (/Users/hrishikesh/Desktop/toki-blog/netlify/functions/server/build/index.js:477:9)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/hrishikesh/Desktop/toki-blog/node_modules/@remix-run/serve/index.js:39:17
    at Layer.handle [as handle_request] (/Users/hrishikesh/Desktop/toki-blog/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/hrishikesh/Desktop/toki-blog/node_modules/express/lib/router/route.js:137:13)
#11

That’s related to the .env not having the SESSION_SECRET=
Its working on my end and in Netlify. Not sure why it is not seeing it on your end?

Is your .env at the same folder root level as the netlify.toml file? Apart from that I am not sure what it might be.

#12

Yeah I had not set that, I didn’t know it was needed.

But coming back to the actual problem here, I saw something interesting. So, on the first launch of the dev server, the service worker installed fine. However, after I uninstalled it, no matter what I do, it won’t install again.

Does the same happen with you?

This is all on localhost.

#13

Yes, I have just seen that. I can confirm the same behavior. I had not tried unregistering it before so not noticed that

#14

Yeah, I have no idea how the service worker got installed the first time. I thought since it got installed once it will get installed again and I could try to find its source, but that never happened. The service worker never gets added to the site’s generated code.

I believe you might have to ask for help with Remix devs on how to achieve this.

#15

Thanks for your help.
Yes I will ask at Remix. The entry.client.jsx file and hydrate is where it’s getting complicated, and I also cannot see where it’s actually generating the sw.