[Snippet] Download progress for precaching

[gravi2]

Hi: I have a small snippet that lets you show download progress percentage when precaching. I thought I will share it here for others. If there is other preferred/better way to contribute/share this, please let me know I will do the needful.

Hope this helps others.

1. Create a import script (e.g service-worker-import.js) with following code, that keeps track of the downloaded files:

//total files to be precached
var totalFiles = precacheConfig.length;
//files already precached
var processedFiles = 0;
//Original cleanResponse function from service-worker
var originalCleanResponseFunc = cleanResponse;

var cleanResponse = function(originalResponse) {
    processedFiles++;
    var percentage = parseInt((processedFiles / totalFiles) * 100);
    console.log('Percentage', percentage);
    self.clients.matchAll({
        includeUncontrolled: true,
        type: 'window'
    }).then(function(clients) {
        clients.forEach(function(client) {
            client.postMessage({
                'percentage': percentage
            });
        });
    });
    //finally call the original cleanResponseFunc
    return originalCleanResponseFunc(originalResponse);
};

2. In your service-worker-registration.js, listen for messages and do the needful DOM rendering.

navigator.serviceWorker.register('./service-worker.js')
        .then(function (reg) {
            console.log('ServiceWorker registration successful with scope: ', reg.scope);
            navigator.serviceWorker.addEventListener('message', function(event){
                console.log("message from SW : ", event.data.percentage);
                //update DOM to show the percentage. Replace this with 
                //DOM manipulation per your liking. 
                document.getElementById('spinner_percentage').innerHTML = event.data.percentage;
});

3. Make sure the import script (service-worker-import.js) is imported in your build scripts. For example in GruntFile.js

function writeServiceWorkerFile(rootDir, handleFetch, callback) {
    var config = {
        cacheId: packageJson.name,
        ...
        ...
        importScripts: ['./service-worker-import.js']
       };
    swPrecache.write(path.join(rootDir, 'service-worker.js'), config, callback);
}

[whmountains]

Thank you so much! I've been wondering how to do this for a long time.