LoginSignup
6
6

More than 5 years have passed since last update.

PWAを実装するにあたって

Last updated at Posted at 2017-11-21

オフライン対応のためのブラウザのストレージについて

ブラウザ上で保存できる場所

webstorage

WebStorageはkey-valueストレージです。もっとも簡単なクロスブラウザー保存ですが、落とし穴があります。セーブする値は文字列でなければならないので、保存するデータを直列化、復元化する必要があります。大きなデータセットにはサイズ制限があります。また、競合の問題もあります。すなわち、ブラウザーでタブを2つ同時に開いた場合、なにが起こるか分からないのです。

IndexedDB

IndexedDBはWebStorageに比べてずっと強力で、オフライン・ストレージに使うには最適です。スペースは十分です。トランザクションをサポートし、ブラウザーで同時に複数のタブを使っても安全です。最近のブラウザーならサポートしています。

WebSQL

WebSQLは文字通りブラウザーのSQLiteです。クライアント側でACID特性を備え、完全な機能を持ったリレーショナルDBです。残念なことに標準委員会からは認証されず、non-Blink/Webkitブラウザーでサポートされませんでした。

ライブラリー

localForage

簡単なlocalStorageライクなAPI

IDBwrapper

クロスブラウザーのkdexedDBラッパー

PouchDB

CouchDBが提供するクライアント側でのストレージ。CouchDBを使っている場合、バックエンドで自動的に同期をサポートする

機能

Credential Management API

ブラウザごとにユーザー認証をできるAPI。サイトに入るたびにログインしなくていい。

Payment Request API

決済のためのAPI。

service worker

Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザのインタラクションを必要としない機能を Web にもたらします。すでに現在、プッシュ通知やバックグラウンド同期が提供されています。さらに将来は定期的な同期、ジオフェンシングなども導入されるでしょう。このチュートリアルで説明する機能は、ネットワークリクエストへの介入や処理機能と、レスポンスをプログラムから操作できるキャッシュ機能です。

どのフレームワークでPWA化するか

vue.js

angular.js

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6