Πρόβλημα με jQuery στο mobile browser - Παίζει κανονικά σε Desktop - ΜΑΛΛΟΝ cachάρει τη JS

Καλησπέρα.

Αντιμετωπίζω ένα πρόβλημα με την jQuery σε κινητά [ το έχω τεστάρει σε Chrome + Safari σε iOS ] όπου κάθε φορά που κάνω update στον κώδικα της jQuery και περνάω το νέο αρχείο .js στον server ΔΕΝ ΑΛΛΑΖΕΙ ΤΙΠΟΤΑ.

Πιο συγκεκριμένα, έχω ένα <p> element όπου του βάζω τιμή αφού εκτελέσω κάποιο κώδικα στη JavaScript, όμως κάθε φορά που πειράζω το κώδικα αυτό, στο frontEnd δε φαίνεται καμία αλλαγή.

Έψαξα λίγο στο stackOverflow, αλλά δε λειτούργησε τίποτα από όσα πρότειναν. Γενικά, ο κώδικας είναι HTML+JS μόνο, δηλαδή ούτε κάποιο CMS ούτε κάποιο framework χρησιμοποιώ, πέρα από jQuery.

Μου φαίνεται ότι cachάρει ο browser τα αρχείο .js επειδή το πρόβλημα λύνεται αν καθαρίσω ιστορικό + cache στον browser, ωστόσο δεν είναι λογικό σε κάθε update που κάνω να πηγαίνω να σβήνω το ιστορικό.

Καμία ιδέα ΑΝ μπορεί να επιλυθεί με κώδικα ή κάποιο configuration για να μη μου cachάρει τη JS ή κάτι άλλο που ίσως φταίει ;

Είναι φυσιολογική η συμπεριφορά του browser. Δε χρειαζεται να σβήνεις το ιστορικό. Μετά από κάθε αλλαγή που κανεις, ανοίγεις νέα καρτέλα "ανώνυμης περιήγησης" (Incognito mode), και βλέπεις τις αλλαγές σου.

7 ώρες πριν, vagos405 είπε

Είναι φυσιολογική η συμπεριφορά του browser. Δε χρειαζεται να σβήνεις το ιστορικό. Μετά από κάθε αλλαγή που κανεις, ανοίγεις νέα καρτέλα "ανώνυμης περιήγησης" (Incognito mode), και βλέπεις τις αλλαγές σου.

Έχεις εμπειρία μετά από πόσο καιρό ξεcachάρεται ; Οκ, cool, με ανώνυμη περιήγηση όλα παίζουν μια χαρά !

Μια λύση είναι να βάζεις ένα version number (filename.js?<version_number>) όπου καλείς το αρχείο σου πχ:
<script type="text/javascript" src=" testfile.js?01102021"></script> (01102021 = 01-10-2021 σημερινή ημερομηνία) ή ό,τι άλλο σε βολεύει.

Με αυτό τον τρόπο θα επιβάλεις τον browser του κάθε χρήστη να φορτώσει εκ νέου το .js αρχείο σου αν το version number που έχει cachαρισμένο είναι διαφορετικό από αυτό που χρησιμοποιείς στον κώδικά σου.

3 ώρες πριν, HarisRg είπε

Μια λύση είναι να βάζεις ένα version number (filename.js?<version_number>) όπου καλείς το αρχείο σου πχ:
<script type="text/javascript" src=" testfile.js?01102021"></script> (01102021 = 01-10-2021 σημερινή ημερομηνία) ή ό,τι άλλο σε βολεύει.

Με αυτό τον τρόπο θα επιβάλεις τον browser του κάθε χρήστη να φορτώσει εκ νέου το .js αρχείο σου αν το version number που έχει cachαρισμένο είναι διαφορετικό από αυτό που χρησιμοποιείς στον κώδικά σου.

Φίλε μπράβο ! Τελικά οι πιο απλές λύσεις, είναι και οι καλύτερες ! Works fine !

Cache busting ονομάζεται αυτό που ψάχνεις και που με απλά λόγια είναι αυτό που περιέγραψε ο Χάρης. Υπάρχουν εργαλεία (πχ webpack, packer, gulp) που κάνουν τα πάντα, μαζί και αυτό που ζητάς (πχ μετονομάζουν τα minified αρχεία js/css από main.js -> main.<random--hash>.js κοκ). Ανάλογα το εργαλείο που χρησιμοποιείς για να κάνεις deploy τον κώδικά σου σίγουρα θα υπάρχει και το αντίστοιχο plugin.

Στις 3/10/2021 στις 2:44 ΜΜ, t(o.ot) είπε

Cache busting ονομάζεται αυτό που ψάχνεις και που με απλά λόγια είναι αυτό που περιέγραψε ο Χάρης. Υπάρχουν εργαλεία (πχ webpack, packer, gulp) που κάνουν τα πάντα, μαζί και αυτό που ζητάς (πχ μετονομάζουν τα minified αρχεία js/css από main.js -> main.<random--hash>.js κοκ). Ανάλογα το εργαλείο που χρησιμοποιείς για να κάνεις deploy τον κώδικά σου σίγουρα θα υπάρχει και το αντίστοιχο plugin.

Σε αυτα να προσθεσουμε και το parceljs