Le app a pagina singola possono mostrare contenuti diversi senza caricare una nuova pagina. Da fare quindi usano i gestori dei clic sui link e l'API History. La storia API consente di modificare la cronologia delle sessioni del browser. In questo modo possiamo aggiornare l'URL quando mostrare una pagina diversa (solitamente chiamata "visualizzazione" nelle app a pagina singola). Inoltre, assicura che il pulsante Indietro del browser funzioni ancora come previsto.
Dai un'occhiata all'app a pagina singola in questo codelab. Mostra gatto o cane immagini e fornisce link per passare da un animale all'altro. Sembra funzionare va bene!
Scoprire l'errore 404
Purtroppo c'è un piccolo bug nell'app. Diamo un'occhiata!
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
. - Fai clic sul link Doggos. Osserva come è cambiato l'URL.
- Ricarica l'app.
Viene visualizzata una pagina con "Cannot GET /doggos" un errore 404. È "furtivo",
perché l'app web sembra funzionare, purché tu faccia clic solo sui link che
li annotino. Si interrompe quando si utilizzano gli URL in una nuova finestra del browser o quando si aggiorna
. Il problema è che il server non sa come rispondere a una richiesta di
a questi URL. Il codice JavaScript nella nostra applicazione web utilizza l'API History per
passare da uno all'altro, ma il server non sa cosa fare.
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 comunica di non aver trovato
per l'URL richiesto.
In questo caso, i motori di ricerca non indicizzano gli URL, perché l'utente farebbe clic su su un risultato di ricerca e trovare il messaggio di errore, ma non i contenuti cercando, come le foto del cane.
Correggere il server
Questo progetto utilizza un server express.js scritto in JavaScript. Sistemiamo il server, in modo che risponda con index.html e il singolo l'app della pagina si occuperà del resto.
- Fai clic su Remixa per modificare per rendere modificabile il progetto.
- Seleziona il file
server.js.
Questo file contiene il codice del server. Configura un server express.js e invia
il contenuto di index.html. La configurazione del percorso nella linea 15 gestisce solo l'app web
quando le richieste raggiungono l'URL /. Il server dovrebbe pubblicare anche gli altri URL
che hai creato. Modifichiamo questo valore in modo che venga pubblicato tutti gli URL, in modo che funzioni 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.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
.
L'aggiornamento e l'apertura dei link in una nuova finestra di navigazione in incognito dovrebbero ora funzionare previsto.