Le app a pagina singola possono mostrare contenuti diversi senza caricare una nuova pagina. Per farlo, utilizzano i 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 mostriamo una pagina diversa (di solito chiamata "visualizzazione" nelle app a pagina singola). Inoltre, assicura 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 gatti o cani e fornisce link per passare da un animale all'altro. Sembra funzionare bene.
Scoprire gli errori 404 subdoli
Purtroppo nell'app è presente un bug impercettibile. Diamo un'occhiata.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero
. - Fai clic sul link Doggos. Nota come è cambiato l'URL.
- Ricarica l'app.
Viene visualizzata una pagina con "Cannot GET /doggos", ovvero un errore 404 nascosto. È "subdolo" perché l'app web sembra funzionare correttamente finché fai clic solo sui link al suo interno. Si interrompe quando utilizzi gli URL in una nuova finestra del browser o quando aggiorni 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 navigare tra questi URL, 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 stava cercando, ad esempio le immagini di cani.
Risoluzione dei problemi del 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 Remixa 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 della route alla riga 15 pubblica l'app web solo quando le richieste vengono inviate all'URL /. Il server deve anche pubblicare gli altri URL che abbiamo creato. Modifichiamolo in modo che pubblichi tutti gli URL, così funzionerà anche con altri URL in futuro.
Per farlo, 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 il server ora risponde con l'app web in index.html per qualsiasi URL specificato.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero .
L'aggiornamento e l'apertura dei link in una nuova finestra Incognito ora dovrebbero funzionare come previsto.