背景

最近iOS16でのWeb Push通知ができるようになってPWA界隈が盛り上がっているので
PWAについて入門してみました。

ChatGPT先生のお言葉

とはいえPWAについてはちゃんとは知らなかったのでChatGPT先生に教えてもらいました。

大体あってそうでしょうか？
2、3、4あたりは本家web.devとも言っていることが共通しているように思います。
https://web.dev/what-are-pwas/

1.レスポンシブデザインについては実装次第なのでPWAの特徴と言えるのかはわからなかったです。
5.プッシュ通知についてはまだよくわかりませんでした。

React＆Viteでの実装

全文

Q. react とviteでpwaを実装してください

A.

すでにReactとViteの知識がある前提で説明します。React と Vite を使って PWA (Progressive Web App) を実装する手順は以下の通りです。

Viteプロジェクトの作成:
1.まず、Viteプロジェクトを作成し、Reactプラグインをインストールします。

npm init @vitejs/app my-pwa-app --template react
cd my-pwa-app
npm install

2.PWAプラグインのインストール:
PWAサポートを追加するために、Vite PWAプラグインをインストールします。

npm install --save-dev vite-plugin-pwa

3.プラグインの設定:
vite.config.js ファイルを作成し、Vite PWAプラグインを設定します。

// vite.config.js
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      manifest: {
        // ここでmanifest.jsonの内容を設定します
        name: 'My PWA App',
        short_name: 'PWA App',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        description: 'A simple PWA using React and Vite',
        icons: [
          {
            src: 'icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
      workbox: {
        // ここでWorkboxの設定をします
      },
    }),
  ],
})

4.アイコンの追加:
PWAで使用するアイコンを追加します。publicフォルダにicon-192x192.pngとicon-512x512.pngを配置してください。

5.サービスワーカーの登録:
index.htmlにサービスワーカーを登録するためのコードを追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="manifest" href="/_app/manifest.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My PWA App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker
            .register('/_app/sw.js')
            .then((registration) => {
              console.log('Service Worker registered:', registration);
            })
            .catch((error) => {
              console.error('Service Worker registration failed:', error);
            });
        });
      }
    </script>
  </body>
</html>

6.アプリケーションの実行とテスト:
アプリケーションを実行し、PWAが正しく機能しているかテストします。

npm run dev

ブラウザで http://localhost:3000 にアクセスして、アプリケーションが正常に動作していることを確認してください。開発者ツールの Application タブで、Manifest と Service Worker が正しく登録されていることを確認できます。

7.オフラインサポートの追加:

オフラインでのアプリケーション利用をサポートするために、Workboxの設定を追加します。vite.config.jsのworkboxオブジェクトに以下の設定を追加してください。

// vite.config.js
workbox: {
  // Precache all the built files for offline support
  globPatterns: ['**/*.{js,css,html,png}'],
  globIgnores: ['**/sw.js', '**/manifest.webmanifest'],
  navigateFallback: '/index.html',
},

この設定により、アプリケーションのすべての静的リソースがプリキャッシュされ、オフラインでもアクセスできるようになります。

8.プロダクションビルド:
すべての設定が完了したら、プロダクション用のビルドを実行します。

npm run build

ビルドが完了すると、distフォルダにプロダクション用のアセットが生成されます。これらのファイルを適切なホスティングサーバーにデプロイして、PWAが正常に動作していることを確認してください。

これで、React と Vite を使った PWA の実装が完了です。上記の手順に従って、PWAの機能をカスタマイズし、さらに強力なオフライン対応アプリケーションを構築できます。

実践

言われた通りにやってみます。
ですがまずViteのアプリの立ち上げ方が古そうだったので下記を代わりに実行しました

npm create vite@latest

CLI上でプロジェクト名とReact＋TypeScriptを設定し言われた通りに実行したところビルドまで問題なく進みました。

Vercelでデプロイし、https://web.dev/learn/pwa/installation/ にある方法でインストールしましたが
下記の画像のようにアドレスバーが表示された状態になってしまいました。
どうやらスタンドアローンモードになっていないようです。

どうしたらいいかChatGPT先生に聞いてみました

Q. 上のViteの例でiosで開いた時standaloneモードになっていないようです

A.

iOSデバイスでStandaloneモードになっていない場合、その原因はおそらくマニフェストファイルに適切な設定がないことです。マニフェストファイルに適切な設定を追加して、iOSデバイスでもStandaloneモードが機能するようにしましょう。

iOSデバイスでは、display: "standalone"がサポートされていないため、代わりにタグを使用してApple独自の設定を追加する必要があります。以下の手順に従って、プロジェクトのindex.htmlファイルを更新してください。

index.htmlファイルを開き、

タグの中に以下のタグを追加します。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Your App Title">

ここで、content="Your App Title"を実際のアプリ名に置き換えてください。

さらに、アプリアイコンとして使用する画像を追加するために、以下のタグを

タグ内に追加します。

<link rel="apple-touch-icon" href="/icon-192x192.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/icon-167x167.png">

この例では、異なるサイズのアイコンを提供していますが、最低限、icon-192x192.pngを提供すべきです。必要に応じて、他のサイズのアイコンも追加してください。

変更を保存し、プロジェクトをビルドしてデプロイします。
これで、iOSデバイスでアプリをホーム画面に追加すると、Standaloneモードで表示されるはずです。ただし、iOSデバイスではPWAの機能が制限されていることに注意してください。例えば、プッシュ通知はiOSのPWAでは利用できません。

(そうなら最初からいうコードを出して欲しかった。。。)
言われた通りにコードを修正すると、以下のようにアドレスバーが表示されていない状態でアプリが表示されました。

まとめ

ひとまずiOSでしか確認していませんが、React＋ViteでPWAを作ることができました。
この後manifestとWorkboxがなんなのかについて深掘りしていこうと思います。