スマホ のホーム画面に追加したアイコンからウェブにアクセスするとネイティブアプリのような動作（ブラウザのURLバーなどのフレームを非表示）にする事ができます。

WEBアプリ・マニフェスト（manifest.json）を作成し、設定を書き込み、HTMLから呼び出すだけです。

WEBアプリ・マニフェストって何？どうやって作るの？という方は Web App Manifest Generator から入力するだけで簡単に作れるのでお試しになってみてください。

少しだけ設定について書きますが、Display Modeには「Standalone」をセットしておきましょう。

{
  "name": アプリ名,
  "short_name": アプリ名,
  "theme_color": テーマカラー,
  "background_color": 背景色,
  "display": "standalone",
  "orientation": "portrait",
  "Scope": スコープの範囲,
  "start_url": アプリのurl,
  "icons": [
    {
      "src": アイコンのアドレス,
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": アイコンのアドレス,
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": アイコンのアドレス,
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": アイコンのアドレス,
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": アイコンのアドレス,
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": アイコンのアドレス,
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": アイコンのアドレス,
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": アイコンのアドレス,
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

作成したWEBアプリ・マニフェスト（manifest.json）をサーバーにアップしてHTMLから呼び出してましょう。

<link rel="manifest" href="./manifest.json">
<meta name="theme-color" content="#00AC9B">

ここで、サービスワーカー（sw.js）もサーバーにアップしておきましょう。

色々なサイトを読んでいるとsw.jsは空でも良いです！というサイトが大半なのですが、私の環境では上手く動かない事がありました。

上手く動かない場合はsw.jsに下記のような記述をしておきましょう。

self.addEventListener('fetch', function(event) {

 });

今回はAMP HTMLからサービスワーカーを呼び出したので下記のように書き込みます。

まずはheadタグに下記のタグを追加します。

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

そしてbodyタグに下記のように追加します。

<amp-install-serviceworker src=サービスワーカーのアドレス data-iframe-src=アプリのアドレス layout="nodisplay">
</amp-install-serviceworker>

これで、WEBアプリ・マニフェスト（manifest.json）とサービスワーカー（sw.js）を呼び出す事ができるようになりました。

スマホ でアクセスして「ホーム画面に追加」でホーム画面に追加してみましょう。

この状態ではネイティブアプリのようなアイコンではなくて、サイトのアイコンにブラウザ（クロムなど）のミニアイコンがくっついたような状態の場合があります。

次回の記事ではネイティブアイコンのようなアイコンするための記述を紹介したいと思います。