Le app a pagina singola possono mostrare contenuti diversi senza caricare una nuova pagina. Per farlo, utilizzano gestori dei clic sui 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 visualizzata una pagina diversa (di solito chiamata "visualizzazione" nelle app a pagina singola). Inoltre, si assicura che il pulsante Indietro del browser funzioni ancora 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 vada bene.
Scoprire gli errori 404 insidiosi
Purtroppo c'è un piccolo bug 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.
Visualizzi una pagina con "Cannot GET /doggos", un 404 subdolo. È "subdolo",
perché l'app web sembra funzionare correttamente se fai clic solo sui link al suo interno. Viene interrotto quando si utilizzano gli URL in una nuova finestra del browser o quando si aggiorna la 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 spostarsi tra di essi, ma il server non sa cosa farne.
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 indica di non aver trovato nulla per l'URL richiesto.
In questo caso, i motori di ricerca non indicizzeranno gli URL, perché un utente farebbe clic su un risultato di ricerca e troverebbe il messaggio di errore, ma non i contenuti che cercava, ad esempio le foto del cane.
Correggere il server
Questo progetto utilizza un server express.js scritto in JavaScript. Correggiamo il server in modo che risponda con index.html e l'app a pagina singola si occuperà del resto.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Seleziona il file
server.js.
Questo file contiene il codice del server. Configura un server express.js e invia
i contenuti di index.html. La configurazione del percorso nella riga 15 pubblica l'app web solo quando le richieste vanno all'URL /. Il server deve anche pubblicare gli altri URL che abbiamo creato. Modifichiamolo in modo da pubblicare tutti gli URL, in modo che funzioni anche con altri URL in futuro.
A tale scopo, possiamo modificare il codice a partire dalla riga 15 in questo modo:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* corrisponde a qualsiasi URL e ora il server risponde con l'app web in
index.html per qualsiasi URL specificato.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
A schermo intero
.
L'aggiornamento e l'apertura dei link in una nuova finestra di navigazione in incognito dovrebbero ora funzionare come previsto.