4

I'm trying to get sw-precache to pre-cache external CDN resources, but the generated service-worker.js doesn't contain the CDN url's in the precacheConfig array.

This is what I have in my gulpfile:

staticFileGlobs: [
    'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css',
     'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
]

The files inside my local client/assets folder are added to the precacheConfig array, but the external font-awesome css isn't. Is there a way to achieve this?

zeosamaster
  • 43
  • 1
  • 6

1 Answers1

10

sw-precache can only precache and keep up to date local assets, like those that match the client/assets/**/*... pattern you're using. It's not meant to work with remote assets that are accessed via CDN.

You have a couple of approaches:

  1. Use npm (or the package manager or your choice) to download a local copy of the resource (i.e. font-awesome) and then deploy that third party resource alongside your first-party assets. If the third-party code is picked up by a pattern you pass to staticFileGlobs then it can be precached and versioned just like anything else local.

  2. Use runtime caching to handle the resource on the CDN. Since the URL for your specific asset includes a 4.0.3 versioning string, it's safe to assume that the underlying contents will never change, and a cacheFirst strategy is probably safe.

You can modify your sw-precache configuration to look like the following:

{
  staticFileGlobs: [
    'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
  ],
  runtimeCaching: [{
    urlPattern: /^https:\/\/netdna\.bootstrapcdn\.com\//,
    handler: 'cacheFirst'
  }],
  // ...any other config options...
}

That configuration is broad enough to pick up anything served off that CDN, cache it, and then serve it cache-first once in subsequent visits.

Please note that your example used an http: protocol for your CDN's URL, and you'll need to use https: to obtain a response that plays nicely with service worker caching.

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Thanks for your reply. I already have a runtimeCaching urlPattern like you suggested, my problem occurred when a user would access my pwa for the first time (pre-caching everything in staticFileGlobs) and then accessed it offline on the second visit. The font-awesome was never downloaded by the service-worker, because the only time it was downloaded by the browser was when the service-worker was still installing (meaning the runtimeCaching wasn't yet in use). – zeosamaster Nov 15 '16 at 15:28
  • I had already considered using a local copy but was wondering if there was a way to avoid it. I'm gonna use that approach, like you suggested. Thanks for your note also, I wasn't aware of that :) – zeosamaster Nov 15 '16 at 15:31
  • @zeodamaster hack around that by loading an hidden iframe containing your page after the service worker installs – oligofren Jan 05 '18 at 08:03
  • Hi,this is more useful for me.Can I exclude my subsite url for precaching – kamalav Mar 02 '18 at 10:07