page_cache requires a regex, even if url provided

tacman commented 2 months ago

Version(s) affected

1.1.x

Description

The page_cache: has been changed to page_caches, and takes an array of page_cache.

But simply changing the example of what's listed in the documentation doesn't work, because it requires a cache_name and regex key. Both should have sensible defaults.

How to reproduce

        workbox:
            page_caches:
                - 
                    cache_name: staleWhileRevalidate # maybe make this the strategy name by default?
                    strategy: 'staleWhileRevalidate'
                    broadcast: true
                    broadcast_headers:
                        - 'X-App-Cache'
                    regex: / # what should this be
                    urls:
                    - 'app_homepage'

Possible Solution

The demo and documentation both need to be updated to the latest version of 1.1.x

workbox:
            page_cache:
                strategy: 'staleWhileRevalidate'
                broadcast: true
                broadcast_headers:
                    - 'X-App-Cache'
                urls:
                - 'app_homepage'

Additional Context

No response

Spomky commented 2 months ago

The changes are not well documented (I am updating the doc at the moment).

URLs is a list of precached pages and shall be under the regex otherwise it will never match. I think a verification should be added here to avoid confusion

Spomky commented 2 months ago

I am wondering how to simplify the config here. For example, if you want to cache all /pages/.* routes using the network first strategy, you have to write the following config:

pwa: 
    serviceworker: 
        enabled: true
        src: 'sw.js' 
        workbox:
            page_caches:
                - cache_name: 'pages'
                  regex: "\/pages\/.*"
                  urls: 
                    - 'app_tos'
                    - 'app_legal'
                    - 'app_features'

I think first I will change regex into matchCallback and allow any type of callback as shown on the Workbox documentation.

All pages the user navigates to: ({request}) => request.mode === 'navigate'
A specific page: ({url}) => url.pathname === '/special/url'
Using url properties: ({url}) => url.origin === 'https://api.foo.com'
A regex: '\/pages.*' or new Regexp('\/pages.*') (quotes are important!)

Next, I will create kind of recipes to ease the config:

pwa: 
    serviceworker: 
        enabled: true
        src: 'sw.js' 
        workbox:
            page_caches:
                - recipe: 'navigation"
                  urls: 
                      - ...

# Will be converted into
pwa: 
    serviceworker: 
        enabled: true
        src: 'sw.js' 
        workbox:
            page_caches:
                - cache_name: 'page_cache_recipe_0'
                  matchCallback: "({request}) => request.mode === 'navigate'"
                  urls: 
                    - ...

tacman commented 2 months ago

Will all preloaded urls (in the url: key) also be cached under that strategy then? if not, maybe change the key to preloaded: or something like that?

Also, can the cache name be automatically created if it's missing?

github-actions[bot] commented 1 month ago

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.

Spomky-Labs / pwa-bundle