ShareService:複数のタブを構築するためのライブラリ

我々は簡単に1つのページのアプリを作成するために反応を使用することができます、反応は、UIの状態をレンダリングするのに役立ちます.しかし、すべての新しいタブについては、アプリケーションのレンダリングに反応するためのデータを持って私たちのビジネスロジックやサービスを実行する必要があります.それで、我々は我々のビジネス論理とサービスを集中させることができますか?SharedWorker 解決策です.そして我々はshared-service ライブラリは、あなたのビジネスの論理とサービスを集中し、複数のタブを構築するための痛みなしでアプリケーションを反応させる.

動作方法

すべてのページが閉じられるまで、ShareWorkerインスタンスは同じドメインを持つクロスブラウザタブで再利用されます.

アプリケーションは、ユーザーが最初のタブを開いたときにデータを読み込むデータを読み込むためにShareWorkerを作成します.

アプリケーションは、ユーザーが2番目のタブを読み込むときに既存のShareWorkerインスタンスからUI状態を取得します.

ユーザーがWebページにアクションを持っているときにShareWorkerインスタンスで実行するアクションを送信する

ShareWorkerインスタンスを実行した後に使用するタブにUI状態を送信する

ShareServiceライブラリで動作する

私はあなたと反応アプリを起動していると仮定するcreate-react-app .
1 .最初のステップ:インストール

$ npm install @shared-service/core @shared-service/react

2 .あなたの反応アプリケーションルートエンドポイントのinit共有サービス:
< div >
＜p＞3.シェアワーカー労働者の共有サービスを接続してください.JSファイル:< p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/embbnux/6d19a3a1f56d4e6aeb38924557928d04.js//>
< div >
＜P＞4.反応コンポーネントで
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/embbnux/f156a3062f2f0b160e5ccb9166f8fc42.js//>
< div >
単純な状態論理のために、我々はちょうど使うことができますsetCount 関数リターンuseSharedState 更新するSharedService .

複雑な動作に対しては、sharedServiceServer .

まず、実行者をsharedServiceServer アットworker.js :

< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/embbnux/7a94cddc93a4c09bd9126ad5b4b8e14c.js//>
< div >
<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/embbnux/02674501faa13d34e264a9bde423e8ab.js//>
< div >
＜p＞5.データ持続性
<川合>ここではlocalforage ストレージを処理するためのlibp >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/embbnux/4e222d54838bc7e60fa5bd9083ad97ba.js//>
< div >

オンラインデモ

我々はオンラインデモをしているhere . 完全なデモソースコードはhere .

問題

ShareWorkersはSafariやIEの現在サポートされていないので、我々は実行することはできませんshare-service ブラウザの共有ワーカーで.ご覧くださいhere Safariでアプリケーションを作成するにはp >

その他

いくつかの藤堂がありますshared-service 図書館: < p >
< OL >

サポートを追加するVue.js 図書館.

サポートブラウザの拡張子

サポート電子メインとレンダリングプロセス

< OL >
ブラウザ拡張と電子アプリを中心にサービスをサポートします.p >
オリジナル・オリジナルlink