WEBビューアやWEBオーバーレイ内でのオンライン／オフラインコンテンツ

Twixl Publisherでは、WEBビューアやWEBオーバーレイ内でリモートのurlを参照するかローカルのWEBのリソースを参照するかオプションを設定できます。

リモートurlでは、ユーザーはコンテンツを見るためにインターネット接続が必要です。ローカルのWEBリソースでは、パブリケーション内にコンテンツが埋め込まれてるので、コンテンツを見るのにインターネットの接続は必要ありません。

両方のオプションを使いたいと考えてみます。ユーザーのデバイスがオンラインかオフラインかあらかじめ知ることはできないので、デバイスがオンラインの場合リモートurlを表示し、デバイスがオフラインの場合、かわりにローカルのWEBリソースが表示したいとしましょう。

いくつかのJavaScriptでこれを実現できます。

サンプルファイルは3つの異なるパブリッシュを含みます：

3つめのアーティクルで実装しる方法は、パブリケーション用のWebResourcesフォルダに"check.html"という別のファイルを追加します。そのファイルに、以下のHTMLコードをペーストします：

<html>
<head>
<title>Check If The Device is Online or Not</title>
</head>
<body>
<script type="text/javascript">
if (navigator.onLine) {
window.location.href = "http://blog.twixlmedia.com/assets/are-we-online/online.html";
} else {
window.location.href = "offline.html";
}
</script>
</body>
</html>

ページが読み込まれる際はいつでも、そのスクリプトを実行します。With the call to navigator.onLine(大文字と小文字を区別)へ呼び出し、インターネット接続があるかどうかWEBブラウザに尋ねます。インターネット接続がある場合、HTTP urlにリダイレクトし、もし未接続ならばローカルのWEBリソースを表示します。

デバイスでサンプルのパブリケーションを表示すると、ネットワーク接続で最初に読み込みます。3つめのアーティクルで、オンラインページを読み込んだとお知らせします。たとえばシステム設定で機内モードをONにした場合、パブリケーションを再び開き、3つめのアーティクルが自動でオフラインのファイルを読み込みます。

あるコンテンツがオンラインでのみ利用できるようにする場合にこの技術はとても便利です。このチェックを使い、コンテンツの閲覧にはオンラインが必要であるとことユーザーに伝える適切なメッセージを表示できます。

サンプルファイルのダウンロードはこちら