How to avoid layout breakage in a PWA project?

Asked

Viewed 57 times

1

When listing the files you want to cache with the service worker version, most of the time we put the style file, to be accessible offline.

With this, when there is a change of CSS, in production the application can suffer with this divergence of cache of "html/javascript" and css.

Even when you remove the css file from the cache listing, this break can happen.

In the PWA scenario, which solutions they usually use or the best solution they adopt so there is no layout break in a new version of a PWA?

Ex: add query string, when there is a change with a lot of chance of breaking and etc...

javascript html css pwa

1 answer

2


There’s one way to do it that I think can fit you. I forgot the name of this technique, but it does a "versioning" of the CSS file URL, this makes the browser always download the "new" CSS. What you actually do is change a parameter in the CSS URL, so you force the browser to cache with the "new" file path.

Follow an example note that initially I have a file css.css and then I’ll change the background style in . css and I’ll save in HTML the URL of the file as css.css?v=2 and then css.css?v=3 and so on. Note that the archive is always the css.css and I just change the ?v=xxx which comes after in the file name, this would even work for more complex paths like src\main\webapp\resources\css\css.css?v=1 where in the compilation you would trade only the end for ?v=2 for example. This alone is enough to make the browser reindexe its .css

inserir a descrição da imagem aqui

To automate this I really do not know, but I believe that some compiler type Webpack for PWA has this functionality.

  • 1

    Thank you @hugocsl, I really liked this technique, it opened my mind to the possibilities. Searching found this with the term "query strings", and the coolest, serves for javascript tbm, in the same way.

  • 1

    @David eh isso ai, da para usar ate com imagem rss, I myself discovered this to make the browser put a new favicon in the tab, favicon usually gets so impregnated in the cache that only so I could solve.

  • Really, favicon gets/gets impregnated kkk vlw Bro !

Browser other questions tagged javascript html css pwa

You are not signed in. Login or sign up in order to post.