Tweet

通知送信 ケース３：iOS 16.4のiPhoneへの通知

iOS 16.4からWebプッシュに対応しました。通常のWebサイトのままでは通知ができず、PWAとしてインストールし、ホーム画面にアイコンがある状態にしないと通知が出ないようです。

Viteの場合は、vite-pwaというプラグインを使うと簡単にPWA化できます。

ライブラリーのインストール

npm i vite-plugin-pwa -D

vite.config.tsの追記

vite.config.ts

  import react from '@vitejs/plugin-react'
  import { defineConfig } from 'vite'
+ import { VitePWA } from 'vite-plugin-pwa'
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [
      react(),
+     VitePWA({
+       registerType: 'autoUpdate',
+       devOptions: {
+         enabled: true
+       },
+       injectRegister: false
+     })
    ],
    resolve: {
      alias: [
        {
          find: './runtimeConfig',
          replacement: './runtimeConfig.browser',
        },
      ]
    }
  })
  

無事通知が届きました。