Skip to main content

 

OutSystems 11オンラインヘルプ

 

Webアプリケーションが対象

 

OutSystems

outsystems.api.preloader API

モジュールのリストの静的リソース(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を使用する画面に追加する必要があります。それには、以下の手順を実行します。

  1. アプリケーションでHTTPRequestHandler拡張機能のAddJavaScriptTagを参照します。
  2. アプリケーションの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%
// ...