Fetch API - カスタムJSONを含むレスポンスを作成

私はCache Storageを使ってプログレッシブウェブアプリケーション（PWA）を構築しています。キャッシュにputする必要があるカスタムオブジェクトがありますが、キャッシュはResponseオブジェクトを引数として受け取ります。だから私の質問は、JSONを持っているResponseオブジェクトを適切に作成する方法です。私は他のキャッシュ戦略（localStorageまたはIndexedDB）を使用することができますが、この場合は特に興味があります。カスタムJSONをリクエストとしてキャッシュに保存します。Fetch API - カスタムJSONを含むレスポンスを作成

var myJSON = JSON.stringify({custom:"object"}); 
caches.open('cache-name').then(function (cache) { 
    var response = new Response(); //My JSON should go into this Response obj. 
    return cache.put('cache-name', response); 
});

出典

2016-11-15 Христо Панайотов

キャッシュストレージのようなものをロギングを経由して保存されていることを確認することができます。あなたのサービスワーカーは、フェッチ要求を傍受し、キャッシュ内の一致を見つけ、見つかった場合に一致を返します。そのため、キャッシュは 'Response'オブジェクトを取ります。あなたの質問は、汎用ストアとしてキャッシュを使用しようとしているようです。本当？その場合は、キャッシュストレージを使用しないでください。それ以外の場合、キャッシュが実際にサービスワーカーを対象としている場合、JSONレスポンスはファイル（クライアントが要求するファイル）内に存在し、サービスワーカーのインストール時にそのファイルをキャッシュに追加する必要があります。 – tony19

こんにちは、返信ありがとうございます。私は一般的なストレージとして使用しようとしています。私の考えは、JSONを変更してストアに入れることです。ユーザーがインターネットに接続していない場合、サービスワーカーは変更されたJSONをストレージから返し、アプリケーションはこの変更されたJSONでレンダリングします。今はlocalStorageを使用してサービスワーカーにキャッシュするための修正とオンラインファーストの戦略を保存しても問題ありません。しかし、私は、修正されたURLアドレス可能なリソースのための一般的なストレージとしてどのようにキャッシュを使用することが可能か疑問に思った。 –

確か;それはあなたのWebアプリケーションのために意味がある場合は、それを行うことが可能です。 Cache Storage APIがサポートされている場合は、サービスワーカーまたは制御されたページのコンテキストでサポートすることができます。ここでは基本的な例を以下に示します。

const data = { 
    1: 2, 
    3: 4 
}; 

const jsonResponse = new Response(JSON.stringify(data), { 
    headers: { 
    'content-type': 'application/json' 
    } 
}); 

caches.open('json-cache').then(cache => cache.put('/data.json', jsonResponse));

は手動であなたが期待するデータは、サービス従事者での使用のために意図されて

caches.match('/data.json').then(r => r.json()).then(console.log)

出典

2016-12-14 21:12:19

Fetch API - カスタムJSONを含むレスポンスを作成

答えて

関連する問題