search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.35k stars 1.3k forks source link

Offline mode - Service workers #813

Open hellonearthis opened 5 years ago

hellonearthis commented 5 years ago

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 commented 5 years ago

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: './hellonearthisman@gmail.com/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 commented 5 years ago

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

hellonearthis commented 5 years ago

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.
screenshot_1 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 commented 3 years ago

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 commented 2 years ago

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.