35

Service Worker on fetch イベントで POST リクエストをキャッシュしようとしました。

を使用cache.put(event.request, response)しましたが、返された promise は で拒否されましたTypeError: Invalid request method POST.。

同じ POST API をヒットしようとすると、caches.match(event.request)undefined が表示されました。

しかし、GET メソッドに対して同じことを行ったところ、うまくいきcaches.match(event.request)ました。GET リクエストに対して応答が返ってきたからです。

Service Worker は POST リクエストをキャッシュできますか? それができない場合、アプリを完全にオフラインにするためにどのようなアプローチを使用できますか?

4

5 に答える 5

12

GraphQL API を使用した最近のプロジェクトで、次のソリューションを使用しました。リクエストのシリアル化された表現をキャッシュ キーとして使用して、API ルートからのすべてのレスポンスを IndexedDB オブジェクト ストアにキャッシュしました。次に、ネットワークが利用できない場合のフォールバックとしてキャッシュを使用しました。

// ServiceWorker.js
self.addEventListener('fetch', function(event) {
    // We will cache all POST requests to matching URLs
    if(event.request.method === "POST" || event.request.url.href.match(/*...*/)){
        event.respondWith(
            // First try to fetch the request from the server
        fetch(event.request.clone())
            // If it works, put the response into IndexedDB
            .then(function(response) {
                // Compute a unique key for the POST request
                var key = getPostId(request);
                // Create a cache entry
                var entry = {
                    key: key,
                    response: serializeResponse(response),
                    timestamp: Date.now()
                };

                /* ... save entry to IndexedDB ... */

                // Return the (fresh) response
                return response;
            })
            .catch(function() {
                // If it does not work, return the cached response. If the cache does not
                // contain a response for our request, it will give us a 503-response
                var key = getPostId(request);
                var cachedResponse = /* query IndexedDB using the key */;
                return response;
            })
        );
    }
})

function getPostId(request) {
    /* ... compute a unique key for the request incl. it's body: e.g. serialize it to a string */
}

Dexie.js を IndexedDB ラッパーとして使用する特定のソリューションの完全なコードを次に示します。お気軽にご利用ください！

于 2018-09-07T13:10:14.487 に答える