uni farm

gatsbyjsのサイトをPWA対応する

やってみたかった。設定自体はpluginを入れるだけなので簡単

適用後に挙動がどうなるかメモを残したかった

PWAとは

https://web.dev/i18n/en/what-are-pwas/

この記事を読んでの理解

PWA(progressive web app)はwebアプリとネイティブアプリをいいとこ取りしたような特徴をもつ

名前の通りwebアプリであるが、機能的な違いとしてはオフラインで動くようにした、というのが大きな違い

またサイトへの効果として、アクティブユーザーなどのサイト指標が増加するなどの成果を上げている

各アプリの特徴としては

webアプリはブラウザで検索すれば出てくる、また、URLなどの共有も容易にできるためリーチしやすいといえる

ネイティブアプリはデバイス上にインストールするため、ネットワークの問題を気にせず使用することができる(高速で信頼性が高い)。またデバイス特有のシステム(デバイス上のデータの読み書きなど)に対応しているなどといった機能面で優れている

最近ではwebアプリでもそういった機能(File API)が提供されており、webアプリにおいてもネイティブアプリと同程度に機能的なアプリを作ることができるようになってきている

設定

設定はだいたい公式ページをみて行った

manifestという設定ファイルを追加するのと、service workerを用いてコンテンツをキャッシュするようにしているらしい

あと対象ページがhttps化していないといけない

  • gatsby-config.js
...
plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `xxxx`,
        short_name: `xx`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#fcfcfc`,
        display: `standalone`,
        icon: `./content/assets/logo.png`, // path for logo
      },
    },
    {
      resolve: "gatsby-plugin-offline",
    },
  ],
}

更新があったら最新の状態にする

キャッシュがあると更新されていない状態が発生するのではと思い、最新の状態を担保する方法について調べてみた

キャッシュはservice workerでもっている。更新があったら促すようにするといいと公式にあった

公式の説明通りgatsby-browser.jsに関数を追加した

https://www.gatsbyjs.com/docs/how-to/performance/add-offline-support-with-a-service-worker/#displaying-a-message-when-a-service-worker-updates

動作確認

desktop

chromeで開くと、アドレスバーに部分にインストール用のアイコンが表示される。クリックするとapp用のファイルのダウンロードが行われる

ubuntuだったので.desktopファイルがダウンロードされた。macだと.appになるらしい

こんな感じで開くことができる

pwa desktop

mobile

chromeで開くと、下の方にホーム画面に追加を促すようなメッセージがでてくる

対応しているだけででてきた

pwa sp chrome

アプリはこんな感じでインストールされた。アイコン丸くしたほうがいいのかも

pwa sp icon

更新を促すconfimダイアログもちゃんとでる(日本語は後でなおした)

pwa confirm reload

更新頻度低いサイトなのであまりやる意味はないが、簡単に対応できるのでやっておくといいかなと思った

参考

2022, Built with Gatsby. This site uses Google Analytics.