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