S（GH）P​​A：GitHubPagesのシングルページアプリハック

公開: 2022-03-10
クイックサマリー↬loremipsum

しばらくの間、GitHub Pages Webサイトのパスをそのindex.htmlにルーティングして、シングルページアプリ（SPA）として処理する機能が必要でした。 プロジェクトに変更を加えるたびにすべてのルートに同じファイルをコピーする場合を除いて、このようなアプリではすべてのリクエストを1つのHTMLファイルにルーティングする必要があるため、これは非常に重要です。 現在、GitHubPagesはルート処理ソリューションを提供していません。 Pagesシステムは、基本的なプロジェクトコンテンツを提供するためのフラットでシンプルなメカニズムを目的としています。

ご存じない方のために説明すると、GitHubは、プロジェクトWebサイトのカスタマイズを1つ提供します。それは、 404.htmlファイルを追加して、カスタムエラーページとして機能させる機能です。 index.htmlファイルを複製し、コピーの名前を404.htmlに変更するだけで、SPAハックを最初に突き刺しました。 多くの人がGitHubPagesで同じ問題を経験し、一般的なアイデアを気に入っていることがわかりました。 ただし、Twitterの一部の人々が正しく提起した問題は、 404.htmlページがまだ404のステータスコードで提供されていることでした。これは、検索エンジンのクローラーには適していません。 ガントレットが倒されていたので、私は答えることにしました—そして勢いよく答えます！

もう一度、気持ちを込めて

その上で寝た後、「自分、汚いハックの領域に深く入っているので、このハックをもっと汚くしてみませんか？」と思いました。 そのために、同じ機能とシンプルさを提供しながら、Webサイトのクローラージュースを維持するさらに優れたハックを開発しましたindex.htmlファイルを複製して404.htmlに名前を変更する時間を無駄にする必要もありません。 ！！ 次のソリューションは、すべての最新のデスクトップおよびモバイルブラウザー（Edge、Chrome、Firefox、Safari）およびInternet Explorer10以降で機能するはずです。

テンプレートとデモ：説明をスキップして商品を入手したい場合は、テンプレートリポジトリと、実際の動作を確認するためのテストURLを次に示します。

ジャンプした後もっと！ 以下を読み続けてください↓

それはとてもメタです

私が最初にしたことは、ブラウザをindex.htmlページにリダイレクトさせるための他のオプションを調査することでした。 その部分はかなり簡単でした。 基本的に、サーバー構成、JavaScript location操作、またはrefreshメタタグの3つのオプションがあります。 最初のものは明らかにGitHubページには使用できません。 また、JavaScriptは基本的に更新と同じですが、クローラーのインデックス作成では間違いなく劣ります。 これでメタタグが残ります。 更新値が0のメタタグは、検索エンジンによって301リダイレクトとして扱われるように見えます。これは、このユースケースでうまく機能します。

空のHTMLドキュメントを含むgh-pagesリポジトリに404.htmlファイルを追加することから始める必要があります。 そのドキュメントの合計は512バイトを超える必要があります（以下で説明します）。 次に、 404.htmlページのhead要素に次のマークアップを配置します。

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

このコードは、試行された入口URLを標準のsessionStorageオブジェクトの変数に設定し、メタリフレッシュタグを使用してプロジェクトのindex.htmlページにすぐにリダイレクトします。 Github組織サイトを実行している場合は、コンテンツ属性置換テキストにリポジトリ名を入力せずに、次のように実行します。content content=“0;URL='/'”

ルート処理のカスタマイズ

より複雑なルート処理が必要な場合は、上記のscriptタグに追加のJavaScriptロジックを含めるだけです。 いくつかの調整が可能ですindex.htmlページに渡すhrefの構成。 どのページを404ページに残す必要があるか（メタタグを動的に削除することにより）。 また、インバウンドルートに基づいて表示されるコンテンツを指定するために配置するその他のロジック。

512マジカルバイト

これは、私がWeb開発で遭遇した中で最も奇妙な癖の1つです。 404.htmlページの合計サイズが512バイトを超えていることを確認する必要があります。そうでない場合、Internet Explorerはそれを無視し、代わりに汎用ブラウザ404ページを表示します。 ついにこれを理解したとき、私はそれにかかった時間に対処するためにビールを割って開けなければなりませんでした。

歴史を作ろう

ユーザーが最初に移動したURLをキャプチャして復元するには、他のJavaScriptがページの現在の状態に作用する前に、 index.htmlページのheadに次のscriptタグを追加する必要があります。

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

JavaScriptのこのビットは、 404.htmlページのsessionStorageにキャッシュしたURLを取得し、現在のhistoryエントリをそれに置き換えます。 ここからどのように処理するかはあなた次第ですが、私があなたならpopstateとhashchangeを使用します。

さて、皆さん、それだけです。 さあ、GitHub Pagesでシングルページアプリを書いてお祝いしましょう！

この記事は、実用的なJavaScript学習、オープンソースプロジェクト、およびMicrosoftEdgeブラウザーを含む相互運用性のベストプラクティスに関するマイクロソフトの技術エバンジェリストおよびエンジニアによるWeb開発シリーズの一部です。

dev.microsoftedge.comの無料ツール（F12開発者ツールを含む）を使用して、ブラウザーとデバイス（Microsoft Edge — Windows 10のデフォルトブラウザーを含む）全体でテストすることをお勧めします。デバッグ、テスト、およびWebページを高速化します。 また、Edgeブログにアクセスして、Microsoftの開発者や専門家からの情報を入手してください。

SmashingMagの詳細：

  • 開発から展開までのシンプルなワークフロー
  • Foundation ForAppsで完全なWebアプリを作成する
  • JekyllとGitHubPagesでブログを作成する