How to reference built files for caching in Service Worker?

[baffalop]

I'm developing a PWA with Parcel and Elm. I'm trying to cache all my files on install in the Service Worker. The cache API wants string paths to my assets. Using require('path/to/file') works fine for media, but seems to fail on JS, CSS or HTML because the contents is evaluated by the require. How do I work around this?

Example code:

const someMediaAssets = [
  require('./img/background.png'),
  require('./img/title.png'),
  // etc.
]

// added by parcel-plugin-static-files-copy; no need for require
const staticMediaAssets = [
  '/audio/intro.mp3',
  '/audio/etc.mp3',
]

// built code assets: these fail
const codeAssets = [
  require('/index.html'),
  require('/index.js'),
]

async function cacheOnInstall () {
  const filesToCache = someMediaAssets.concat(staticMediaAssets, codeAssets)
  const cache = await caches.open(CACHE_NAME)
  return cache.addAll(filesToCache)
}

self.addEventListener('install', event => {
  event.waitUntil(cacheOnInstall())
})

[baffalop]

Looks like there's a plugin for this: parcel-plugin-sw-asset-urls. Though in the end I switched to using Workbox and no longer have the need. It appears the plugin plays havoc with ESM module imports, so beware.

[ProLoser]

Can't you import 'url:someasset.png'?

[baffalop]

Can you elaborate? Would I put that at the top of the file?

[ProLoser]

Parcel has special import syntax support so you can do special imports like url:... but I don't recall where it's documented

[mischnic]

https://v2.parceljs.org/configuration/plugin-configuration/#predefined-(offical)-named-pipelines

(But just importing it doesn't do anything in a service worker.)

[ProLoser]

Does this help?

{
  "extends": "@parcel/config-default",
  "transformers": {
    "raw:*": ["...", "@parcel/transformer-raw"]
  }
}

[ProLoser]

I believe this one is a slightly tweaked version of url: but I don't recall if this fixed our worker problems or if we were trying to import JS as a string

[baffalop]

Ah this looks like it would help! At the time I was running into this issue I was using v1, but next time I will try this with v2.