PWA対応をブログでしてみた

April 28th, 2019

PWAとは？

Progressive Web Appの略で、ネイティブアプリっぽく動作させるためのいくつかの要件を満たしているWebアプリのこと。オフラインキャッシュやプッシュ通知とかですね。去年あたり？日経新聞さんが対応ゴリゴリにやって界隈で話題になりました。 ※ヒーローイメージはSlackのPWAコミニティで選ばれたロゴ。

なぜPWA対応するの？

速度改善
オフライン対応
ユーザーへの訴求Push通知実施

などが理由としてはあげられるのだろうけど、こういったブログでやる意味はほとんどないと思います。速度改善に繋がる部分はまぁ意味があるかもしれないけど、正直もともと爆速だし、オフラインでこのブログみてもな、、、って自分でも思うし。完全にやってみたかっただけです。

GatsbyアプリにPWA対応する

manifestの適用編

まずはweb manifestを適用させていきます。 Gatsbyにプラグインがあるので、インストール。

npm install --save gatsby-plugin-manifest

そしたら以下をgatsby-config.jsに追記しましょう。

module.exports = {
  // ...省略
  plugins: [
    // ...省略
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "AKIFUMI SATO",
        short_name: "AKIFUMI SATO",
        start_url: "/",
        background_color: "#fff",
        theme_color: "#fff",
        display: "standalone",
        icon: "static/favicon.png",
        icons: [
          {
            src: `/favicon/favicon-32.png`,
            sizes: `32x32`,
            type: `image/png`,
          },
          {
            src: `/favicon/favicon-192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/favicon/favicon-512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
        crossOrigin: `use-credentials`,
      },
    },
  ],
}

ちょっと初見でわかりにくい点として、iconで設定した画像をベースにiconsのsrcで指定したパスにプラグインが画像を生成・配置してくれます。なので実際にはfavicon-xx.pngとかはいちいちディレクトリに配置しなくてオッケーです。

これをやって実際にmanifestが画面上で確認できたら、今度はオフライン対応をしてみましょう。

offline適用編

例のごとく、Gatsbyのプラグインをインストール。

npm install --save gatsby-plugin-offline

そしたら以下をgatsby-config.jsに追記しましょう。

module.exports = {
  // ...省略
  plugins: [
    // ...省略
    'gatsby-plugin-offline',
  ],
}

たった１行。。。このプラグインは内部的にはWorkboxっていうGoogle製のライブラリを使用してて、optionで同様の設定とかを渡せるらしいのですが、デフォルト値で十分いい感じにキャッシュしてくれるので↑で基本は十分です。

感想

「ブログでPWAやってどうすんだよ、、、」って思ってたけど、やっぱやってみると少し感動しました。とは言っても、今回結局デフォルトで設定されてるWorkboxの内容みながら少しドキュメント読んだりはしたんですが、諸々書いてみたわけじゃないからちょっと不完全燃焼なところもあるので、余裕あればそのうちGatsby以外で書いてみようと思います。