{"id":2853,"date":"2024-02-06T13:52:49","date_gmt":"2024-02-06T13:52:49","guid":{"rendered":"https:\/\/salientsoft.co.uk\/?p=2853"},"modified":"2024-02-07T10:49:41","modified_gmt":"2024-02-07T10:49:41","slug":"progressive-web-apps-dynamic-cache-script-creation","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=2853","title":{"rendered":"Progressive Web Apps – Dynamic Cache Script Creation"},"content":{"rendered":"\n

My PWAs dynamically create and load a url cache in the service worker, when the installation event fires.
As this cache contains all the files in the dist\/project-name directory tree (i.e. the entire deployment) for an angular app, I was keen to create the script containing the list of files to be cached dynamically as a post build step, so that the post build script could be generic and adaptive to the build contents.<\/p>\n

This turned out to be pretty straightforward. The following points are noteworthy:<\/p>\n

    \n
  1. I wanted to dynamically create a JS file which defined an array containing the urls of all the files to be cached. This script would then be included by the service worker to be used when it created and loaded the cache, during its install event.<\/li>\n
  2. The above JS file was imported by the service worker script. I had some issues getting this to work via modules\/module support, and noted from this post here<\/a><\/strong> that using the importScripts<\/strong><\/em> function instead (e.g. importScripts(‘pwa-cache-urls.js’);<\/em><\/strong>) gave better cross browser support\/backwards compatibility. I therefore switched to using importScripts<\/strong><\/em> and it all worked fine.<\/li>\n
  3. glob.sync<\/strong><\/em> was used to generate an array containing all the deployed files to be cached, excluding directories using {nodir: true}<\/strong><\/em>. This was then mapped\/formatted as required into a string containing all the script for the file.<\/li>\n
  4. fs.writeFileSync<\/strong><\/em> was used to create the script file from the above string.<\/li>\n
  5. The project name and the generated script file name were passed as arguments to the post build file, in package.json<\/strong><\/em>. Whilst I did look for a dynamic way to derive\/lookup the project name, an easy way to do this was not obvious and there was no loss of flexibility in just passing it in the postbuild script definition in package.json, along with the name of the dynamically created script file.<\/li>\n<\/ol>\n

    This all worked fine, and I was able to create a generic post build script that would be able to discover the files to be cached dynamically and create the script for them, for any angular project I was working with.<\/p>\n

    The prototype example code for the post build is below:<\/p>\n

    \n

    const glob= require(‘glob’);
    const fs = require(‘fs’);<\/p>\n

    const args = process.argv;
    validateArgs(args);
    const projectName = args[2];
    const cacheJSFileName = args[3];<\/p>\n

    const pathPrefix = ‘dist\/’ + projectName + “\/”;
    const cacheJSFilePath = pathPrefix + cacheJSFileName;<\/p>\n

    fs.writeFileSync(cacheJSFilePath, buildCacheJSFile());<\/p>\n

    function validateArgs(args) {
    \u00a0 const argErrors = [
    \u00a0 \u00a0 “Project Name and Cache Filename were not passed to post-build.js”,
    \u00a0 \u00a0 “Cache Filename was not passed to post-build.js”
    \u00a0 ]
    \u00a0 if (args.length < 4) {
    \u00a0 throw new Error(argErrors[args.length – 2]);
    \u00a0 }
    }<\/p>\n

    function buildCacheJSFile() {
    \u00a0 const mapPathDelimiters = (path) => path.replaceAll(“\\\\”, “\/”);
    \u00a0 const mapPathPrefix = (path) => path.replace(pathPrefix, “”);<\/p>\n

    \u00a0 const cacheJSFilePrefix = “const CACHED_URLS = [\\r\\n ‘.\/'”;
    \u00a0 const cacheJSFileSuffix = “\\r\\n]\\r\\n”;
    \u00a0 const formatCacheJSFileEntry = (file) => “,\\r\\n ‘” + file + “‘”;<\/p>\n

    \u00a0 const cacheFiles = glob.sync(pathPrefix + “**”, {nodir: true});
    \u00a0 let mappedCacheFiles = cacheFiles.map((file) => mapPathPrefix(mapPathDelimiters(file)));
    \u00a0 let cacheJSFile = cacheJSFilePrefix;
    \u00a0 mappedCacheFiles.forEach( file => cacheJSFile += formatCacheJSFileEntry(file));
    \u00a0 cacheJSFile += cacheJSFileSuffix;
    \u00a0 return cacheJSFile;
    }<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

    My PWAs dynamically create and load a url cache in the service worker, when the installation event fires.As this cache contains all the files in the dist\/project-name directory tree (i.e. the entire deployment) for an angular app, I was keen to create the script containing the list of files to be cached dynamically as a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198,11,239,77],"tags":[16,15],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2853"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2853"}],"version-history":[{"count":6,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2853\/revisions"}],"predecessor-version":[{"id":2861,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2853\/revisions\/2861"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}