AstroでPWAを作るときに便利な２つのパッケージ

Astroは自由度が高いので、パッケージを使わずにPWAを作ることができるんだけど、せっかくコミュニティーでパッケージが作られているので、利用しちゃいましょう！

以下のパッケージをインストールして、設定を済めせたらすぐにPWA対応することができます。
Astro Service Worker
astro-webmanifest

Astro Service Worker

こちらはService Workerの作成と登録を自動化してくれるパッケージ。
npm install astrojs-service-workerでインストールして、下記のようにastro.config.mjsファイルを設定する。

import { defineConfig } from "astro/config";
import serviceWorker from "astrojs-service-worker";

export default defineConfig({
 integrations: [serviceWorker()],
});

astro-webmanifest

こちらはwebmanifestrの作成と登録を自動化してくれるパッケージ。
npx astro add astro-webmanifestでパッケージをインストールしたら、astro.config.mjsファイルを下記のように設定してください。

import { defineConfig } from 'astro/config';
import webmanifest from 'astro-webmanifest';

export default defineConfig({
  // ...
  integrations: [
    webmanifest({
      /**
       * 必須
       **/
      name: 'アプリ名',

      /**
       * 任意
       **/
      icon: 'src/images/your-icon.svg', // ファビコン＆アイコンのソース

      short_name: 'App', // ホーム画面で表示される名前
      description: 'アプリの説明',
      start_url: '/',
      theme_color: '#3367D6', // 通知バーの色
      background_color: '#3367D6', // 起動時の背景色
      display: 'standalone', // 
    }),
  ],
});

最終的にこんな感じの設定になります。

import { defineConfig } from 'astro/config';
import serviceWorker from "astrojs-service-worker";
import webmanifest from "astro-webmanifest";

export default defineConfig({
  integrations: [
    serviceWorker(),
    webmanifest({
      name: 'おみくじ',
      icon: 'src/images/icon.png',
      short_name: 'おみくじ',
      description: 'おみくじ',
      start_url: 'https://test.com/',
      theme_color: '#f4f4ff',
      background_color: '#f4f4ff',
      display: "standalone",
    })
  ],
});

たったこれだけでPWA化できるので是非試してみて！