search
LoginSignup
8
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Organization

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すれば動くようにしてあります。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8
Help us understand the problem. What are the problem?