cssやpngなどの外部リソースをオフラインでキャッシュするためにIndexedDB/PouchDBを使用する

これは私の最初の投稿ですので、間違っていれば教えてください。cssやpngなどの外部リソースをオフラインでキャッシュするためにIndexedDB/PouchDBを使用する

私たちはアンギュラ2ウェブアプリケーションに取り組んでおり、多数のブラウザ（IE11、Chrome、Mobile Safari）でオフラインで作業する機能が必要です。これを達成するために、大量のデータのキャッシュを可能にするため、IndexedDBとPouchDBを検討しました。

私たちの状況は以下の通りです。初期化では、いくつかのリソースファイルを返すapiサービスを呼び出します。 "styles.css"と "image.png"という名前のcssファイルとpngファイルがあります。これらをDBに保存します。それぞれのコンポーネントを表示するときに<link>タグを使用して<head>にCSSを挿入します。

HTMLは次のようになります。私たちはPNGへのURLを持つことになりますStyles.cssを内部

<html> 
    <head> 
     <link href="styles.css" rel="stylesheet"> 
    </head> 
... 
</html>

：

.example-icon .icon 
{ 
    background-image: url("image.png") 
}

質問は、我々は「スタイルを参照してくださいか、です。 "styles.css"と "image.png"の両方がIndexedDB/PouchDBにある場合、htmlの "css"と "styles.css"の "image.png"が表示されます。

ご協力いただければ幸いです。

出典

2017-02-03 twijaya

これは自動的に行うことはできません。インデックス付きDBへのURLはサポートされていません（feature request）。

アプローチでは、リソースをデータベースにBlobとして格納することです。必要に応じてレコードを取得し、URL.createObjectURL(blob)を使用してレコードを取得します。このURLは、URLを作成したページが閉じられると有効にならないため、各ページの読み込み時にレコードを取得する必要がありますが、そのURLをページで使用できます。あなたの例では、これはページに挿入されたスタイルシートのリンクでは機能しますが、スタイルシート内のurl()の参照はページロード時に更新が必要な別のBlob URLである必要があります。

これ以外にも、すべてを文字列として保存したり、データ：URL（スタイルシート内に画像データを埋め込むなど）

制限事項（IE11など）では、オプションがかなり制限されています。最新のブラウザ（最新のChromeとFirefox）では、サービスワーカーとキャッシュストレージAPIを使用することをお勧めします。あなたのアプリケーションはサービスワーカーを登録し、どんなネットワークリクエストもインターセプトしてキャッシュAPIにルーティングすることができます。このアプローチは、URLs into Indexed DBを実装するのに十分強力ですが、これらの新しいAPIを使用したら、とにかくCache APIを使用することを好むかもしれません。

出典

2017-02-06 17:51:17

これはServiceWorkerが設計したものです。 Safari/Edge/IEのApplicationCacheフォールバックを使用してServiceWorkerを実装することができます。 – nlawson

ジョシュアのヒントをありがとう。私たちはURL.createObjectURL（BLOB）を見てきましたが、おそらくその方法を使用しています。正規表現に一致するリライトURLを特定のポートに書き換えるURLを使用しているという問題もあります。 localhost/app/test - > localhost：3000/app/testを入力します。 localhost/objecturl上のURLのみを作成する場合、createObjectURLによって問題が発生するかどうかは不明です。提案はありますか？ @nlawson提案していただきありがとうございます。残念なことに、私は、このユースケースではServiceWorkerのフォールバックとなるためにアプリキャッシュが多用途であるとは考えていません。 – twijaya

cssやpngなどの外部リソースをオフラインでキャッシュするためにIndexedDB/PouchDBを使用する

答えて

関連する問題