cachingpolymerbrowser-cachepolymer-cli

Polymer CLI Build | Cache Busting Techniques


A little background: My app is built on Polymer 2.x and is being hosted on a server that does not support HTTP/2 and does not have a certificate for HTTPS. We must support IE11, Chrome, Firefox, and Safari.

Problem: I'm running into an issue with browser caching. I was hoping to use the service worker that the Polymer CLI generates to handle the cache busting. However, since our client's server doesn't have HTTPS enabled, we are unable to utilize it. Regardless, we have to support IE 11 on a single build, so service workers aren't an option.

I cannot figure out a way to bust the cache on new deployments. On the Polymer CLI github page, there is an open issue regarding this topic, but there hasn't been any traction since 2016. From watching the YouTube videos on Polymer, it looks like there is (or used to be) a way to intercept the build using Gulp, but I can't seem to figure it out.

Any help is greatly appreciated!


Solution

  • You can use the polymer-build library if you want to build a Polymer project using gulp. You can read about it here:

    https://github.com/Polymer/polymer-build

    Briefly mentioned in the docs here:

    https://www.polymer-project.org/2.0/toolbox/build-for-production#use-polymer-build

    Then you can cache bust using something like gulp-rev, but you have to make sure that you're not rewriting the custom element names, just the filenames and import paths. (I tried this once with gulp-rev-all, and by default it was replacing <app-header> with <app-header-a9fe00> or something like that.)