Open1

【PWA】Next.jsのAppRouterでiphoneのホーム画面にアプリとして追加できるようにする。

Riku OgawaRiku Ogawa

環境

Next.js:v15.1.6

PWAとは

PWA（プログレッシブウェブアプリ）とは、Webサイトをアプリのように利用できる技術や仕組みです。Webサイトとアプリの両方の利点を備えており、ネイティブアプリのような機能を使用することができます。

PWAのやり方

１．iPhoneでChromeを開く
２．右上の共有マーク
３．ホーム画面に追加
４．ホーム画面にアプリアイコンが追加される。

問題点

ただ、Next.jsで何も設定していないとアドレスバーが表示されてしまう。
アドレスバーが表示されなくなるとても簡単な方法を見つけた。

一番簡単な方法は、layout.tsxこの１行を追加するだけ。

さらに細かく設定するには

Next.jsはここら辺の設定がとても簡単にできるっぽい。
Appディレクトリ下にこのようなmanifest.tsを追加するだけでアプリ名やアイコンなどの細かい設定が可能に。
特に、画面遷移してもPWAを継続したい場合はこの方法でできた。

app/manifest.ts
import type { MetadataRoute } from 'next'
 
export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Next.js PWA',
    short_name: 'NextPWA',
    description: 'A Progressive Web App built with Next.js',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#000000',
    icons: [
      {
        src: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: '/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
  }
}

参考

https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps

公式ドキュメントによると、プッシュ通知の追加も簡単にできるとのこと。
まだ試していないが、もしかしたらiOSのプッシュ通知もできるかもしれない。