4

HTML5 Appcache を使用して、画像と css/JS ファイルをキャッシュすることで Web モバイル アプリを高速化しようとしています。アプリは動的な Web ページに基づいています。

すでに知られているように、Appcache を使用すると、呼び出し元の html ページが常にキャッシュされます -> 動的な Web サイトには適していません。

私の解決策 - 最初の静的ページを作成し、このページでマニフェスト ファイル (manifest="cache.appcache") を呼び出し、キャッシュされたすべてのコンテンツを読み込みます。その後、ユーザーが別の動的ページにリダイレクトされると、リソースはすでに利用可能になっています。(もちろん、この 2 番目の動的ページにはマニフェスト タグはありません)。問題は、ユーザーが 2 番目のページを更新すると、リソースがキャッシュから読み込まれないことです。それらはサーバーから直接ロードされます!

このソリューションは、最初の動的ファイルで Iframe を使用する場合とよく似ています。Iframe ソリューションにもまったく同じ問題があることがわかりました。

そのための解決策はありますか？Appcache は実際に動的コンテンツで使用できますか? ありがとう

4

2 に答える 2

1

はい、URLパラメーターを別の方法で処理すると、動的コンテンツにappcacheを使用できます。

ローカル ストレージを使用してこれを解決しました (これを支援するために jquery localstorage プラグインを使用しました)。

プロセスは

  1. 通常はアンカーまたはリダイレクトから href するときにページから内部的に、代わりに関数を呼び出してリダイレクトします。この関数は、url からのパラメーターを localstorage に格納し、パラメーターなしで url にのみリダイレクトします。
  2. 受信対象ページで。localstorage からパラメーターを取得します。

リダイレクト コード

function redirectTo(url) {
    if (url.indexOf('?') === -1) {
        document.location = url;
    } else {
        var params = url.split('?')[1];
        $.localStorage.set("pageparams", params);
        document.location = url.split('?')[0];
    };
}

ターゲット ページ コード

var myParams = GetPageParamsAsJson();
var page = myParams.page;

function GetPageParamsAsJson() {
    return convertUrlParamsToJson($.localStorage.get('pageparams'));
}

function convertUrlParamsToJson(params) {
    if (params) {
        var json = '{"' + decodeURI(params).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}';
        return JSON.parse(json);
    }
    return [];
}
于 2015-09-23T10:04:17.470 に答える
0

私は、次のような URI スキームによってアクセスされる動的ページをキャッシュする方法を理解するのに非常に苦労しました。

domain.com/admin/page/1
domain.com/admin/page/2
domain.com/admin/page/3

ここでの問題は、アクセスしない限り、appcache が個々の管理者/ページ/... をキャッシュしないことです。

私がしたことは、オフライン ページを使用して、ユーザーがオフラインでアクセスできるようにするページを表すことでした。

オフライン ページの JS は URI を検索し、それをスクレイピングして表示するページを見つけ、ユーザーが管理ダッシュボードにアクセスしたときにすべてのページ データが取り込まれた localStorage からデータをフェッチしてから、各ページへのリンクを表示します。個々のページ。

私は他のソリューションを受け入れていますが、単一の管理ページにアクセスするだけで、多数の個別のページをオフラインにすることができるのはこれだけです。

于 2013-02-14T05:28:39.657 に答える