1
/
5

Sign up for free

This page is intended for users in Japan(English). Go to the page for users in United States.

【Qiita】Cache Storage API紹介(Next.Js利用)

Photo by Danial Igdery on Unsplash

(Qiitaに公開しているメンバーの投稿です)

こんにちは、ジェルファレザです!
この記事では、APIから取得したレスポンスを保存するアプローチとして、Cache Storage APIの使い方を紹介していきたいと思います。

You can find the English version of this article here ⇒ Cache Storage API Demo with Next.Js

動機

不安定なインターネット接続の環境で、アプリのオフラインサポートがあると有益だと言われています。つまり、インターネットがなくても、少なくともユーザーには何かを見せることができるということです。では、Next.Jsを使ってCache Storage APIでどのように実現するかをデモします。

Cache Storage APIって何?

簡単に言えば、Cache Storage APIはネットワークのリクエストやレスポンスをブラウザのローカルに保存・取得するためのストレージ技術です。キーとしてのリクエストオブジェクトと、値としてのレスポンスオブジェクトがペアで格納されます。コンテンツデータとしてアプリで使われているネットワークリソースを保存するには、Cache Storage APIが最適なツールです。

Cache Storage APIの利点:
1. 非同期でメインスレッドをブロックしない
2. ほとんどの最新ブラウザで利用可能
3. ウィンドウオブジェクト、Web Worker、Service Workerからのアクセスが容易
4. Blobや画像を含む多くのデータを保存することができます。ただし、これはブラウザやデバイスにより違います(参照はこちら)。

なぜこのデモでNext.Jsを使うのか?

最新なアプリケーションには最新の技術が必要です。JavaScriptライブラリとしてのReactは、既に高性能で信頼性の高いアプリを構築する上で有用ですが、Web開発フレームワークであるNext.Jsを使用すると、サーバーサイドレンダリングなど様々の便利な機能を提供することにより、よりよいアプリを作ることができます。ちなみに、私のサイトはNext.Jsで作られています。

・・・気になる続きはQiitaで!

株式会社プロトソリューション's job postings
1 Likes
1 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more