Rileva modifica versione applicazione su un'applicazione singola pagina

Question

oggi una domanda è stata sollevata qui e non ho una risposta evidente.

Supponiamo di concatenare e minimizzare tutti i file di risorse (CSS e Javascript) e dichiararli nella "Pagina principale".

In un'applicazione multipagina, se un file CSS viene modificato, verrà ricaricato al successivo caricamento di una pagina intera.

In un'applicazione a pagina singola, l'utente può continuare a lavorare per giorni senza mai ricaricare la pagina principale in cui vengono dichiarati i file CSS. L'utente non vedrà mai le modifiche finché non viene emesso un Ctrl-F5.

sono sicuro che qualcuno ha già pensato a questo e hanno un'esperienza da condividere :)

Per me, utilizzando WebSockets non è un'opzione. Innanzitutto perché è eccessivo e in secondo luogo perché non tutti i miei clienti supportano la tecnologia. La stessa ragione si applica a tutti i fallback WebSockets ... Non continuerò a colpire i miei server a causa di questo.

Quindi, qualche idea a qualcuno? :)

BTW, stiamo usando AngularJS se questo può essere d'aiuto per una soluzione specifica.

Grazie!

Answer 1

Ho superato lo stesso problema. La mia soluzione è opinata e potrebbe non rispondere ai tuoi criteri:

Quando impacco la mia app frontale e la mia server-app, condivido un file di configurazione contenente la versione corrente dell'app anteriore.

Lato anteriore: il 75% delle mie route cambia implicitamente un servizio Web (risoluzione della modifica dell'itinerario). SO ogni volta che chiamo il mio server, includo un'intestazione HTTP personalizzata (o un parametro GET/POST) contenente la versione client dell'app anteriore.

lato

Server: metto a confronto la versione anteriore-app (quello nel browser dell'utente, caricato l'ultima volta che l'utente aggiornata/caricato lo SPA) con la versione anteriore-app del file di configurazione comune:

• Se la versione corrisponde: I Do nothing.
• Se la versione non corrispondono mando un codice di errore HTTP di stato personalizzato (418 per esempio)

lato Poi anteriore: ho aggiunto un intercettore risposta che intercetta qualsiasi codice di errore 418 e fare una forza-refresh di l'intera app

Questo è tutto. Fondamentalmente l'evento che "verifica" se la versione di app anteriore è l'ultima è un cambio di rotta (che chiama un WS tramite ajax). Ma potresti aggiungere un infinito $ timeout callind un WS dedicato ogni 5 minuti o così ... Posso aggiungere del codice se necessario.

Spero che questo aiuti;)

Answer 2

Chiamami vecchio stile ma lascerò solo che il mio utente sappia che c'è un'interfaccia utente aggiornata più interessante, più bella e più interessante con qualche finestra di avviso, e quando agiscono e fanno clic su di esso - basta aggiornare il pagina. Forse il codice non risolverà questo, ma qualche psicologia UX ...

Answer 3

Supponendo che si sta utilizzando il routing AngularJS' tramite il servizio $ percorso e fornitore, quindi è possibile utilizzare $routeChangeSuccess evento per eseguire una richiesta di server se ci sono cambiamenti significativi che deve essere cambiato; se ce ne sono, puoi fare una window.location.reload() per aggiornare la pagina e ottenere tutte le risorse e gli html aggiornati.

Il seguente processo può essere modificato a seconda di come si vuole implementarlo:

. Configura un file di configurazione nel tuo server indicando la versione dell'app. Puoi anche scegliere di assegnare versioni differenti per file diversi ma dato che hai concatenato tutti i tuoi file di risorse, suppongo che potresti limitare le opzioni di versione nella tua configurazione.

. Creare un servizio che contenga tutte le informazioni necessarie (versioni dei file dal server) e metodi per eseguire una richiesta server al server per verificare le versioni di file correnti memorizzate nel servizio.

. Utilizzare l'evento $routeChangeSuccess per eseguire una richiesta del server utilizzando il servizio creato nel passaggio , se la richiesta ha restituito una conferma valida della presenza di modifiche, quindi ricaricare la pagina forza tramite window.location.reload().

Answer 4

ho deciso di aggiungere i miei pensieri finali come risposta anche qui:

Ci siamo andati per una soluzione ridotta per ora.

Dato che abbiamo un "servizio proxy" che è (ancora per ora) l'unico che interagisce con questa applicazione, abbiamo aggiunto la versione dell'applicazione sull'intestazione http di tutte le risposte. Se riceviamo una versione più recente, viene visualizzato un popup che notifica all'utente e viene inviato un aggiornamento completo della pagina ...

Questa soluzione non funzionerà per le applicazioni che non dispongono di un proprio servizio "privato".