n350071のブログ

主にRubyなフリーランスエンジニア

🍎GatsbyでPWA対応するため、ウェブアプリマニュフェストを設定する

2019-08-24 n350071PWA

PWAとは、アプリストアを通さずに配布できる新しいタイプのモバイルアプリのようなものです。 その対応の1つにウェブアプリマニュフェストの設定があります。 以下は、ウェブアプリマニュフェストについての引用です。

ウェブアプリマニフェストは、 JSON 形式のファイルでアプリケーションについての情報 (名前、作者、アイコン、説明など) を提供するものです。マニフェストは端末のホーム画面にインストールされたウェブサイトの詳細を通知し、ユーザーによりすばやいアクセスと、より豊かな使い勝手を提供します[要出典]。 ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部であり、これはアプリストアを通さずに端末のホーム画面にインストールすることができ、オフライン作業やプッシュ通知の受け取りなどのその他の可能性を持ったウェブサイトです。

引用元: https://developer.mozilla.org/ja/docs/Web/Manifest

paul hanaoka HbyYFFokvm0 unsplash

設定例

:gatsby-config.js

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: config.manifestName,
    short_name: config.manifestShortName,
    start_url: config.manifestStartUrl,
    background_color: config.manifestBackgroundColor,
    theme_color: config.manifestThemeColor,
    display: config.manifestDisplay,
    icons: [
      {
        src: "/icons/icon-48x48.png",
        sizes: "48x48",
        type: "image/png"
      },
      {
        src: "/icons/icon-96x96.png",
        sizes: "96x96",
        type: "image/png"
      },
      {
        src: "/icons/icon-144x144.png",
        sizes: "144x144",
        type: "image/png"
      },
      {
        src: "/icons/icon-192x192.png",
        sizes: "192x192",
        type: "image/png"
      },
      {
        src: "/icons/icon-256x256.png",
        sizes: "256x256",
        type: "image/png"
      },
      {
        src: "/icons/icon-384x384.png",
        sizes: "384x384",
        type: "image/png"
      },
      {
        src: "/icons/icon-512x512.png",
        sizes: "512x512",
        type: "image/png"
      }
    ]
  }
},

自分の使っているgatsby-starter-hero-blogでは、ここに記述すると反映されます。 :content/meta/config.js

/* manifest.json */
manifestName: "n350071のブログ",
manifestShortName: "n350071のブログ", // max 12 characters
manifestStartUrl: "/index.html",
manifestBackgroundColor: "white",
manifestThemeColor: "#666",
manifestDisplay: "standalone",