Le app a pagina singola possono mostrare contenuti diversi senza caricare una nuova pagina. A questo scopo, utilizzano i gestori dei clic per i link e l'API History. L'API History consente di manipolare la cronologia delle sessioni del browser. In questo modo possiamo aggiornare l'URL quando viene mostrata una pagina diversa (di solito chiamata "visualizzazione" nelle app a pagina singola). Garantisce inoltre che il pulsante Indietro del browser continui a funzionare come previsto.
Dai un'occhiata all'app a pagina singola in questo codelab. Mostra immagini di cani o gatti e fornisce link per passare da un animale all'altro. Sembra che funzioni bene!
Scopri la 404 basilare
Sfortunatamente, c'è un bug sottile nell'app. Diamo un'occhiata!
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
. - Fai clic sul link Doggos. Osserva come è cambiato l'URL.
- Ricarica l'app.
Viene visualizzata una pagina con "Cannot GET /doggos", un breve 404. È "furtiva",
perché l'app web sembra funzionare bene se fai clic solo sui link
al suo interno. Si interrompe quando vengono utilizzati gli URL in una nuova finestra del browser o durante l'aggiornamento della pagina. Il problema è che il server non sa come rispondere a una richiesta per questi URL. Il codice JavaScript nella nostra app web utilizza l'API History per passare da uno all'altro, ma il server non sa come gestirli.
Ogni volta che il server non sa cosa fare per un URL richiesto, risponde con il codice di stato HTTP 404. Con questo codice il server dice di non aver
trovato nulla per l'URL richiesto.
In questo caso, i motori di ricerca non indicizzano gli URL perché un utente fa clic su un risultato di ricerca e trova il messaggio di errore, ma non i contenuti che sta cercando, ad esempio le immagini di cani.
Correggere il server
Questo progetto utilizza un server express.js scritto in JavaScript. Risolviamo i problemi del server, in modo che risponda con index.html e l'app a pagina singola si occuperà di tutto il resto.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Seleziona il file
server.js.
Questo file contiene il codice del server. Imposta un server express.js e invia i contenuti di index.html. La configurazione della route alla riga 15 pubblica solo l'app web quando le richieste vanno all'URL /. Il server dovrebbe pubblicare anche gli altri
URL creati. Cambiamolo in modo che pubblichi tutti gli URL, in modo che possa funzionare anche con altri URL in futuro.
Per farlo, possiamo modificare il codice a partire dalla riga 15 nel seguente modo:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* corrisponde a qualsiasi URL e il server ora risponde con l'app web in
index.html per ogni URL specificato.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
.
L'aggiornamento e l'apertura dei link in una nuova finestra di navigazione in incognito ora dovrebbero funzionare come previsto.