-
Notifications
You must be signed in to change notification settings - Fork 200
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
handling caching issues #1202
Comments
In our team we ended up with using gulp-rev-all to generate fingerprints and rename files. This just works (after vulcanizing, minifying etc). |
@web-padawan thats great to know, ill give it a try |
@web-padawan Do you have a sample script how you use gulp-rev-all? |
This looks like this:
As you can see there are two tasks, and I'm using Pay attention to that second task relies on unique file names (via stripping all directories), to allow using those names without full paths in the elements code. |
@web-padawan how does it work since index.html is also precached by service worker ? |
Since the service worker is regenerated for each build, the cache should be invalidated with each build. |
@FredKSchott should that happen automatically after I deploy new, regenerated, version of service worker ? |
Every time you generate a service worker via build, it is created with a new unique key. When you deploy that service worker, the browser sees that it has been updated and updates the service worker. The new key corresponds to a new cache, so the cache is effectively busted. This isn't explained super clearly in the sw-precache README, but that has been my understanding of the behavior: https://github.com/GoogleChrome/sw-precache#dontcachebusturlsmatching-regex |
You are right - just made couple of tests locally and my service worker replaces all modified files as intended. Thing with deployed app is that |
@web-padawan Thanks. One doubt: Is this approach very slow for you too? |
@cbfranca the approach suggested by me is good as long as you handle file name changes during deployments. Imagine the situation: one page used to be We have some kind of workaround relying on special HTTP request header called |
This is fine for service worker, but what about appcache? |
In our team, we detect case when fragment was changed during deployment and force reloading page (instead of showing toast) exactly to avoid inconsistent state. |
Is there an example of this 'showing' toast (or even force reloading page, for that matter)? |
Both webcomponents.org and polymer focs site show toast "reload to update", but they use service workers. To force reload, you could just do |
OK, thanks. I was more curious about the mechanism behind the toast/reload. I see some clues here: https://stackoverflow.com/questions/41502870/service-worker-reload-page-on-cache-update where it is just about 'updatefound'->'statechanged' events, and then posting a message to the app, just like any other web worker. Also, here: https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js I don't see any mention of this mechanism in the PSK service worker. That would have been nice. |
@davidmaxwaterman the mechanism behind the reload used by us is as follows:
|
main issue with service workers is that safari/edge still lack support, so you are hosed on some platforms/devices if you go with that, until they implement support. |
@web-padawan we are trying to get this working. Started out by just running gulp with the file referenced here at https://github.com/PolymerElements/generator-polymer-init-custom-build/blob/master/generators/app/gulpfile.js. After that we stripped it down to be as simple as possible. As we never used gulp in our team, where in the pipe should one apply your two functions? Before or after bundling? |
@peterlauri the idea of the approach I mentioned is to apply |
For those stumbling on this thread, I've created gulp-polymer-build to help with this very issue. It borrows from |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen! |
Is there a way to add revisions/versioning on polymer.json to handle caching issues?
Right now, when we make any changes to one of the subpages in the project and release it to prod, we had to refresh everytime to get the latest changes. how do we handle this issue? I was thinking about maybe adding ?v=randomsting next to every html dependency, but I am not sure if its possible to do in the json. If I add hashing in the index.html, its loading the file twice and throwing polymer errors...
Any thoughts?
The text was updated successfully, but these errors were encountered: