chore(service-worker) migrate to service-worker-webpack

[tatethurston]

Following up on tatethurston/service-worker-webpack#1

• commit message named according to Contributing Guide
• npm run codestyle is OK
• npm test is OK

[coderaiser]

Nice, thank you! Have you checked if it's working?

[coderaiser]

I have next error:

[coderaiser]

I have a service worker file I want to register

 entry: join(__dirname, '..', 'client', 'sw', 'sw.js'),

You just remove it, how should it be handled as service worker?

[tatethurston]

I have a service worker file I want to register

 entry: join(__dirname, '..', 'client', 'sw', 'sw.js'),

You just remove it, how should it be handled as service worker?

If you take a look at the new dependency, you’ll see that it generates the service worker using workbox, rather than registering a custom service worker that you author.

[coderaiser]

But I have a custom service worker and need it to work with webpack v5

[tatethurston]

But I have a custom service worker and need it to work with webpack v5

Do you need a custom service worker? The last time I looked the generated service worker covered your use cases.

Tell me more about the webpack 5 concern?

[coderaiser]

I want to migrate to rspack, it can be faster, and it supports only webpack 5.
About custom service worker file, it caches files but next requests are excluded:

    if (url.endsWith('/') || /\^\/fs/.test(pathname))
        return;
    
    if (!isGet(request))
        return;
    
    if (!isBasic(request))
        return;
    
    if (pathname.startsWith('/api'))
        return;
    
    if (/^socket.io/.test(pathname))
        return;

[tatethurston]

I want to migrate to rspack, it can be faster, and it supports only webpack 5. About custom service worker file, it caches files but next requests are excluded:

    if (url.endsWith('/') || /\^\/fs/.test(pathname))
        return;
    
    if (!isGet(request))
        return;
    
    if (!isBasic(request))
        return;
    
    if (pathname.startsWith('/api'))
        return;
    
    if (/^socket.io/.test(pathname))
        return;

I want to migrate to rspack, it can be faster, and it supports only webpack 5. About custom service worker file, it caches files but next requests are excluded:

    if (url.endsWith('/') || /\^\/fs/.test(pathname))
        return;
    
    if (!isGet(request))
        return;
    
    if (!isBasic(request))
        return;
    
    if (pathname.startsWith('/api'))
        return;
    
    if (/^socket.io/.test(pathname))
        return;

You can do excludes like this by configuring workbox. This is referenced in service-worker-webpack's documentation. An example can also be seen here. Alternatively, you can use https://www.npmjs.com/package/next-service-worker which wraps service-worker-webpack with excludes for nextjs.

Unfortunately I don't have bandwidth to assist with this further, so feel free to close this PR if you'd like to pursue another option.