GatsbyをPWAにする：サービスワーカーとWebアプリマニフェスト

投稿日: 2022-04-20 2022-10-06
タグ: GatsbyJS

プログレッシブウェブアプリ（PWA）を使用すると、開発者はアプリのようなエクスペリエンスをユーザーに提供できます。 Gatsby.jsの最高のパフォーマンスと組み合わせると、非常に高速なWebサイトが得られます。

このガイドの手順は、Gatsbyプロジェクトが機能していることを前提としています。したがって、まだ行っていない場合は、 Gatsby FirstStepsの記事に従ってGatsbyを開始できます。サイトの構成に飛び込みます。

Webアプリマニフェスト

Webアプリマニフェストは、Webアプリに関するメタデータを含む簡単なJSONファイルです。これは、ユーザーのデバイスにインストールされたときの動作方法に関するいくつかの指示をブラウザーに提供します。

WebアプリマニフェストをGatsbyに追加するには、gatsby-plugin-manifestをインストールします。

$ npm install --save gatsby-plugin-manifest

次に、プラグインをGatsby構成に追加できます。

gatsby-config.js

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Alligator.io`,
        short_name: `Alligator`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#FAE042`,
        display: `standalone`,
      },
    },
  ],
}

次に、Webアプリマニフェストを構成するためのいくつかのオプションを見てみましょう。

アイコン

アプリがユーザーのホーム画面に保存されるときに使用するブラウザーのアイコンのセットを定義できます。そのために利用できるオプションは3つあります。

1. 自動

利用可能な2つの自動オプションがあります。最初に、次の前提条件で最大のアイコンサイズをGatsby.jsに提供する必要があります。

少なくとも512×512のサイズ。
二乗。透明でない場合は、バーが自動的に追加されます。
次のいずれかの形式：JPEG、PNG、WebP、TIFF、GIF、またはSVG。

次に、プラグインのオプションに次の行を追加します。

gatsby-config.js

icon: `src/images/icon.png`,

Gatsbyは、提供されたソースから事前構成されたアイコンのセットを生成します。

2. ハイブリッド

ハイブリッドオプションを使用すると、アイコンが自動的に生成される柔軟性が少し向上します。ソースファイルについては、以前と同じ前提条件に従います。そして、プラグインオプションに以下を追加します。

gatsby-config.js

icon: `src/images/icon.png`, 
icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

ここでは、 icons 必要なアイコンサイズのアレイ構成。

3. マニュアル

手動モードでは、 static フォルダーに目的のアイコンを提供し、Webアプリマニフェスト全体を定義する必要があります。

プラグインのオプションでアイコンサイズを指定しますが、 icon 設定。

gatsby-config.js

icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

ローカリゼーションやデータフェッチなど、デフォルトをオーバーライドするために利用できるオプションがさらにいくつかあります。これらは、npmWebサイトのパッケージのページにあります。また、 Webアプリマニフェストの基礎にアクセスして、各オプションで何ができるかについてさらに詳しく知ることをお勧めします。

サービスワーカー

Webアプリマニフェストの準備ができたので、サイトの ServiceWorkerを生成する方法を見てみましょう。開始するには、gatsby-plugin-offlineをインストールしましょう。

$ npm install --save gatsby-plugin-offline

次に、Gatsby構成に以下を追加できます。

gatsby-config.js

plugins: [`gatsby-plugin-offline`]

重要：ウェブアプリマニフェストをキャッシュするには、リストする必要があります gatsby-plugin-manifest BEFORE gatsby-plugin-offline.

プラグインは、Googleの Workbox ライブラリを利用して、サービスワーカーを作成します。自動ファイルキャッシュを取得し、ユーザーが最初にアクセスした後にページをオフラインで利用できるようにします。

サービスワーカーから少し余分なものを必要とするサイトに特定のニーズがある場合は、デフォルトオプションをワークボックス構成でオーバーライドできます。ただし、デフォルトを変更するとオフラインサポートが機能しなくなる可能性があることに注意してください。詳細については、リンクされたリソースを確認してください。

サービスワーカーの削除

オフライン機能をオフにする必要がある場合は、 gatsby-plugin-remove-serviceworker を使用して、 serviceworkerを削除できます。

そのためには、最初に削除プラグインをインストールしてアンインストールする必要があります gatsby-plugin-offline:

$ npm install gatsby-plugin-remove-serviceworker
$ npm uninstall gatsby-plugin-offline

次に、Gatsby構成を更新できます。

gatsby-config.js

 plugins: [
-  `gatsby-plugin-offline`,
+  `gatsby-plugin-remove-serviceworker`,
 ]

これにより、サービスワーカーが適切に登録解除されます。

結論

Gatsbyにオフラインサポートを追加すると、多くの可能性が開かれます。オフラインブラウジング、読み込み時間を短縮するためのキャッシュアセット、簡単にアクセスできるようにWebサイトをモバイルホーム画面に保存するなど。これらのプラグインでできることは他にもたくさんあります。記事全体にリンクされているリソースを読むことを強くお勧めします。

getdocs

13036