Next.jsでiOSにPWAを配布する為のページをつくる 📱

かつて、Safariでアクセスした際と、PWAとしてホーム画面に追加した後に開いた際でページの見た目を変更するウェブサイトをつくったことがあるのですが、今回はそれをNext.jsに移植してみようと思います。

DEMO

web-app-store-kit.vercel.app

ホーム画面に追加する前と後でページのデザインが変更されます。

ソースコード（抜粋）

useIsStandalone.tax

import { useEffect, useState } from 'react';

declare global {
  interface Navigator {
    standalone?: boolean;
  }
}

export function useIsStandalone({
  width,
  height
}: {
  width: number;
  height: number;
}) {
  const [ isStandalone, setisStandalone ] = useState(false);

  useEffect(() => {
    setisStandalone(!!navigator.standalone);
  }, [width, height]);

  return { isStandalone };
}