【フロントエンド入門28】オフライン対応とキャッシュ管理｜ネットワーク環境を問わないアプリを構築

現代のWebアプリケーションにおいて、オフライン対応はユーザーエクスペリエンスを向上させる重要な要素です。ネットワーク接続が不安定な環境でもアプリが正常に動作することで、ユーザーの離脱を防ぎ、信頼性の高いアプリを提供できます。本記事では、オフライン対応の基本概念とキャッシュ管理の方法を初心者にもわかりやすく解説します。

オフライン対応の基本
1. オフライン対応とは？
2. オフライン対応が重要な理由
キャッシュ管理の基本
1. キャッシュとは？
2. キャッシュ管理が必要な理由
オフライン対応の技術
1. 1. サービスワーカー
2. 解説
キャッシュ管理の実装
オフラインでのデータ保存
1. IndexedDBの活用
結論

オフライン対応の基本

オフライン対応とは？

オフライン対応とは、インターネット接続がない状態でもアプリの一部または全部の機能が利用できるようにする設計のことです。たとえば、ユーザーが前回訪れたページのデータや画像などがキャッシュされていれば、次回以降はオフラインでも閲覧可能になります。

オフライン対応が重要な理由

ユーザー体験の向上：ネットワークに依存しないため、スムーズに操作できます。
データ損失の防止：オフライン時に入力されたデータを後で同期できます。
広範囲なユーザーに対応：インターネット接続が不安定な地域でも使用可能です。

キャッシュ管理の基本

キャッシュとは？

キャッシュとは、一度取得したデータ（画像、HTML、CSS、JavaScriptなど）をデバイス上に保存し、次回のアクセス時に再利用する仕組みのことです。これにより、アプリの読み込み速度が向上し、オフライン時でもキャッシュされたデータを利用してアプリが動作します。

キャッシュ管理が必要な理由

パフォーマンスの向上：キャッシュを利用することで、ページの再読み込みが速くなります。
オフライン対応：キャッシュされたデータを使って、インターネット接続がなくてもコンテンツを表示できます。
帯域の節約：必要なデータだけを再取得するため、通信量を抑えられます。

オフライン対応の技術

1. サービスワーカー

サービスワーカーは、ブラウザとWebサーバーの間に位置するスクリプトで、ネットワークリクエストのキャッシュ制御やオフライン機能を提供します。

サービスワーカーの基本的な登録

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('サービスワーカーが登録されました:', registration);
    })
    .catch(function(error) {
      console.log('サービスワーカーの登録に失敗しました:', error);
    });
}

解説

navigator.serviceWorker.register()：サービスワーカーを登録します。
登録が成功するときと失敗したときのメッセージをコンソールに表示します。

キャッシュ管理の実装

1. 静的ファイルのキャッシュ

サービスワーカーを使って、アプリのHTML、CSS、JavaScript、画像などの静的ファイルをキャッシュする方法を紹介します。

`service-worker.js` の例

const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/images/logo.png'
];

// インストールイベントでキャッシュを作成
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('キャッシュが作成されました');
        return cache.addAll(urlsToCache);
      })
  );
});

// リクエスト時にキャッシュを使用
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response; // キャッシュが見つかった場合はそれを返す
        }
        return fetch(event.request); // キャッシュがない場合はネットワークから取得
      })
  );
});

解説

installイベント：サービスワーカーが初めてインストールされるときにキャッシュを作成します。
fetchイベント：ユーザーがページを開いたとき、リソースをキャッシュから取得するか、ネットワークから取得するかを判断します。

2. キャッシュの更新と管理

キャッシュされたファイルが古くならないように、キャッシュバージョンを管理し、新しいバージョンが利用可能になったときに自動的に更新する仕組みを導入します。

キャッシュの更新ロジック

self.addEventListener('activate', function(event) {
  const cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName); // 古いキャッシュを削除
          }
        })
      );
    })
  );
});

解説

activateイベント：サービスワーカーが新しいバージョンに切り替わるときに発生します。
caches.delete()：不要になった古いキャッシュを削除して、ストレージの無駄を防ぎます。

オフラインでのデータ保存

IndexedDBの活用

オフライン時に動的なデータ（ユーザーの入力データなど）を保存するために、ブラウザ内のデータベースであるIndexedDBを活用します。

データの保存と取得の例

let db;
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
  db = event.target.result;
  db.createObjectStore('dataStore', { keyPath: 'id' });
};

request.onsuccess = function(event) {
  db = event.target.result;
};

function saveData(data) {
  const transaction = db.transaction(['dataStore'], 'readwrite');
  const store = transaction.objectStore('dataStore');
  store.put(data);
}

function getData(id) {
  const transaction = db.transaction(['dataStore'], 'readonly');
  const store = transaction.objectStore('dataStore');
  const request = store.get(id);

  request.onsuccess = function() {
    console.log('データ取得成功:', request.result);
  };
}