シングルページ アプリでは、新しいページを読み込まずにさまざまなコンテンツを表示できます。そのために、リンクのクリック ハンドラと History API を使用します。History API を使用すると、ブラウザ セッション履歴を操作できます。これにより、別のページ（通常、シングルページ アプリでは「ビュー」と呼ばれます）を表示するときに URL を更新できます。また、ブラウザの「戻る」ボタンが想定どおりに動作することも確認します。
この Codelab のシングルページ アプリをご覧ください。猫または犬の画像が表示され、2 匹の動物を切り替えるリンクが提供されます。問題なく動作しているようです。
巧妙な 404 を検出する
残念ながら、アプリに小さなバグがあります。確認してみましょう。
- サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示]
を押します。 - [Doggos] リンクをクリックします。URL がどのように変更されたかを確認します。
- アプリを再読み込みします。
「Cannot GET /doggos」が記載されたページが表示されます。これは、巧妙な 404 です。ウェブアプリ内のリンクのみをクリックすれば正常に動作するため、この問題は「巧妙」です。新しいブラウザ ウィンドウで URL を使用したり、ページを更新したりすると、機能しなくなります。問題は、サーバーがこれらの URL のリクエストにどのように応答するかを認識していないことです。ウェブアプリの JavaScript コードは History API を使用して URL 間を移動していますが、サーバーは URL をどのように処理すればよいかわかりません。リクエストされた URL に対してサーバーが何をすべきかわからない場合は、HTTP ステータス コード 404 を返します。このコードでは、リクエストされた URL が見つからないことを示します。
この場合、検索エンジンは URL をインデックスに登録しません。ユーザーが検索結果をクリックしても、犬の写真などの目的のコンテンツではなく、エラー メッセージが表示されるためです。
サーバーの修正
このプロジェクトでは、JavaScript で記述された express.js サーバーを使用します。サーバーを修正して、index.html で応答し、シングルページ アプリが残りの処理を行うようにしましょう。
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
server.jsファイルを選択します。
このファイルには、サーバーコードが含まれています。express.js サーバーを設定し、index.html のコンテンツを送信します。15 行目のルート設定は、リクエストが URL / に送信された場合にのみウェブアプリを提供します。サーバーは、作成した他の URL も提供する必要があります。今後追加される URL でも機能するように、すべての URL を配信するように変更しましょう。
そのためには、15 行目から始まるコードを次のように変更します。
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* は任意の URL に一致します。これにより、サーバーは任意の URL に対して index.html のウェブアプリで応答します。
- サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
新しいシークレット ウィンドウでリンクを更新して開くと、想定どおりに動作するようになります。