Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@uzresk

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

参考

8
Help us understand the problem. What is going on with this article?
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
8
Help us understand the problem. What is going on with this article?