序章
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-manifest
v3.8.0。
ステップ1—コンテンツの準備(オプション)
前提条件として、構築および展開できる機能的なGatsbyサイトをすでに作成している必要があります。 ただし、サイトのコンテンツがまだない可能性があります。 このステップでは、サンプルのスマートホームユーザーガイドサイトを準備して、PWA機能がどのようなコンテンツにメリットをもたらすかを示します。
スマートホームのユーザーガイドは、同じユーザーが何度もアクセスする可能性が高いため、PWAの主な機能を紹介する良い例になります。 インストールサポートやホーム画面アイコンなど、アプリのようなPWAの品質により、モバイルデバイスとデスクトップデバイスの両方でアクセスできるようになります。オフラインサポートのおかげで、ホームネットワークに障害が発生した場合でも、あなたや他の居住者はガイドにアクセスできます。 。
スターターテンプレートを作成して、スマートホームガイドの新しいページを下に追加できます。 src/pages
. 名前の付いたファイルを作成します 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
、次の強調表示されたコードに示されているように:
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プラグインをインストールします。
- npm install gatsby-plugin-manifest
次に、プラグインに、PWAをどのように表示して動作させるかを示す詳細を提供します。 これを行うには、プロジェクトディレクトリのルートにあるメインのGatsby構成ファイルを編集します。 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
Android ホーム画面のアイコンを囲むなど、PWA以外の複数の場所で使用される可能性があります。display
は特別な値です。これは、サイト全体がPWAとしてどのように機能するかを示し、何百もの異なる組み合わせをサポートする他のフィールドとは異なり、4つの可能な値のいずれかになります。fullscreen
,standalone
,minimal-ui
、 またbrowser
. 構成では、standalone
PWAを標準のWebブラウザの外部でスタンドアロンアプリケーションのように動作させます。 実際には、これはネイティブアプリケーションと同様に機能することを意味します。つまり、独自のランチャーアイコン、アプリケーションウィンドウを取得し、URLアドレスバーは非表示になります。icon
は標準のマニフェストフィールドの1つではありませんが、gatsby-plugin-manifest
. このプロパティを使用し、最小要件(少なくとも512x512
ピクセル、正方形)、Gatsbyプラグインは、画像をサイトファビコンに自動的に変換し、必要なアイコンマニフェストプロパティとしてマニフェストに挿入します。 指定することによりicons
ファイル名、サイズ、画像タイプの配列を使用して、マニフェストプラグインのハイブリッドモード構成を呼び出します。 これにより、単一のソースアイコンファイルが取得され、指定されたファイル名とサイズに変換されます。 これは厳密には必要ではありませんが、デフォルトでは機能しないApacheなどの環境でのデプロイメントで発生する可能性のある問題を回避します。/icons
ディレクトリ。
変更内容とともに構成ファイルを保存してください。ただし、次のステップのために開いたままにしてください。次のステップでは、別の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アプリケーションの正しい部分にダウンロードされます。 これはあなたが必要とする唯一の画像ファイルです。 ギャツビーは自動的に生成します 192x192
バージョン。
これで、正しい値でマニフェストJSONファイルを提供するようにGatsbyプロジェクトを構成しました。これは、PWA機能を有効にするために必要な部分です。 次のステップでは、Service Workerプラグインを介して機能を追加することにより、PWAの別の要件であるオフラインサポートに対処します。 gatsby-plugin-offline
.
ステップ3—サービスワーカーによるオフラインサポートの追加
PWAのもう1つの重要なコンポーネントは、オフラインサポートです。これは、サービスワーカーと呼ばれるWebテクノロジーを使用して実装します。 サービスワーカーは、基本的にJavaScriptコードのバンドルであり、現在のページのUIに関連付けられているすべてのコードとは別に実行されます。 この分離されたコードには、オフラインサポートを実装するために重要な、ネットワーク要求の動作を変更する機能などの特別な特権も付与されます。 このステップでは、Gatsby構成ファイルを介して構成されたgatsby-plugin-offlineプラグインを介して堅牢なサービスワーカーをセットアップします。
インストールすることから始めます gatsby-plugin-offline
パッケージ化し、依存関係に追加します。 あなたはそうすることができます:
- npm install gatsby-plugin-offline
次に、Gatsbyconfigを介してプラグインをロードします。 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としてローカルでテストするには、サイトをビルドしてから、生成されたビルドディレクトリを提供します。
- 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のみ)、または 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のみの監査を実行してから、レポートを開いて表示します。
- 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サイトを作成する方法の残りの部分を確認してください。