1
/
5

【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
12 Likes
12 Likes

Weekly ranking

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