Add comments to sw.js showing relationship between routingStrategy and pwa.yaml

[tacman]

Description

When debugging, I look at sw.js to understand what's going on

});
workbox.routing.registerRoute(
  new RegExp('{/items/.*$}'),
  cache_1_0
);
const cache_1_1 = new workbox.strategies.NetworkOnly({
  plugins: [new workbox.backgroundSync.BackgroundSyncPlugin('add',{
    "maxRetentionTime": 1440,
    "forceSyncFallback": false, "onSync": async ({queue}) => {
    try {
        await queue.replayRequests();
    } catch (error) {
        // Failed to replay one or more requests
    } finally {
        remainingRequests = await queue.getAll();
        const bc = new BroadcastChannel('add-item');
        bc.postMessage({name: 'add', remaining: remainingRequests.length});
        bc.close();
    }
}
})]
});
workbox.routing.registerRoute(
  new RegExp('|/add|'),
  cache_1_1
);
const cache_2_0 = new workbox.strategies.CacheFirst({
  cacheName: 'fonts',plugins: [new workbox.expiration.ExpirationPlugin({
    "maxEntries": 75,
    "maxAgeSeconds": 31536000
}), new workbox.cacheableResponse.CacheableResponsePlugin({
    "statuses": [
        0,
        200
    ]
})]

Example

What I'd like to see is more comments in the sw.js that show why the code was generated.

            background_sync:
                - queue_name: 'items'
                  match_callback: 'regex: {/items/.*$}'
                  broadcast_channel: 'items-sync'

// pwa.yaml service_worker/workbox/background_sync: {queue_name: 'items', match_callback: "'regex: {/items/.*$}'", broadcast_channel: 'items-sync'"
workbox.routing.registerRoute(
  new RegExp('{/items/.*$}'),
  cache_1_0
);
const cache_1_1 = new workbox.strategies.NetworkOnly({
  plugins: [new workbox.backgroundSync.BackgroundSyncPlugin('add',{
    "maxRetentionTime": 1440,
    "forceSyncFallback": false, "onSync": async ({queue}) => {
    try {
        await queue.replayRequests();
    } catch (error) {
        // Failed to replay one or more requests
    } finally {
        remainingRequests = await queue.getAll();
        const bc = new BroadcastChannel('add-item');
        bc.postMessage({name: 'add', remaining: remainingRequests.length});
        bc.close();
    }
}
})]
});

// another comment that describes where the comes from
workbox.routing.registerRoute(
  new RegExp('|/add|'),
  cache_1_1
);
const cache_2_0 = new workbox.strategies.CacheFirst({
  cacheName: 'fonts',plugins: [new workbox.expiration.ExpirationPlugin({
    "maxEntries": 75,
    "maxAgeSeconds": 31536000
}), new workbox.cacheableResponse.CacheableResponsePlugin({
    "statuses": [
        0,
        200
    ]
})]

I think I can do this, as I'm poking around that section of the code to understand RegExp(). WDYT?

[Spomky]

Yes, that's a good idea. As the debug variable is available, it will automatically adapt depending on the env

[Spomky]

Comments are now visible with debug mode enabled

[tacman]

It's great, thanks! May I make some tweaks? Or should I list my suggestions here?

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.