WebサイトをPWA(プログレッシブウェブアプリ)にする手順とその必要性

ここ数年、PWA(プログレッシブウェブアプリ)が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。

WebサイトをPWAにする手順とその必要性を紹介します。

サイトのキャプチャ

Turn Your Website into a PWA
by Luca Spezzano

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

PWA(プログレッシブウェブアプリ)とは

プログレッシブウェブアプリ(Progressive Web Apps)とは、Googleも推奨する通常のWebページとモバイルアプリのハイブリッドです。PWAは最新のブラウザが提供する機能とスマホのエクスペリエンスの利点を兼ね備えており、HTML, CSS, JavaScriptなどの標準的なWebテクノロジーで構築されています。

機能としては、オフライン作業、プッシュ通知、デバイスのハードウェアアクセスなど、ネイティブアプリと同等のユーザーエクスペリエンスを可能にします。スマホアプリとまったく同じように、スマホのホームに追加することもできます。

なぜPWAを構築する必要があるのですか?

数週間前に私がPWAに関する詳細情報を探した時に、pwastats.comというとても素敵なサイトを見つけました。このサイトにはPWAを利用している有名企業のデータがあり、どのようにしてサイトのパフォーマンスを改善したのかがよく分かります。

プログレッシブウェブアプリを使用すると、ロード時間を短縮され、ユーザーがオフラインでナビゲートできるようにし、サイトで費やす時間を増やしたり、収益を増やしたり、スマホアプリよりもはるかに多くのことができます。

すでにPWAを採用しているのはどこですか?

PWAを採用している企業

Uber, Instagram, Twitter, Pinterest, Forbes, Alibaba

Twitter、Instagram、Uber、Pinterest、Forbes、Alibabaなど、世界の多くの企業でプログレッシブウェブアプリが採用されています。

PWAを作成する時に必要なもの

プログレッシブウェブアプリを作成するには、最初にレスポンシブ対応のWebサイトを作成する必要があります。その後に、Web App ManifestとService Workerの2つが必要です。これらがどのようなものか見てましょう。

Web App Manifest

Web App ManifestはシンプルなJSONファイル「manifest.json」で、ブラウザにWebアプリとユーザーの動作を伝えます。
プロパティは下記の通りです。

  • name: アプリのインストールプロンプトで使用される名前。
  • short_name: ユーザーのホーム画面、ランチャー、スペースが限られている他の場所で使用される名前。
  • start_url: 起動時にアプリを開始する場所をブラウザに指示します。
  • display: アプリの起動時に表示されるブラウザUIをカスタマイズできます。最も使用される値はstandaloneです。Webアプリを開き、スタンドアロンのネイティブアプリのように表示します。
  • background_color: アプリの起動時にスプラッシュ画面で使用されます。
  • theme_color: ツールバーの色を設定します。
  • orientation: 特定の方向を強制することができます。
  • scope: 私は通常このプロパティを使用しませんが、ブラウザがアプリ内にあると見なすURLのセットを定義し、ユーザーがアプリを離れたタイミングを決定するためによく使用されます。
  • icons: ユーザーがホーム画面にサイトを追加するときに、ブラウザが使用する一連の画像を定義できます。

Service Worker

これは基本的に、メインブラウザスレッドとは別に実行されるJavaScriptファイルで、Service Workerを使用して実行できます。

  • ネットワーク リクエストの傍受する。
  • キャッシュからリソースをキャッシュ・取得する。
  • プッシュメッセージを配信する。

Service Workerのライフサイクル

  • Registration: Service Workerの場所をブラウザに通知し、バックグラウンドでのインストールを開始する。
  • Installation: Service Workerのインストール時にいくつかのタスクを実行できるインストールイベントをトリガーする。
  • Activation: Service Workerによって制御されて開いているページがある場合、新しいService Workerは待機状態になります。新しいService Workerは、古いService Workerを使用しているページがロードされなくなった時にのみアクティブになり、一部のタスクの実行にも使用できます。

PWAを5分で構築しよう

では、プログレッシブウェブアプリを実装してみましょう。

実装の前にまずは、Lighthouseをインストールすることをお勧めします。

LighthouseはWebページの品質を向上させるためのツールで、下記のようなレポートを取得できます。

Lighthouseのレポート

Lighthouseのレポート

このレポートからは、Webサイトやアプリのパフォーマンス、アクセシビリティ、ベストプラクティス、SEOおよびPWAを改善するために必要な問題を確認できます。

ファイル構造は、下記の通りです。

ファイル構造

ファイル構造

Githubに完全なコードがあります。ブランチを切り替えて、動的キャッシュまたは静的キャッシュを表示できます。

index.htmlで、manifest.jsonを呼び出します。

ただし、app.jsファイル(Service Workerを登録する場所)とPWAを最適化するために必要なメタタグも記述する必要があります。

メインのタグはこれで終了です、もちろんさらに多くのタグがあり、異なるパスを使用することもできます。

静的キャッシュ

はじめに、静的キャッシュから実装します。キャッシュにするリソース、画像やCSSやJavaScriptなどすべてを正確に手動で指定します。

この方法は特に、Webサイトのすべてのリソースをダウンロードし、ページの最初のランディング時にそれらのファイルをキャッシュする場合に便利です。

manifest.jsonに記述します。

ブラウザがService Workerを許可しているかどうかを確認し、許可している場合はService Workerをapp.jsに登録します。

次に、sw.jsにService Workerを記述します。

キャッシュに入れるすべてのリソースを配列に格納します。

Installイベント

キャッシュにすべての静的アセットを追加し、Chromeのコンソールで確認します。

キャッシュされているリソース

キャッシュされているリソース

Activateイベント

キャッシュの名前を変更すると、複数のキャッシュが格納され、問題が発生する可能性があります。それを避けるために、古いものを削除する必要があります。この関数では、キー(キャッシュ名)をチェックし、同じキーが前のキーと異なる場合は、前のキーを削除します。これを行うと、常に最後のキャッシュのみが存在します。

Fetchイベント

ここでは、すでにキャッシュが存在するかどうかを確認します。キャッシュが存在する場合はリソースをダウンロードしませんが、キャッシュからリソースを取得してコンソールで再度確認できます。

Networkパネル

Networkパネル

Service Workerファイルを変更する時は、キャッシュの名前を変更する必要があります。これによりService Workerを更新し、新しいキャッシュを作成できます。

動的キャッシュ

動的キャッシュはナビゲーション中にすべてのFetchリクエストを自動的にキャッシュするため、非常に強力です。ただし、このキャッシュはAPIで呼び出しがある時に使用すると、新しいデータが変更されても反映されないため、慎重に使用する必要があります。

動的キャッシュを使用するには、sw.jsファイルを変更する必要があります。

Activateイベント

ここでは、静的キャッシュと同じことをします。

Fetchイベント

Fetchイベントでは、すべてのFetchリクエストを自動的にキャッシュに入れます。

キャッシュとLighthouseの実行後に両方を試すと、Webサイトがプログレッシブウェブアプリであることが分かります。

PWA Lighthouse

PWA Lighthouse

静的キャッシュと動的キャッシュのコードは下記からダウンロードできます。

静的と動的のどちらを使用すべきですか?

その答えは、ニーズとプロジェクトによって異なります。API呼び出しがない場合は動的キャッシュを使用します。逆にAPI呼び出しがある場合は静的キャッシュに保存するリソースを自分で選択できます。

Googleによるプログレッシブウェブアプリの詳細については、下記をご覧ください。

sponsors

top of page

©2020 coliss