Background Fetch

[Florent Morselli]

Description

First tries with BackgroundFetch shows it s not complicated to enable it.
But it requires JS on client and SW side. This could be managed with a Sti;ulus controller and a SW rule

Example

Stimulus controller:

• A fetch action with a list of URLs will call bgFetch. The action may have a title or icon as per spec
• When connected, the controller could check the IDs and report progress (progress event dispatched). The ID list is refreshed after a configurable timeout or after each fetch calls.

<button
    {{ stimulus_controller('@pwa/backgroundfetch') }}
    {{ stimulus_action('@pwa/backgroundfetch', 'fetch', 'click', {
         requests: ['/audio1.mp3', '/large_file.zip'],
         title: 'The archive for ......'
       })
     }}
>
Fetch all
</button>

SW rule:

• Allows the downloaded files to be cached
• Trigger messages on success, failure or click on the browser UI.
• Update the browser UI on success or failure

Side note: This does not need Workbox

[Tac Tacelosky]

What would be the way to trigger this without an action? That is, instead of 'click' have the downloads start on connect?

I like this strategy better than than using the weblink component to create links to be fetched because presumably we could hook into a UI.

In my particular case, the PWA is an audio tour for a museum exhibition. There is poor wifi in the exhibition space itself, so we're encouraging visitors to scan a QR code before they enter, which loads the PWA and the page specific to that musemm. First, of course, we prefetch all the application assets, then the data for that the specific museum and then we want to pre-cache the associated images and audio-files. I'd use this stimulus controller to do that, rather than

<link rel="preload" href="{{ preload('/audio1.mp3') }}"> 
<link rel="preload" href="{{ preload('/audio2.mp3') }}"> 

[Florent Morselli]

If you want to download data right after the user asked for the application installation, then the resource caching is the way to go.
With the version 1.2.x, it will become easy to declare the list of URLs to preload with generators.

To me, Background Fetch is suitable for your use case and it is perfectly fine to use a JS function that will be called when the body is loaded.
The Stimulus component I have in mind triggers the bg fetch after a user interaction. I don't know if it is possible to trigger the download after the page is loaded.