開発者ドキュメント

GatsbyサイトをプログレッシブWebアプリに変換する方法

序章

Gatsby は、ソース素材をすぐに展開できる静的HTMLファイルに変換するための一般的なフレームワークです。 このため、 Static Site Generator (SSG)と呼ばれることがよくあります。 SSGとして、複数のコンテンツソースを最適化されたWebサイトに変えることで、ユーザーエクスペリエンス(UX)にすでにプラスの影響を与えていますが、UXの改善に利用できる別のレイヤーがあります。プログレッシブウェブアプリ機能です。

プログレッシブウェブアプリまたはPWAは、ブラウザとオペレーティングシステムの間のギャップを埋めるために新しいテクノロジーを使用して、ウェブ機能の通常の制限を超えるタイプのウェブサイトです。 PWAには、オフラインブラウジング、インストールサポート、新しいWeb APIなど、さまざまな機能が含まれています。 これらの機能を組み合わせることにより、PWAはユーザーに全体的なブラウジング体験を改善し、独自のアイコンとアプリウィンドウを備えた他のアプリケーションと同じようにWebサイトを使用するオプションを提供します。

最適なPWAを作成するために必要なことはたくさんありますが、Gatsbyは、マニフェストファイルプラグイン(gatsby-plugin-manifest)およびオフラインプラグイン(gatsby-plugin-offline). このチュートリアルでは、これらのプラグインと Lighthouse などの監査ツールの使用方法を説明し、最後にGatsbyサイトを取得して完全に機能するプログレッシブWebアプリに変換する方法を学習します。

前提条件

始める前に、ここにあなたが必要とするいくつかのものがあります:

このチュートリアルは、Node v14.17.2、npm v6.14.13、Gatsby v3.9.0、 gatsby-plugin-offline v4.8.0、および gatsby-plugin-manifest v3.8.0。

ステップ1—コンテンツの準備(オプション)

前提条件として、構築および展開できる機能的なGatsbyサイトをすでに作成している必要があります。 ただし、サイトのコンテンツがまだない可能性があります。 このステップでは、サンプルのスマートホームユーザーガイドサイトを準備して、PWA機能がどのようなコンテンツにメリットをもたらすかを示します。

スマートホームのユーザーガイドは、同じユーザーが何度もアクセスする可能性が高いため、PWAの主な機能を紹介する良い例になります。 インストールサポートやホーム画面アイコンなど、アプリのようなPWAの品質により、モバイルデバイスとデスクトップデバイスの両方でアクセスできるようになります。オフラインサポートのおかげで、ホームネットワークに障害が発生した場合でも、あなたや他の居住者はガイドにアクセスできます。 。

スターターテンプレートを作成して、スマートホームガイドの新しいページを下に追加できます。 src/pages. 名前の付いたファイルを作成します src/pages/internet-issues.js、次のサンプルページコードを追加します。

src / pages / internet-issues.js
import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Seo title="Internet Issues" />
    <h1>Internet Issues - Troubleshooting</h1>
    <p>Having issues connecting to the internet? Here are some things to try in our house.</p>
    <ul>
      <li>Your Device
        <ul>
          <li>Is airplane mode on? Is WiFi enabled?</li>
          <li>Is the device within range of the router or physically connected to the network via ethernet?</li>
          <li>Are you connected to the correct network?</li>
        </ul>
      </li>

      <br />

      <li>The Router / Modem
        <ul>
          <li>Have you checked the ISPs status page to check for an outage? You can use your smartphone and mobile data to check this.</li>
          <li>Have you tried rebooting the router and/or modem?</li>
          <li>Have you checked to make sure that all physical connections to and from the router and modem are secure?</li>
        </ul>
      </li>
    </ul>

    <br/>

    <p>
      <Link to="/">Back to homepage</Link> <br />
    </p>
  </Layout>
)

export default IndexPage

このページコードでは、ハウスメイトやゲストがインターネットへの接続に問題がある場合のトラブルシューティング手順を示しています。 箇条書きでこれを行い、ナビゲーションを容易にするためにホームページに戻るリンクを提供します。 これはGatsbyプロジェクトであるため、ページ全体を Reactコンポーネントとして作成しました。これにより、リストが再利用可能な内部にネストされます。 Layout コンポーネントを作成し、ページを JSX として返すので、Gatsbyはそれを処理できます。 ナビゲーションエクスペリエンスを最適化するために、通常のHTMLの代わりに、リンクコンポーネントを使用してホームページにリンクしました。 a 鬼ごっこ。

更新後にファイルを保存してください。このチュートリアルではファイルを再度更新する必要がないため、先に進んでファイルを閉じることができます。

このページには、次のURLからアクセスできます。 your_domain/internet-issues/、ただし、ホームページからリンクを追加して、簡単にアクセスできるようにします。

開く src/pages/index.js、Reactコンポーネント内の新しいページへの直接リンクを追加します IndexPage、次の強調表示されたコードに示されているように:

src / pages / index.js
import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    ...

    <p>
      <Link to="/internet-issues/">Internet Issues Troubleshooting Page</Link> <br />
      <Link to="/page-2/">Go to page 2</Link> <br />
      ...
    </p>
  </Layout>
)

保存して閉じます index.js 追加されたリンク付き。

これで、スマートホームユーザーガイド用の新しいページが作成され、ホームページからそのページにアクセスするためのリンクが追加されました。 次のステップでは、マニフェストファイルと呼ばれる特別なファイルを追加します。このファイルは、PWAセットアップの詳細をWebブラウザーに指示します。

ステップ2—マニフェストファイルを追加する

次のステップは、マニフェストJSONファイルを追加することにより、PWAのコア要件の1つを満たすことです。 manifest.json. マニフェストファイルは、サイトに関する詳細と、サイトがユーザーのOSにインストールされている場合にユーザーに表示する方法をWebブラウザーに通知し、使用するアイコンや起動方法などの詳細を指定します。 gatsby-plugin-manifest を使用して、Gatsby構成ファイルでプラグインを初期化することにより、このファイルを生成します。

まず、Gatsbyプロジェクトディレクトリで次のコマンドを実行して、Gatsbyプラグインをインストールします。

  1. npm install gatsby-plugin-manifest

次に、プラグインに、PWAをどのように表示して動作させるかを示す詳細を提供します。 これを行うには、プロジェクトディレクトリのルートにあるメインのGatsby構成ファイルを編集します。 gatsby-config.js. このファイルを開き、次のコードを追加します。

gatsby-config.js
module.exports = {
  plugins: [
    ...

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `My Smart-Home Guide`,
        short_name: `SH Guide`,
        description: `Guide for residents of the ABC123 Smart Home`,
        start_url: `/`,
        background_color: `#0a68f0`,
        theme_color: `#0a68f0`,
        display: `standalone`,
        icon: `src/images/pwa-icon.png`,
        icons: [
          {
            src: `/favicons/pwa-icon-192x192.png`,
            sizes: `192x192`,
            type: `image/png`
          },
          {
            src: `/favicons/pwa-icon-512x512.png`,
            sizes: `512x512`,
            type: `image/png`
          }
        ]
      },
    }

    ...
  ]
}

注: gatsby-starter-default テンプレートの場合、設定ファイルにこのプラグインの値がすでに含まれています。 その場合は、既存の値をこのコードで上書きしてください。

このファイルには多くの値があるので、ここに簡単な説明があります:

変更内容とともに構成ファイルを保存してください。ただし、次のステップのために開いたままにしてください。次のステップでは、別のGatsbyプラグインを追加し、オフラインサポートを構成します。

マニフェスト値では、 icon だった src/images/pwa-icon.png、ただし、機能する前に、その場所に画像ファイルを配置する必要があります。 少なくともである正方形の画像ファイルがある場合 512 x 512 ピクセル、あなたはそれをそのパスにコピーすることができます。 それ以外の場合は、このチュートリアル用に選択したフォーマット済みの画像ファイルを使用できます。 チュートリアルアイコンファイルを使用するには、このチュートリアルのサンプルアイコンファイルをダウンロードして、次の場所に保存してください。 src/images/pwa-icon.png、またはコマンドラインが必要な場合は、プロジェクトのルートディレクトリからcURLを使用します。

  1. curl -o ./src/images/pwa-icon.png https://assets.digitalocean.com/articles/67869/1.png

これにより、画像がGatsbyアプリケーションの正しい部分にダウンロードされます。 これはあなたが必要とする唯一の画像ファイルです。 ギャツビーは自動的に生成します 192x192 バージョン。

これで、正しい値でマニフェストJSONファイルを提供するようにGatsbyプロジェクトを構成しました。これは、PWA機能を有効にするために必要な部分です。 次のステップでは、Service Workerプラグインを介して機能を追加することにより、PWAの別の要件であるオフラインサポートに対処します。 gatsby-plugin-offline.

ステップ3—サービスワーカーによるオフラインサポートの追加

PWAのもう1つの重要なコンポーネントは、オフラインサポートです。これは、サービスワーカーと呼ばれるWebテクノロジーを使用して実装します。 サービスワーカーは、基本的にJavaScriptコードのバンドルであり、現在のページのUIに関連付けられているすべてのコードとは別に実行されます。 この分離されたコードには、オフラインサポートを実装するために重要な、ネットワーク要求の動作を変更する機能などの特別な特権も付与されます。 このステップでは、Gatsby構成ファイルを介して構成されたgatsby-plugin-offlineプラグインを介して堅牢なサービスワーカーをセットアップします。

インストールすることから始めます gatsby-plugin-offline パッケージ化し、依存関係に追加します。 あなたはそうすることができます:

  1. npm install gatsby-plugin-offline

次に、Gatsbyconfigを介してプラグインをロードします。 gatsby-config.js 前のステップで編集:

gatsby-config.js
module.exports = {
  plugins: [
    ...

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
      },
    },
    `gatsby-plugin-offline`,

    ...
  ]
}

新しいプラグインを追加した後は、必ず構成ファイルを保存してください。

警告:gatsby-plugin-manifestドキュメントとgatsby-plugin-offlineドキュメントの両方で次のように指定されています gatsby-plugin-offline 常に後に来る必要があります gatsby-plugin-manifest このコードスニペットに示されているように、構成配列内。 これにより、マニフェストファイル自体を確実にキャッシュできます。

この時点で、オフラインサポートを追加し、アプリのマニフェストファイルを作成しました。 次に、このチュートリアルでは、PWAの3番目に必要な部分である安全なコンテキストについて説明します。

ステップ4—安全なコンテキストを提供する

PWAの3つの基本的な最小要件の最後は、セキュアコンテキストで実行されることです。 セキュアコンテキストは、認証とセキュリティに関して特定のベースライン基準が満たされているWeb環境を指し、ほとんどの場合、HTTPSを介して提供されるコンテンツを指します。

安全なコンテキストは、さまざまな方法で実現できます。 このため、このチュートリアルでは、安全なコンテキストを取得するためのいくつかの異なる戦略について説明し、次にGatsbyサイトをローカルでテストします。

DigitalOceanのAppPlatformなどの静的ホストを介してGatsbyプロジェクトをデプロイしている場合は、セットアップを必要とせずに、HTTPSがすぐにサポートされる可能性があります。 App Platformにアプリをデプロイする方法の詳細については、GatsbyアプリケーションをDigitalOceanAppPlatformにデプロイする方法のチュートリアルを参照してください。

HTTPSを自動的に提供しないサーバーにデプロイしているが、SSHアクセスがある場合は、 Let’s Encrypt を使用して、無料のTLS/SSL証明書を取得してインストールできます。 たとえば、Ubuntu 20.04でApacheを使用している場合は、 Ubuntu 20.04でLet’sEncryptを使用してApacheを保護する方法に従って、Certbotを使用してこのプロセスを処理できます。 共有ホストに展開する場合は、SSL証明書のインストールが利用可能かどうか、またどのように利用できるかについて、特定のドキュメントページを確認する必要があります。

ローカルテストの場合、SSL証明書の取得やインストールを行う必要はありません。 これは、ほとんどの最新のブラウザが処理するためです localhost TLS / SSL証明書またはHTTPSプロトコルがインストールされていない場合でも、安全なコンテキストとしてのサイト。

これで、3つのベースライン基準を満たすことにより、GatsbyプロジェクトにPWAサポートが正常に追加されました。 localhost セキュアコンテキスト)、マニフェストファイル、およびサービスワーカー。 次のステップは、PWA機能を有効にして、正しく表示されることをテストおよび確認することです。

ステップ5—ローカルテストの実行

このステップでは、いくつかのローカルテストを実行して、PWA機能が正しく機能していることを確認します。 これは、より包括的な監査のためにLighthouseツールを使用する前の最初のテストステップです。

Gatsbyサイトの機能をPWAとしてローカルでテストするには、サイトをビルドしてから、生成されたビルドディレクトリを提供します。

  1. npm run build
  2. npm run serve

準備が整うと、次のように表示されます。

Output
You can now view gatsby-starter-default in the browser. ⠀ http://localhost:9000/

これで、WebブラウザーでそのURLにアクセスできます。ブラウザーがPWAをサポートしている場合は、いくつかの特別な追加のUI要素が表示されます。 たとえば、 Chrome デスクトップでは、アドレスバーに新しいボタンが表示され、クリックすると、Gatsbyサイトをappとしてインストールするかどうかを尋ねられます。次の画像に示されています。

スマートフォンでローカルにサイトをテストする場合は、 Chromeのリモートデバッグツール(Androidのみ)、または localhost ngrokなどのトンネリングサービス。 モバイルでは、次のように、サイトをアプリとしてインストールするのと同じオプションが表示されます。

このPWAプロンプトは、デバイス、オペレーティングシステム、およびブラウザごとに異なります。 さらに、ホーム画面に追加などの特定の機能は、特定のデバイスでのみ使用できる場合があります。 特定のデバイスで実行されている特定のブラウザは、PWAを完全にサポートしていない場合があります。 プラットフォームサポートの詳細については、caniuse.comを確認してください。

これで、Gatsbyプロジェクトをローカルでビルドして提供できることを確認しました。ブラウザは、プロジェクトがPWA機能を提供していることを正常に検出します。 次のステップは、まとめたものに対する最終チェックであり、Lighthouseツールを使用して改善の余地があるかどうかをチェックします。

ステップ6—灯台で監査を実行する

この時点で、PWAのすべてのコア要件を満たすGatsbyサイトができました。このサイトには、HTTPS、マニフェスト、およびオフラインサポート用のサービスワーカーがあります。 ただし、PWAの概念は、単一の要件を超えています。つまり、連携して機能するすべての側面に加えて、一般的なガイドラインを順守することを含みます。 これを念頭に置いて、最後のステップは、監査ツールを使用して、ベースライン基準を満たしていることを確認し、PWAのベストプラクティスを満たすためにGatsbyプロジェクトをさらに最適化する方法に関する情報を収集することです。

サイトをPWAとして監査する方法はいくつかありますが、現時点でのゴールドスタンダードは LighthouseToolです。 デスクトップChromeがインストールされている場合は、WebブラウザDevToolsでサイトに対して直接監査を実行できます。

まず、ChromeでGatsbyサイトに移動し、ウェブページの任意の場所を右クリックして、右クリックメニューで検査を選択してChromeDevToolsを開きます。 次に、DevToolsの下のLighthouseタブをクリックします。 表示されない場合は、右端のタブの横にある >> ラベルをクリックして、サイズの制約により非表示になっているタブを表示します。

ここで、実際にレポートを実行するには、プログレッシブウェブアプリを除く[灯台]タブのすべてのチェックを外し、レポートの生成をクリックしてサイトを分析します。

Lighthouse Node.js CLI を使用して、このレポートをプログラムで生成することもできます。 このコマンドは、PWAのみの監査を実行してから、レポートを開いて表示します。

  1. npx lighthouse http://localhost:9000 --only-categories=pwa --view

ただし、CLIを介してLighthouseを使用しても、Chromeをインストールする必要はありません。 これにより、プロセスの自動化が容易になります。

Lighthouseによって生成されたレポートは、カテゴリに分類されたいくつかのことを示しています。 最も重要なもののいくつかは次のとおりです。

Lighthouseツールを使用してGatsbyPWAを監査することにより、機能的なPWAが得られるだけでなく、PWAの要件とベストプラクティスをどのように満たすかについても理解できます。

結論

これらの手順を実行すると、強力なオフラインサポートを備えた、最新のインストール可能なプログレッシブWebアプリとしても機能できるGatsbyサイトができあがります。 これで、ユーザーに両方の長所を提供できます。ユーザーはサイトを通常のWebページとして閲覧できますが、独自のランチャーアイコン、表示ウィンドウ、信頼性の高いパフォーマンスを備えたネイティブアプリケーションと同じように使用することもできます。彼らはネイティブアプリケーションに期待しています。

Lighthouse PWA監査に加えて、可能な限り最適化されたPWAエクスペリエンスを提供するためのより多くの方法を探している場合、Googleは役立つPWAチェックリストも公開しています。 Gatsbyの詳細については、Gatsby.jsシリーズを使用して静的Webサイトを作成する方法の残りの部分を確認してください。

モバイルバージョンを終了