Offline mode - Service workers

[hellonearthis]

trafficstars

I've just been trying to add a service worker to try and make a PWA in the P5js Editor. https://editor.p5js.org/hellonearthisman/sketches/fwp_5jja3 has the code to setup the service worker. I tried putting the code in the index.html and in the sketch setup. I get this error (seen in console in present mode https://editor.p5js.org/hellonearthisman/present/fwp_5jja3 )

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

Any tips on how to get this to work or why it won't work are welcome.

[nucliweb]

Hi @hellonearthis

You define the sw.js file at the root of the site, but your file isn't in the root.

You need to add the scope

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js', {scope: './[email protected]/sketches/'})
    .then(function (registration) {
      console.log('Service worker registration succeeded:', registration);
    }, /*catch*/ function (error) {
      console.log('Service worker registration failed:', error);
    });
} else {
  console.log('Service workers are not supported.');
}

You can read about this in ServiceWorkerContainer.register()

[catarak]

@hellonearthis do you mean add a service worker to a specific sketch, or to the entire web editor application?

[hellonearthis]

Thanks @nucliweb I tried that out this afternoon and I guess the scope of the png will also be addressed in the same fashion. But I'm still getting the "Service worker registration failed: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script." I think it's something with the P5 web editor blocking the hot linking to data.
The scope is also removed from present code.

I this this is more of a web editor feature than a question for the discord forum. Setting up a PWS service worker isn't a problem outside of the web editor but if it worked from the web editor it would make the P5 editor a pretty cool application development system.

@catarak I was trying to a sketch into a PWA application but would love to see the entire web editor as a PWA but that would be difficult i think due to so many cloud resources being used.

[catarak]

I'm not sure how service workers would work in an individual sketch if they're not enabled for the entire application, so I think it makes sense to convert this issue to address app level service workers. Would be so great to have offline capabilities!

[captainbrosset]

Having the editor work offline and, better yet, be a PWA (Progressive Web App) so it can be installed locally would be amazing. I filed processing/p5.js/issues/5786 to propose the feature, and I'm happy to help work on it. In fact I'm planning to spend some time in September to hack on this idea.