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

提供：Dev Guides
移動先:案内、検索

著者は、 Write for DOnations プログラムの一環として、 InternetArchiveを選択して寄付を受け取りました。

序章

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アプリに変換する方法を学習します。

前提条件

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

  • Gatsbyを実行してサイトを構築するためのNode.jsのローカルインストール。 インストール手順はオペレーティングシステムによって異なりますが、DigitalOceanには Ubuntu20.04およびmacOSのガイドがあり、最新リリースは公式NodeJSダウンロードページでいつでも見つけることができます。 。
  • Gatsbyで作業するためのJavaScriptにある程度精通している。 JavaScript言語は広大なトピックですが、出発点としては、JavaScriptでコーディングする方法シリーズが適しています。
  • PWAをまだサポートしていないが、それ以外は機能している既存のGatsbyプロジェクト。 この要件を満たし、新しいGatsbyプロジェクトを最初から構築するには、最初のGatsbyWebサイトのセットアップ方法チュートリアルのステップ1を参照してください。
  • （オプション）Webサイトのアイコンファイル。 インストール可能にするには、PWAに少なくとも512 x 512ピクセルの元の解像度のアイコンが必要です。 アイコンを気にしない場合は、このチュートリアルでステップ2でサンプルアイコンをダウンロードするように指示されます。

このチュートリアルは、Node v14.17.2、npm v6.14.13、Gatsby v3.9.0、gatsby-plugin-offline v4.8.0、およびgatsby-plugin-manifestv3.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[として返されます。 X188X]ギャツビーがそれを処理できるようにします。 ナビゲーションエクスペリエンスを最適化するために、通常のHTML aタグの代わりに、リンクコンポーネントを使用してホームページにリンクしました。

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

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

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

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テンプレートを使用して開始した場合は、構成ファイルにこのプラグインの値が既に含まれています。 その場合は、既存の値をこのコードで上書きしてください。


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

  • nameとshort_nameは、サイトの名前と、インストール時にサイトをユーザーに表示する方法に対応している必要があります。 short_nameは、ユーザーのデバイスのホーム画面など、スペースが限られている場所に表示され、nameはその他の場所に表示されます。
  • descriptionは、アプリケーションの目的を説明するテキストである必要があります。
  • start_urlは、ユーザーがランチャーからPWAを起動したときに開くページをブラウザーに提案するために使用されます。 ここで使用されている/の値は、PWAを開いたときにユーザーがホームページにアクセスするようにブラウザーに指示します。
  • background_colorとtheme_colorはどちらも、PWAのスタイル設定に関するブラウザーへのディレクティブであり、値はCSSカラー文字列に対応している必要があります。 background_colorは、実際のスタイルシートが読み込まれるのを待っている間のみ、プレースホルダーの背景色として使用されますが、theme_colorは、[X215Xのアイコンを囲むなど、PWA外の複数の場所で使用される可能性があります]Androidホーム画面。
  • displayは特別な値です。これは、サイト全体がPWAとしてどのように機能するかを示し、何百もの異なる組み合わせをサポートする他のフィールドとは異なり、4つの可能な値の1つになる可能性があるためです。 ：fullscreen、standalone、minimal-ui、またはbrowser。 構成では、standaloneの値により、PWAは標準のWebブラウザーの外部でスタンドアロンアプリケーションのように動作します。 実際には、これはネイティブアプリケーションと同様に機能することを意味します。つまり、独自のランチャーアイコン、アプリケーションウィンドウを取得し、URLアドレスバーは非表示になります。
  • iconは、標準のマニフェストフィールドの1つではありませんが、gatsby-plugin-manifestのコンテキスト内の特別なフィールドです。 このプロパティを使用し、最小要件（少なくとも512x512ピクセル、正方形）を満たすファイルへのパスを提供することにより、Gatsbyプラグインは画像をサイトファビコンに自動的に変換します。また、必要なアイコンマニフェストプロパティとしてマニフェストに挿入します。 ファイル名、サイズ、画像タイプの配列でiconsを指定すると、マニフェストプラグインのハイブリッドモード構成が呼び出されます。 これにより、単一のソースアイコンファイルが取得され、指定されたファイル名とサイズに変換されます。 これは厳密には必要ありませんが、デフォルトの/iconsディレクトリでは機能しないApacheなどの環境での展開で発生する可能性のある問題を回避します。

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

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

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

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

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

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

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

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

npm install gatsby-plugin-offline

次に、前の手順で編集したのと同じgatsby-config.jsであるGatsby構成を介してプラグインをロードします。

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証明書の取得やインストールを行う必要はありません。 これは、ほとんどの最新のブラウザが、TLS / SSL証明書またはHTTPSプロトコルがインストールされていなくても、localhostサイトを安全なコンテキストとして扱うためです。

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

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

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

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

npm run build
npm run serve

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

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

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

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

この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のみの監査を実行してから、レポートを開いて表示します。 

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

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

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

  • インストール可能：これは最も重要なカテゴリであり、サイトがインストール可能PWAであるための3つのベースライン基準（HTTPS、マニフェストファイル、およびサービスワーカー）を満たしているかどうかに対応します。
  • PWA最適化：これらは最適なPWAユーザーエクスペリエンスのために実行する必要があることですが、PWAが機能するために厳密に必要なわけではありません。 これらをベストプラクティスの提案と考えてください。 これらの例としては、モバイルアプリの読み込み中に表示するカスタムスプラッシュ画面の作成、アドレスバーのテーマの色の設定、JavaScriptが利用できない場合のフォールバックコンテンツの提供などがあります。 完全なリストを確認したい場合は、Lighthouseの公式ドキュメントを確認してください。

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

結論

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

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

「https://www.finddevguides.com/index.php?title=GatsbyサイトをプログレッシブWebアプリに変換する方法&oldid=107082」から取得
Powered by MediaWiki