Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

参考

uzresk
触ったプロダクトのメモです。
https://github.com/uzresk
tis
創業40年超のSIerです。
https://www.tis.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした