JavaScript Seite bei jedem Besuch neu laden

[jb_alvarado]

Hallo Allerseits,
ich würde gerne in einer SPA, welche ich mit NuxtJS gemacht habe, sicherstellen das die Seite bei jedem Besuch neu geladen wird.

Aktuell habe ich das Problem, das wenn ein Benutzer den Browser so eingestellt hat, dass die vorherige Session wiederhergestellt wird, beim erneuten Besuch nicht alles ordnungsgemäß auf den neusten Stand gebracht wird.

Gibt es eine Möglichkeit, womit ich das lösen kann?

 

[floq0r]

Das ist nicht nur eine schlechte Idee sondern wird auch dein Problem vermutlich nicht lösen. Gib mehr Dezltails.

 

[Lawnmower]

Allenfalls mit Hilfe von Cache-Control?
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control?retiredLocale=de
Im unteren Bereich hat es da auch ein paar Abschnitte mit Szenarien die evtl zu deiner Anwendung passen könnten.

Aber ja sonst mal mehr Details liefern.

 

[jb_alvarado]

@floq0r, habe zwei Probleme die ich dadurch gerne lösen würde. Eins könnte ich auch anders lösen, aber wenn die Seite eh neu laden würde, wäre es auch ok. Der problematischere Fall ist folgendermaßen:

Eine Seite stellt auf der Frontseite einen kurzen Abschnitt des aktuellen TV Programms dar, der Inhalt dazu wird über einen API Request geholt und per Timer aktualisiert. Unter bestimmten Bedingungen wird das nicht aktualisiert. Nämlich wenn der Benutzer nach Besuch einen anderen Tab öffnet und später den Browser schließt. Wenn er nun am nächsten Tag den Browser wieder öffnet, ladet zwar der letzten aktive Tab neu, aber wenn der Benutzer nun zu dem Tab meiner Seite wechselt, zeigt sie noch das alte Programm vom Vortag an.

@Lawnmower, danke für den Tipp! In diesem Fall bringt das leider nichts. Der API Request beinhaltet einen Timedate Bereich der sich normalerweise verändern würde, daher sollten keine Daten aus dem Cache geladen werden.

 

[floq0r]

Dann würde ich eher schauen, dass der Timer wieder läuft. Ich nehme an, dass der bei onload bzw. ready document über ein setInterval() oder ein selbstreferentielles setTimeout() initialisiert wird. Das sollte auch passieren, wenn ein geschlossener Tab wieder geöffnet wird. Weiterführend tappe ich immer noch im Dunkeln.

 

[jb_alvarado]

Ich weiß auch nicht wie ich das gescheit debuggen soll. Im Browser kann man ja das Logging dauerhaft aktivieren, und wenn ich da das Szenario versuche nachzustellen, funktioniert alles wie es soll. So ähnlich wie du auch vermutest hast.

Bei NuxtJS packt man den Code, der Clientseitig beim Initialisieren ausgeführt werden soll, in ein mounted() Statement, also in etwa so:

mounted () {
    this.interval = setInterval(() => {
        this.$store.dispatch('tv/animClock', true)
    }, 1000)
},

beforeDestroy () {
    clearInterval(this.interval)
}

die Aufzurufende Funktion prüft dann, ob neue Daten gebraucht werden, oder nur ein Slider bewegt werden muss:

animClock ({ commit, dispatch, state }, isHome) {
    const currentTime = timeToSeconds(this.$dayjs().format('HH:mm:ss'))
    const currentClipStart = timeToSeconds(this.$dayjs(state.currentClip.start).format('HH:mm:ss'))
    const playTime = currentTime - currentClipStart
    const progValue = playTime * 100 / state.currentClip.duration

    if (state.currentClip.duration >= playTime && progValue >= 0) {
        // Bewege Fortschrittsbalken
    } else {
        // hole neue Daten und bereite diese auf
    }
}

Wie du sagst, im Idealfall wird das einfach vorgeführt, aber wenn ich das nicht hinbekomme, ist es mir auch recht, wenn einfach die ganze Seite einmal neu läd. Was spricht hier deiner Meinung nach dagegen?

Eine Idee, wie ich das vernünftig debuggen kann, würde auch schon helfen.

 

[Lawnmower]

Nein ich meinte das andersrum: Eben das genau kein Cache verwendet wird bzw das Du ein maximales Alter (max-age) angibtst.
Weiss aber nicht ob Du dann irgendwie drauf reagieren könntest, aber womöglich würde der Browser dann wie selber merken "Halt, der Inhalt ist ja veraltet, ich lade automatisch neu" und Du könntest diesen Event abgreifen.

 

[Bagbag]

Schau dir mal die Page Visibility API an.

 

[SheepShaver]

Da du NuxtJS verwendest, nehme ich mal an, du hast eine PWA mit nuxt/PWA gebaut (bei einer regulären SPA hättest du diese Probleme nicht). Eine PWA wird per default gecached (Assets und Zustand). Du kannst die Cache-Strategie aber pro Route im Workbox-Modul ändern.
Aber eine PWA ohne Offline-Mode ist relativ sinnfrei.

 

[floq0r]

Aber eine PWA ohne Offline-Mode ist relativ sinnfrei.

Ich nehme an diese PWA nutzen dann service worker?
@jb_alvarado Von diesen Frameworks hab ich keine Ahnung, sry

 

[jb_alvarado]

@floq0r, kein Problem! Dein Einwand gegen ein komplettes neu laden der Seite war auch schon hilfreich. Bin jetzt erst drauf gekommen, dass das wirklich keine gute Idee... Auf der Seite gibt es auch ein Livestream und wenn der an wäre, der Nutzer dann den Tab wechselt und wieder zurück geht, würde der Stream stoppen. Und ja, die PWA nutzt Service Worker.

@Bagbag, danke für den Tip, das geht in die richtige Richtung meiner Anfangsfrage, aber leider brauche ich doch eine andere Lösung.

@SheepShaver, ja du hast recht, habe selbst nicht an die PWA Funktion gedacht. Aber kann die das wirklich im Desktop Browser verursachen? In der Funktion die ich im setInterval aufrufe, wird doch gegen die aktuelle Uhrzeit geprüft, und selbst im Offlinemodus müsste das else dann doch zutreffen?!

Im laufe des Jahres muss ich eh noch auf NuxtJS 3 migrieren und würde in dem Zuge einiges neu schreiben. Die Seite war mein erstes größeres NuxtJS Projekt und dementsprechend ist einiges nicht schön gelöst.

Wenn jetzt wirklich das Caching vom PWA das Problem ist, wie kann man es vernünftig lösen?

 

[SheepShaver]

Naja, ich würde sagen, wenn du keine Interesse an Offline-Modus und Service-Workern hast, dann Bau keine PWA, sondern eine reguläre SPA ohne Caching und persistiertem Zustand.
Ansonsten: definiere die Cache-Strategie für die betroffenen Routen um:
https://pwa.nuxtjs.org/workbox/