Svelte入門：リファレンス Configuration -Vol.17-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
KitConfig
1. serviceWorker
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

KitConfig

kit プロパティは SvelteKit を設定するために使用され、以下のようなプロパティを持つことができます：

svelte.config.js ファイル内の kit オブジェクトは、SvelteKit アプリケーションの核となる設定を定義します。このプロパティによって、アプリケーションのルーティング、ビルド、デプロイなどの多くの側面をカスタマイズできます。

例えば：

const config = {
  kit: {
    // KitConfig プロパティがここに入ります
    adapter: adapter(),
    paths: {
      base: '/my-app',
      assets: 'https://cdn.example.com'
    },
    // その他の設定...
  }
};

KitConfig には多くのプロパティが含まれる可能性があり、プロジェクトの要件に応じて以下のような設定が可能です：

adapter: アプリケーションのデプロイ先環境を定義します（Node.js、静的サイト、AWS Lambda など）
paths: ベースパスやアセットパスなどのパス設定
prerender: プリレンダリングの設定
env: 環境変数の扱い方
csp: コンテンツセキュリティポリシー設定
alias: インポートパスのエイリアス
files: さまざまなファイルやディレクトリの場所
outDir: ビルド出力先のディレクトリ
version: アプリケーションのバージョン管理方法

こうした設定を変更することで、SvelteKit アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

（注：具体的な各プロパティの詳細説明がドキュメントにはさらに記載されていると思われますが、入力された文章には含まれていないため、一般的な説明に留めています。）

serviceWorker

サービスワーカーに関連する設定です。

register

デフォルト値: true

サービスワーカーが存在する場合に自動的に登録するかどうかを指定します。

files

デフォルト値: (filename) => !/\.DS_Store/.test(filename)

staticディレクトリ内のどのファイルが$service-worker.filesで利用可能になるかを決定します。

サービスワーカーとは

サービスワーカーは、ブラウザがバックグラウンドで実行するスクリプトで、ネットワークリクエストを傍受し、オフライン機能を提供したり、キャッシュ戦略を実装したりできます。SvelteKitでは、プロジェクトのルートにsrc/service-worker.js（または.ts）ファイルを作成することでサービスワーカーを定義できます。

register設定の使い方

通常は自動登録（デフォルト）を有効にしておくのが便利ですが、特定の状況では無効にする必要があるかもしれません：

// svelte.config.js
export default {
  kit: {
    serviceWorker: {
      register: false // サービスワーカーの自動登録を無効化
    }
  }
};

サービスワーカーの登録を無効にする理由：

開発中にキャッシュ関連の問題を避けるため
カスタムの登録ロジックを実装するため
特定の環境でのみサービスワーカーを使用したい場合

files設定のカスタマイズ例

この設定により、$service-worker.filesに含まれるファイルをフィルタリングできます：

// svelte.config.js
export default {
  kit: {
    serviceWorker: {
      files: (filepath) => {
        // .DS_Storeファイルと一時ファイルを除外
        return !/\.DS_Store/.test(filepath) && !filepath.endsWith('.tmp');
      }
    }
  }
};

より具体的な例：

// svelte.config.js
export default {
  kit: {
    serviceWorker: {
      files: (filepath) => {
        // 画像とCSSファイルのみをサービスワーカーで利用可能に
        return /\.(png|jpg|jpeg|gif|svg|css)$/.test(filepath);
      }
    }
  }
};

サービスワーカーの実装例

// src/service-worker.js
import { build, files, version } from '$service-worker';

// ビルドされたアプリファイル、静的ファイル、バージョン情報へのアクセス
const CACHE = `cache-${version}`;
const ASSETS = [
  ...build, // ビルドされたJS/CSSファイル
  ...files  // static内のファイル（files関数によってフィルタリングされる）
];

// インストール時にファイルをキャッシュ
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE).then((cache) => cache.addAll(ASSETS))
  );
});

// fetch時にキャッシュから取得
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

サービスワーカーを適切に設定・実装することで、オフラインサポートやパフォーマンスの向上など、ユーザー体験を大幅に改善できます。