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

序章

Gatsby は、ソース素材をすぐに展開できる静的HTMLファイルに変換するための一般的なフレームワークです。 このため、静的サイトジェネレーター(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つを満たすことです。 マニフェストファイルは、Webブラウザーにサイトに関する詳細と、サイトがユーザーのOSにインストールされている場合にユーザーに表示する方法を示し、使用するアイコンや起動方法などの詳細を指定します。 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テンプレートを使用して開始した場合は、構成ファイルにこのプラグインの値がすでに含まれています。 その場合は、既存の値をこのコードで上書きしてください。

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

  • nameshort_nameは、サイトの名前と、インストール時にサイトをユーザーに表示する方法に対応している必要があります。 short_nameは、ユーザーのデバイスのホーム画面など、スペースが限られている場所に表示され、nameはその他の場所に表示されます。
  • descriptionは、アプリケーションの目的を説明するテキストである必要があります。
  • start_urlは、ユーザーがランチャーからPWAを起動したときに開くページをブラウザーに提案するために使用されます。 ここで使用されている/の値は、PWAを開いたときにユーザーがホームページにアクセスするようにブラウザーに指示します。
  • background_colortheme_colorはどちらも、PWAのスタイル設定に関するブラウザーへのディレクティブであり、値はCSSカラー文字列に対応している必要があります。 background_colorは、実際のスタイルシートが読み込まれるのを待っている間のみ、プレースホルダーの背景色として使用されますが、theme_colorは、[X215Xのアイコンを囲むなど、PWA外の複数の場所で使用される可能性があります]Android