eframe_template
eframe_template copied to clipboard
clarification on how to deactivate the cache in development
In the ReadMe you have mentioned
assets/sw.js
script will try to cache our app, and loads the cached version when it cannot connect to server allowing your app to work offline (like PWA). appending#dev
toindex.html
will skip this caching, allowing us to load the latest builds during development.
Please could you indicate where to add the #dev
. Should I add it to the filesToCache
variable inside the sw.js
, should i rename the index.html
at the root folder or should I append it to the content of index.html
at the root folder.
Sorry if my question seems dumb
I finally found my way around this. It works by adding "#dev" to the filename of "index.html" at the root folder. In order to Trunk to still find the template, we must also update Trunk.toml:
target = "index.html#dev"
If you navigator has already cached your app, you must delete the cache manually.
Do you think it’s worth adding this to the README ?
you should add #dev
to the url. so, for example, http://localhost:8080/index.html#dev
.
It might be worth specifying this in the README. Although, i would prefer if we don't have any caching at all or if it was actively opt-in.
The above method is useful and works for me. Here is the summary.
Q: How to disable cache?
Step 0: Clear cache in your browser
Step 1: Rename the eframe_template/index.html
to eframe_template/index.html#dev
Step 2: Adding target = "index.html#dev"
to eframe_template/Trunk.toml
Step 3: Run trunk serve
and access http://localhost:8080/index.html#dev
then you will always see the updated version of your app.
If you want to disable the caching forever, the best method is to just delete (or comment out)
<!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->
<script>
// We disable caching during development so that we always view the latest version.
if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
window.addEventListener('load', function () {
navigator.serviceWorker.register('sw.js');
});
}
</script>
from the index.html
file.