Posted at

iOSで「ホーム画面に追加」はPWACompatを使うのが良さそうだよ(2018/10時点)


はじめに

Reactのチュートリアルでいろいろ遊んでいたのですが、iOS(iPhone)のSafariでは「ホーム画面に追加」を押してもAndroidのようにアイコンとかうまく設定してくれないようです。

PWACompatを使うと、iOSで動くようにタグを色々追加してくれそうなのでやってみました。


注意

2018/10月時点の情報です。iOSでの対応が進めば不要になる可能性が高いと思われます。


設定方法

manifest.jsonは、チュートリアルのままです。

{

"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

index.htmlにPWACompatを組み込んでいきます。追加するのは2点です。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>React Test</title>
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest" />
</head>
<body>
<div id="app"/>
<script type="text/javascript" src="/index.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"
integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
crossorigin="anonymous"></script>
</body>
</html>

逆にするとmanifest.webmanifestが404エラーになりますのでこの順番は重要です。

<link rel="manifest" href="manifest.json">

<link rel="manifest" href="manifest.webmanifest" />


結果

おお。追加されてますね。

image.png

あとは「ホームに追加」を押せばデスクトップにアイコンができているはずです。

image.png

起動すると、ブラウザのバーとかがなくなっているはずです。

image.png


ソース

Reactのtutorialに少し手を加えたものを置いておきます。

npm inpm run buildnpm startすれば動くようにしてあります。

https://github.com/uzresk/react-tutorial


参考