gatsbyのgatsby-plugin-manifestプラグインを使ってwebmanifestを自動生成する

8490 ワード
webmanifest PWA gatsby PWA テキストリンク

gatsby-plugin-manifest

基本はここに書いてあるが、細かな工夫点をいくつか

そのままの状態ではiPhone Safariの「ホーム画面に追加」のアイコンにならない

react-helmetなどを使ってheadタグ内に以下を記載

/* icons/icon-48x48.pngなどは、gatsby-plugin-manifestで自動生成される */
<link rel="apple-touch-icon" href="icons/icon-48x48.png" sizes="48x48" />
<link rel="apple-touch-icon" href="icons/icon-72x72.png" sizes="72x72" />
<link rel="apple-touch-icon" href="icons/icon-96x96.png" sizes="96x96" />
<link rel="apple-touch-icon" href="icons/icon-144x144.png" sizes="144x144" />
<link rel="apple-touch-icon" href="icons/icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="icons/icon-256x256.png" sizes="256x256" />
<link rel="apple-touch-icon" href="icons/icon-384x384.png" sizes="384x384" />
<link rel="apple-touch-icon" href="icons/icon-512x512.png" sizes="512x512" />

自動生成の元となる画像が透過や正方形じゃない場合は、iPhoneで背景色ブラック固定になってしまう

方法その1

元となる画像を正方形、透過無しでつくる

gatsby-config.js
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `minimal-ui`,
      icon: `src/images/icon.png`, // この画像を正方形、透過無しで作る
    }
  }

方法その2

gatsbyプロジェクトのルートフォルダにstaticフォルダを作り、背景色のあるアイコンファイルを配置する（ファイル名、サイズは各自設定）。

その後に以下のようにlayoutなどで<head>に入るように設定する。

layout.tsx
import Helmet from "react-helmet"
...
...
<Helmet>
  <link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png"/>
  <link rel="apple-touch-icon" sizes="152x152" href="/icons/touch-icon-ipad.png"/>
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/touch-icon-iphone-retina.png"/>
  <link rel="apple-touch-icon" sizes="167x167" href="/icons/touch-icon-ipad-retina.png"/>
</Helmet>

タブやブックマークのfaviconだけは自動生成の物にしたくない

faviconはここで指定されているので、自動生成される48x48が上書き出来れば良い。

Adding Assets Outside of the Module System
https://www.gatsbyjs.org/docs/adding-images-fonts-files/

gatsbyプロジェクトのルートフォルダにstaticフォルダを作りその中にicons/icon-48x48.pngを作ると、gatsby develop時にgatsby-plugin-manifestで自動生成されたアイコンを上書きする。

画像を変更したけど、faviconのキャッシュが効いてて新しい画像が見えない

Chromeの場合

強制的にfaviconキャッシュを全部消す

rm /Users/ユーザー名/Library/Application Support/Google/Chrome/Default/Favicons