Polymer CLI Build | Cache Busting Techniques

Question

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!

Answer 1

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.)

Answer 2

While creating the build run polymer build sw-precache-config.js

Answer 3

I've created gulp-polymer-build to help with this very issue. It borrows from polymer-cli build code, and supports your build configs in polymer.json. It allows you to modify your source stream before building, and then modify the forked streams for all builds you've configured in polymer.json. This makes it easy to use gulp-rev and gulp-rev-replace to do asset versioning.