outsystems.api.preloader API

Last updated
Save as PDF

モジュールのリストの静的リソース（css、js、png、gif、jpg、jpeg、woff）のプリフェッチを可能にするJavaScript API。これにより、ページでリソースが必要な場合に、ブラウザのキャッシュ内にリソースがすでに存在するようにすることができます。

以下のファイルをプリフェッチできます。

Webブロック、画面、テーマに追加されるCSSスタイルとJavaScriptコード。
アプリケーションモジュールで使用される画像ファイル。
Deploy Actionプロパティが「Deploy to Target Directory」に設定されている以下のファイル形式のモジュールリソース。
- css
- js
- gif、png、jpg、jpeg
- woff
モジュールに他のモジュールへの依存関係がある場合は、以下をプリフェッチできます。
- 参照されるWebブロックとテーマのCSS。
- 参照されるすべての画像。

要件

_preloader.jsファイルをアプリケーションに含めます。APIを使用する画面に追加する必要があります。それには、以下の手順を実行します。

アプリケーションでHTTPRequestHandler拡張機能のAddJavaScriptTagを参照します。
アプリケーションのAddJavaScriptTagアクションを使用して_preloader.jsファイルをインポートします。
JavaScriptURLパラメータを「preloader.js」に設定します。

preloadAppメソッド

モジュールのリストの静的リソース（css、js、png、gif、jpg、jpeg、woff）をプリフェッチします。

これにより、ページでリソースが必要な場合に、ブラウザのキャッシュ内にリソースがすでに存在するようにすることができます。

入力パラメータ

modules: 配列。リソースのフェッチ元となるモジュールの名前の文字列配列。
redirectUrl: 文字列。すべての静的リソースがプリフェッチされた後のリダイレクト先となるURL。
空の文字列を渡すと、リダイレクトされません。
locale: 文字列。このロケールコードが示す言語でリソースをフェッチします例: "en-US".
空の文字列を渡すと、ロケールのないリソースがプリフェッチされます。
ProgressCallback: 関数。JavaScriptコールバック変数を定義できます。リソースが読み込まれるたびに呼び出されます。（例: 進行状況に関する視覚的フィードバックを提供）。
このコールバック関数は、サーバーからプリフェッチされたファイルのパーセンテージを示すDecimal型の入力パラメータです。

例

ユーザーがデバイスでhttp://example.com/OrderManager/にアクセスして、OrderManagerアプリを開きます。このために、CRMモジュールとOrderManagerモジュールの静的リソースをプリフェッチします。これによって画像とスクリプトが必要に応じてブラウザのキャッシュに保存されるため、画面間のナビゲーションが高速化されます。

静的リソースのプリフェッチと同時に、コンソールに読み込み済みファイルのパーセンテージを出力します。

完了すると、http://example.com/OrderManager/Welcome.aspxページにリダイレクトされます。

これを実装するには、リソースをプリフェッチするOrderManagerのデフォルト画面に以下のJavaScriptコードを追加します。

// A list of modules to prefetch resources.
var modulesToPrefetch = ["CRM", "OrderManager"];

// The URL to redirect to after prefetching the resources.
var redirectUrl = "http://example.com/OrderManager/Home.aspx";

// The locale of the resources to fetch.
var locale = "en-US";

// The code to be executed when receiving an update about
// the progress.It prints the progress on the console.
function PreloadProgress(percentage) {
    console.log(percentage*100 + "%");
};

// Prefetches the static resources from the 'CRM' and 'OrderManager' modules.
outsystems.api.preloader.preloadApp(modulesToPrefetch, redirectUrl, locale, PreloadProgress);

// This example prints the following on the console:
// 10%
// 20%
// ...

Training

Documentation