How to handle nonce on entry.worker.js?

[TimoWestland]

I was following the steps in the offline guide using: https://remix-pwa.run/docs/main/offline which is using the epic-stack.

However, the epic stack uses a nonce on all scripts for the CSP. This nonce is not added to the entry.worker.js file that is created, which is causing this error to be logged to the console, and afaict, prevents the service worker from registering.

Is there a way to add the nonce to this service worker script?

[ShafSpecs]

I was following the steps in the offline guide using: https://remix-pwa.run/docs/main/offline which is using the epic-stack.

However, the epic stack uses a nonce on all scripts for the CSP. This nonce is not added to the entry.worker.js file that is created, which is causing this error to be logged to the console, and afaict, prevents the service worker from registering.

Is there a way to add the nonce to this service worker script?

@TimoWestland I didn't add support to modify the script injection, but you can disable the auto-script injection and use it yourself. In your vite.config.ts, set registerSW to null:

remixPWA({
  registerSW: null
})

And then, you can add the script to your root manually:

monorepo/packages/dev/src/plugins/loader.ts

Lines 13 to 38 in dda9d68

	[
	"<script type='module' id='vite-plugin-remix-pwa:loader::inject-sw' dangerouslySetInnerHTML={{",
	' __html: `',
	' async function register() {',
	` const reg = await navigator.serviceWorker.register('/${ctx.options.workerName}.js', {`,
	` scope: ${JSON.stringify(ctx.options.scope)},`,
	" type: 'classic',",
	" updateViaCache: 'none',",
	' })',
	'',
	' window.$ServiceWorkerHMRHandler$ = async () => {',
	' await reg.update();',
	' }',
	' }',
	'',
	" if ('serviceWorker' in navigator) {",
	" if (document.readyState === 'complete' || document.readyState === 'interactive') {",
	' register();',
	' } else {',
	" window.addEventListener('load', register);",
	' }',
	' }',
	' `}}',
	'/>',
	'</head>',
	]

scope here is /
workerName is entry.worker

I would work on extending the script support tho 👍!

[ShafSpecs]

Thanks for your suggestion ❤️! I am taking this into consideration for the next major roadmap, including shipping a component to do just this