push state

ハイプッシュ状態

hy-push-state は、 Web ページを Web アプリに変えることができる Web コンポーネントです。このコンポーネントは、新しいコンテンツ (以前は「ajax」として知られていました) を動的にロードし、それを現在のページに挿入します。白のフラッシュやスタイルのないコンテンツのフラッシュなどは発生しません。

静的な Web サイトを動的な Web アプリに変えます。 {：。鉛}

hy-push-state はpjax やSmoothState に似ていますが、より高度なプリフェッチ ロジックを提供し、内部をより詳細に制御して高度なページ遷移アニメーションを可能にします。

hy-push-stateは、Hydejack{:.external} Jekyll テーマの一部としてすでに数百のサイトで使用されています。

注: 現在のバージョンはまだプレリリースです。パブリック API は今後も重要な点で変更される可能性があります。 {：。メッセージ}

例

webcomponents.org でこのページを表示すると、以下の例がインタラクティブなデモとして表示されます。それ以外の場合は、以下のスタンドアロンの例を見つけてください。

 < hy-push-state initial-href =" https://qwtel.com/hy-push-state/example/simple/ " prefetch >
  < p >
    < a href =" ./1.html " > Page 1 </ a >
    < a href =" ./2.html " > Page 2 </ a >
    < a href =" ./3.html " > Page 3 </ a >
  </ p >
  < p > Super simple example. </ p >
</ hy-push-state >

GitHub、npm、またはその他の場所でこのドキュメントを表示すると、スタンドアロンの例を確認できます。

• Webコンポーネントの例{:.external}
• jQuery の例{:.external}
• バニラ JS の例{:.extern}
• ミックスインの例{:.extern}

ライセンス

hy-push-state はオープンソースですが、無料ではありません。

GPL-3.0 ライセンスに従ってコンポーネントを使用することはできますが、これは、GPLv3 互換ライセンスに基づいてコードをリリースする用意がある必要があることを意味します。

これが受け入れられない場合には、次の商用ライセンスを利用できます。

	個人的	起動する	企業
# 開発者	2	15	∞
ライセンス	個人的	起動する	企業
価格	29ドル	$249	$499
	{:.gumroad-button}を購入する	{:.gumroad-button}を購入する	{:.gumroad-button}を購入する
{:.ストレッチテーブル}

使用法

hy-push-state はさまざまな方法で使用できます。

• Web コンポーネントとして、 ES6 モジュールおよびHTML インポートの両方として
• jQueryプラグインとして
• Vanilla JavaScript クラスとして
• バンドルされたフロントエンド コードの一部として。
• (上級) ES6 Mixin として独自のコンポーネント階層の一部として使用できる可能性があります。

Webコンポーネント

Web コンポーネントはhy-push-stateの使用方法として推奨されますが、ブラウザーまたはポリフィルでのサポートが必要です。ページにこれを含める方法は複数あります。

バンドルされたES6モジュール

これは、すべての主要ブラウザで最も早くネイティブ サポートが提供される予定のバージョンです。

 < script type =" module " href =" https://unpkg.com/hy-push-state/dist/webcomponent/module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > 

HTMLインポート

一部のブラウザーは HTML インポートを実装しないことを決定していますが、それらは簡単にポリフィルされます。

 < link rel =" import " href =" https://unpkg.com/hy-push-state/dist/webcomponent/hy-push-state.html " >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > 

バンドルされていない ES6 モジュール (実験的)

unpkg CDN からコンポーネントをロードする場合、 ?moduleクエリ パラメーターを追加することでソースを直接インポートできます。

 < script type =" module " src =" https://unpkg.com/hy-push-state/src/webcomponent/module?module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >

このアプローチでは、何百もの個別の HTTP リクエスト (モジュールごとに 1 つ) が生成され、テストとプロトタイプのみを目的としていることに注意してください。バンドルされていない ES6 モジュールのインポートは、バンドルされたディストリビューションよりもはるかに遅く、当面はその状態が続くでしょう。

このアプローチの利点の 1 つは、Hydejack コンポーネント ファミリの複数のコンポーネントを使用する場合に、共有依存関係が 2 回含まれないことです。ただし、次の場合には、webpack をセットアップする方が良い解決策となります。

バンドラー

hy-push-state は、webpack や rollup などのフロントエンド バンドラーで使用できます。 npm または Yarn を使用してコンポーネントをインストールし、コードにソースをインポートするだけです。

 import 'hy-push-state/src/webcomponent/module' ;

カスタム要素をいつdefineするかを制御したい場合は、次のようにHTMLElementインポートすることもできます。

 import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ;

hy-push-stateの依存関係はすべて有効な ES6 モジュールであるため、webpack のModuleConcatenationPluginでインライン化できることに注意してください。

ドキュメント

• オプション
• メソッド
• イベント

ページのプリフェッチ

hy-push-state は、ユーザーがリンクにホバー、フォーカス、またはタッチ ( touchstart -ing) することによって新しいページを開こうとしていることを「ヒント」するとすぐに HTTP リクエストを開始します。推測が正しければ、リクエストの開始速度は 100 ミリ秒以上であり、すでに高速な Web アプリ スタイルのページ置換に加えて、サイトの体感速度がさらに向上します。

この機能の他の実装とは異なり、ユーザーが別のリンクを示唆した場合、現在のプリフェッチ リクエストはキャンセルされ、一度に複数のプリフェッチ リクエストが実行されることはありません。これにより、到着時に破棄されるリクエストによるネットワークの詰まりが回避されます。これは、低速な 3G 接続の場合に不可欠です。

たとえば、qwtel.com のサイドバーでリンクをホバーすると、次のようなタイムラインが生成されます。

{:.lead} リクエストのプリフェッチの Chrome デベロッパー コンソールのスクリーンショット。 {：。形}

高度なアニメーション

hy-push-state を使用すると、Hydejack や最先端の​​ Web アプリで使用されるような、高度なページ遷移アニメーションを構築できます。これらは、他のコード、GC の中断、または一般的に遅いデバイスによって引き起こされる小さな遅延を考慮して、時間ベースではなく約束ベースにすることができます。

Web アニメーション API を使用した単純なフェードアウト アニメーションのコードは次のようになります。

 pushStateEl . addEventListener ( 'hy-push-state-start' , ( { detail } ) =>
  detail . transitionUntil ( new Promise ( res =>
    document
      . getElementById ( 'my-content' )
      . animate ( [ { opacity : 1 } , { opacity : 0 } ] , { duration : 250 } )
      . addEventListener ( 'finish' , res )
  ) )
) ;

時間ベースのアニメーションも可能で、 durationオプションで構成されます。

ゴールドスタンダード

このコンポーネントは、Web コンポーネント ゴールド スタンダードに従っています。

ソース

ソース コードは文字通りのプログラミングスタイルで書かれており、かなり親しみやすいものになっています。ただし、RxJS に関するある程度の知識が必要です。

コア機能はmixin / index.jsに実装されており、フレームワーク固有のバージョンのコンポーネントを作成するために使用されます。

• jquery
  • index.js
• mixin
  • constants.js
  • event-listeners.js
  • events.js
  • fetching.js
  • history.js
  • index.js
  • methods.js
  • operators.js
  • script-hack.js
  • scrolling.js
  • setup.js
  • update.js
• vanilla
  • index.js
• webcomponent
  • html-import.s
  • index.js
  • module.js
• common.js
• index.js
• url.js

サイズ

縮小されたバンドルのサイズは約 90 kb、または gzip 圧縮された場合は約 20 kb です。その大部分は RxJS から来ています。プロジェクトですでに RxJS を使用している場合、または Hydejack コンポーネント ファミリの複数のコンポーネントを使用している場合は、フロントエンド バンドラーの使用を検討してください。

サイズ	ファイル
84K	dist/jquery/index.js
19K	dist/jquery/index.js.gz
80K	dist/mixin/index.js
18K	dist/mixin/index.js.gz
81K	dist/vanilla/index.js
18K	dist/vanilla/index.js.gz
86K	dist/webcomponent/html-import.js
19K	dist/webcomponent/html-import.js.gz
86K	dist/webcomponent/index.js
19K	dist/webcomponent/index.js.gz
86K	dist/webcomponent/module.js
19K	dist/webcomponent/module.js.gz