webpack-encore icon indicating copy to clipboard operation
webpack-encore copied to clipboard

Improve support for service workers

Open codedmonkey opened this issue 2 years ago • 3 comments

Service workers are a big part of modern web apps and while it's technically possible to create a service worker with Encore, to my knowledge it isn't straightforward.

  • The service worker needs to exist in a separate entry, with no shared runtime.
  • For the service worker to function correctly without additional server configuration, it needs to exist at the root of the domain.

These hurdles can be overcome with some changes to the Encore configuration, but at this point, it still generates manifest.json and entrypoints.json files for the entry, even though they aren't required and actually collide with the web manifest spec. (why two separate specs use the same manifest.json filename is beyond me, but here we are).

Since Encore is optimized for building full web applications, having first-party support for service workers would be awesome. The JS ecosystem isn't my biggest strength, so apologies if this is already possible with plugins.

codedmonkey avatar Sep 09 '22 12:09 codedmonkey

I don't have any direct experience with service workers yet, which is basically why this hasn't been given any specific thought in Encore. I have no idea what would be involved - but I would welcome a proposal of how we think it should work or a PR :).

Cheers!

weaverryan avatar Sep 09 '22 12:09 weaverryan

Same problem here, if I find something I will definitely try to make a PR out of it.

Looks like the "recommended" way is Google's Workbox plugin, but on first examination it doesn't fit my use-case. But it might work for other people.

codedmonkey avatar Sep 12 '22 14:09 codedmonkey

@codedmonkey I'm one of the maintainers of the Drupal Progressive Web App module, and involved in the 2.x port to Workbox. While it was probably true at some point that placing the service worker anywhere but at the root of the domain was iffy, nowadays, at least in my testing, every major browser works completely fine regardless of where the service worker is served from via the scope key in the second parameter to navigator.serviceWorker.register(). This is how we do it:

    navigator.serviceWorker
      .register(drupalSettings.pwa.installPath, {
        scope: drupalSettings.path.baseUrl
      })
      .catch(function (error) {
        // Something went wrong.
        console.warn('Serviceworker Registration failed', error);
      });

I could be mistaken, but I don't think there's any configuration necessary on the server for this?

Ambient-Impact avatar Nov 06 '22 23:11 Ambient-Impact