プログレッシブウェブアプリ(PWA)の主な特徴の一つは、アプリの肖像画です.あなたのアプリは技術的には、Webブラウザで実行されているが、それを見て努力する必要があります — アンドフィール — ネイティブアプリケーションとして良い.これは、ホーム画面にインストール可能なカスタムアイコンを追加し、アドレスバーを無効にするなどが含まれます.多くのネイティブのような機能が自動的にWebアプリケーションマニフェストによって生成されるAndroidとは異なり、IOSはいくつかの追加のHTMLとCSSのトリックが必要です.ここでどのようにあなたのpwaをIOSのようにネイティブにする方法に関する7つの提案です.

1スタンドアロン

あなたのPWAをスタンドアロンアプリケーション(すなわち、WebブラウザのUIコントロールなしで新しいウィンドウで)として実行する2つの方法があります.最初の方法はapple-mobile-web-app-capable 次のコードを使用してHTMLコードの先頭要素のメタタグ.

<meta name="apple-mobile-web-app-capable" content="yes">

二つ目の方法はdisplay Webアプリケーションマニフェストのプロパティstandalone . Webアプリケーションマニフェストの例は次のようになります.

{
   "name": "Appscope",
   "display": "standalone",
   "icons": [{
      "src": "icons/icon-192.png",
      "sizes": "192x192"},
   {
      "src": "icons/icon-512.png",
      "sizes": "512x512"}
   ]
}

カスタムアイコンを追加する

残念ながら、IOSは、Webアプリケーションマニフェストで指定されたアイコンを使用しません.代わりに、あなたのアプリケーションのすべてのページのカスタムアイコンを使用するには、PNG形式で、あなたのアイコンを提供する必要があります名前apple-touch-icon.png あなたのPWAのルートドキュメントフォルダで.
あなたのアプリケーションの1つのページの特定のアイコンを追加する場合は、次の行をHTMLコードの先頭要素に使用します.

<link rel="apple-touch-icon" href="single-page-icon.png">

別のIOSデバイスは、ホーム画面のアイコンの異なるサイズを使用します.特定のサイズのアイコンを指定するには、sizes link要素の属性.アイコンが装置のために推薦されたアイコンサイズのために指定されないならば、推薦されたものより大きい最小サイズのアイコンは代わりに使われます.
最も一般的なIOSデバイスのサイズを指定する次の例は、AppleのSafari Web Content Guide .

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

IOSは不透明なアイコンを必要と思い出します.アイコンの任意の透明な部分が黒に着色されます.

カスタムスプラッシュスクリーンを追加

次のステップは、あなたの進歩的なWebアプリケーションをよりネイティブにするために、あなた自身のイメージで鈍い、白い起動画面を置き換えることです.カスタムスプラッシュ画面を追加するには、次のリンク要素を使用します.

<link rel="apple-touch-startup-image" href="launch.png">

このイメージが表示するためには、その寸法がアプリケーションが実行されているデバイスのものと同じであることが重要です.たとえば、iPhone Xで動作するように.launch.png 2425ピクセルで1125サイズでなければならないでしょう.ここで起こる問題は、異なる解像度を持つ複数のIOSデバイスがあることです.そして、残念ながら、単にこのコードを異なるサイズの画像に対して複数回繰り返すことはできません.代わりに、我々はmedia 属性は、どの起動イメージを指定するデバイスを指定します.
別のIOSデバイス用のカスタムスプラッシュ画面をサポートするために、PWAのHead要素に次のコードを追加します.

<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">

<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">

<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">

<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">

<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">

<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">

<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">

あなたのPWAのスプラッシュスクリーンを設定するヘルプが必要な場合は、チェックアウトSplash Screen Generator AppScopeで.

スプラッシュスクリーンAppscope

ステータスバーの変更

ステータスバーのステータスバーの黒半透明、黒、およびデフォルト
また、あなたのPWAの時間とバッテリーのステータスを表示する画面の上部の端に沿って領域をIOSのステータスバーをカスタマイズすることがあります.これを行うには、apple-mobile-web-app-status-bar-style コードの先頭要素のメタタグ.

<meta name="apple-mobile-web-app-status-bar-style" content="default">

残念ながら、ステータスバーをカスタマイズする方法の数はかなり制限されますが、Appleはcontent 属性.

default 黒いテキストとシンボルで白いステータスバーの結果.

black 黒いステータスバーと黒いテキストとシンボルの結果、それは完全に黒表示されます.ステータスバーのメタタグを使用しない場合は、ステータスバーのようになります.

black-translucent 白いテキストとシンボルの結果、ステータスバーは、Webアプリの本文要素と同じ背景色を取る.

5 .短い名前を与えてください

あなたのPWAのタイトルは、ホーム画面上の起動アイコンの下に表示されます.トランケーションを避けるために、このタイトルは12文字より長いはずではありませんが、最終的に使用される文字の幅(例えば、文字wよりも広い文字w)になるはずです.
あなたのPWAのために短い名前を指定する1つの方法はapple-mobile-web-app-title コードの先頭要素に次の行を持つメタタグ.

<meta name="apple-mobile-web-app-title" content="Appscope">

もう一つの方法はshort_name Webアプリケーションマニフェストのプロパティ.Webアプリケーションマニフェストの例は次のようになります.

{
   "name": "Little Alchemy 2",
   "short_name": "Alchemy 2",
   "icons": [{
      "src": "/public/icons/icon-192x192.png",
      "sizes": "192x192"},
    {
      "src": "/public/icons/icon-512x512.png",
      "sizes": "512x512"}
   ]
}

6 .選択、強調表示、コールアウトを無効にする

デフォルトでは、IOSのWebブラウザは、ネイティブアプリケーションが持っていないテキストやリンクの特定の対話型の効果を追加します.したがって、あなたのPwaをよりネイティブのように感じさせるために — ウェブサイトや文書のように — これらの効果を無効にすることができます.以下のサブセクションは、3つの最も一般的なタイプの効果を対象とします.

6.1 .テキスト選択を無効にする

テキストの選択New York Times
ほとんどのネイティブIOSアプリケーションがテキストの選択を許可しないように、この機能を無効にすることができます.これを行うには-webkit-user-select CSSプロパティnone 要素の場合は選択できません.テキストの選択を完全にオフにするには、プロパティをbody要素に割り当てます.

body {
   -webkit-user-select: none;
}

6.2 .無効にする

リンク強調表示New York Times
IOSのWebブラウザでリンクをタップすると、灰色のボックスが要素の周りに表示されます.この効果を無効にする簡単な方法はありませんが、強調表示の色を変更することがありますので、効果的に消えてしまう.あなたのPWAのためにこれをするために-webkit-tap-highlight-color プロパティtransparent 望ましい要素に対して(または、要素を要素に割り当てて、すべての要素に対するリンク強調表示を無効にする)

body {
   -webkit-tap-highlight-color: transparent;
}

6.3 .無効にする

リンクcalloutNew York Times
あなたがタップしてIOSのブラウザの要素を保持する場合は、コールアウトメニュー(上記のような)を開きますIOSのこの効果を無効にするには-webkit-touch-callout プロパティnone を指定します.もう一度、すべての要素に対する効果を無効にするには、プロパティをbody要素に割り当てます.

body {
   -webkit-touch-callout: none;
}

有効なタップ効果

効果をタップLittle Alchemy 2
代わりに、デフォルトの灰色のハイライトを使用してリンクをタップすると、タップ効果で自分自身を追加することがあります.を含むontouchstart あなたのコードのbodyタグの属性とその値を空にし、リンクやその他の要素を保持すると、それらの値が表示されます.次のコードを使用して、さまざまな再生:ホバーとアクティブなスタイルは、あなたのPWAに最適な効果を見つけるために.

<html>
   <head>
      ...
   </head>
   <body ontouchstart=””>
      ...
   </body>
</html>

この記事はもともと公開されたMedium . 場合は、ネイティブのアプリのように振る舞うプログレッシブWebアプリの素晴らしい例をチェックアウトする場合は、チェックアウトAppscope .