Web Component - Internal Browser Caching

Question

Looking at Chrome's DevTools on http://www.polymer-project.org/docs/polymer/polymer.html I notice a few interesting, curious, and unexplained things:

1. The browser caches the actual Polymer component, so subsequent <link rel="import" calls for the component don't need the server round trip.

2. The browser caches those components as data URLs

Obviously, doing this makes loading cached components very fast (0 ms latency)

My questions

1. How can I control the caching of my components so the cache can be invalidated if/when needed? (Looking at the spec at http://www.w3.org/TR/2014/WD-html-imports-20140311/ I see no mention of caching)

2. Would it be worthwhile to break down my entire site structure into web components (aka, "widgets"), so the various parts of my site load this fast? Example, Instead of always serving the same layout with the same nav, I just deploy it with a <my-nav> component, with the data for the nav (where it'd make sense) is all contained within the component itself, thus requiring no interaction with the server once cached.

Answer 1

It is easiest to control the cache on the server. You either need to provide eTags, change the date of the component file and use the Last-Modified header, or change the name of the file each time you change it.

Another way to handle this is to create a Service Worker and have that manage the caching of your files.