プログレッシブウェブアプリのチュートリアル：最初のPWAを作成する

公開: 2020-06-23

Google自身が作成し、現在Windows 10などの人気のあるプラットフォームにプッシュされているPWAは、プッシュ通知、魅力的なアプリインターフェース、オフライン機能、アプリのインストールなど、以前はネイティブアプリケーションに限定されていた多くのことを実行できます。。

そしてこれが、PWAの出現が一時的なものではなくなった理由です。これは、私たちが知っているように、Webを根本的に変える可能性のある本格的な大規模な動きになっているためです。 PWAを構築するプロセスが以前よりもはるかに簡素化され、あなたのような興味のある素人に適しているため、初心者にとっては、この新しいテクノロジーを知るのに遅すぎることはありません。

最高の学習目的のために、今日はReact、Node.js、Firebaseを使用して完全に機能するPWAを作成します。

前提条件

Node.jsバージョン>=8.10
npmバージョン>=5.6

注： Node.jsのインストールには常に最新バージョンのnpmパッケージマネージャーが付属しているため、 npmバージョンは実際には問題にはなりません。

`create-react-app`します

まず、作業するための確かなものが必要ですcreate-react-appは、この目的に最適なツールです。

 npx create-react-app my-PWA
cd my-pwa
npm start

上記のコマンドは、Reactベースの学習環境を作成するのに役立ちます。

HTTPS経由で提供する

HTTPSはWebの新しい標準であり、PWAの登場により、HTTPSはますます主流になりつつあります。通常、PWAはHTTPS経由で提供する必要があります。これは、サービスワーカー自身がPWAなしでは機能できないためです。しかし、ローカルホスト環境で作業しているので、それは必要ありません。

2.オフラインで動作させる

デフォルトでは、 create-react-appサービスワーカーは、ユーザーが接続していないとき、またはその後のアクセス時に、オフラインキャッシュとコンテンツの読み込みを処理するように事前構成する必要があります。

Service Workerは、簡単に言えば、ページとは別のスレッドで実行されるJavaScriptスクリプトであり、このため、DOM構造にアクセスすることはできません。この新しいアプローチにより、サービスワーカーは、PWAのすべての一般的な機能（オフライン機能、プッシュ通知など）を処理するだけでなく、重い計算を軽減する上でも大きな役割を果たすため、より進歩的でパフォーマンスを向上させる機能が生まれます。別のスレッドであなたのウェブサイトの。

PWAに/src/index.jsをインストールするには、/ src/index.jsを確認する必要があります。

index.jsで、この行を探します

 serviceWorker.unregister（）

unregister()をregister() ）に変更すると、 my-pwaを本番モードで実行すると、サービスワーカーが自動的に登録されます。サービスワーカーを開発モードで有効にすることはお勧めしません。PWAがキャッシュされたアセットのみをロードし、最新のローカル変更を含まない場合が発生する可能性があるためです。

my-pwaを本番モードで実行するには：

 npm run build
npxサーブビルド

この後、Chromeを開いてlocalhost:5000に移動し、それを検査すると、[アプリケーション]タブでServiceWorkerが正しく実行されていることがわかります。

また、[キャッシュストレージ]カテゴリの下には、サイトのオフラインコンテンツが適切にキャッシュされているかどうかを確認する場所があります。

注：サービスワーカーを非本番モードで登録するための回避策があります。これは、 src/serviceWorker.jsからprocess.env.NODE_ENV === 'production'という行を削除することで実現されます。

これをさらに掘り下げて、Reactの事前構成された構成に依存せずに、独自のサービスワーカーを最初から作成したい場合は、私たちが用意しています。このチュートリアルでは、単純なWebアプリからオフラインファーストのプログレッシブWebアプリを作成する方法を示します。

3.ホーム画面に追加を設定します

これまでのところすべてが適切に行われている場合は、 my-pwaの本番ビルドを起動するときに小さなインストールアイコン（+）が表示されます。

SimiCartのMagentoPWAを使用して複数のデバイスにPWAをインストールする

すべてが自動的に行われるので、これがどのようにして可能になったのか疑問に思われるかもしれません。心配しないでください、それが私たちがここにいる理由です。

PWA A2HS（ホーム画面に追加）を使用できるようにするには、 manifest.jsonが必要です。 create-react-appに付属のmanifest.jsonは、アプリのアイコンがユーザーにどのように表示されるかを決定し、スプラッシュ画面の外観を定義する非常に基本的なJSONファイルです。これらをカスタマイズするには、 /public/manifest.jsonにある既存のファイルを変更します。

 {{
  "short_name"： "私の最初のPWA"、
  "名前"： "簡単なPWAを作成する"、
  「アイコン」：[
    {{
      "src"： "favicon.ico"、
      "サイズ"： "64x64 32x32 24x24 16x16"、
      "タイプ"："画像/x-アイコン"
    }、
    {{
      "src"： "logo192.png"、
      "タイプ"： "image / png"、
      「サイズ」：「192x192」
    }、
    {{
      "src"： "logo512.png"、
      "タイプ"： "image / png"、
      「サイズ」：「512x512」
    }
  ]、
  "start_url"： "。"、
  「ディスプレイ」：「スタンドアロン」、
  "theme_color"： "＃000000"、
  "background_color"： "#ffffff"
}

ここにあるもののほとんどはほとんど自明ですが、 manifest.jsonとPWAのインストールにつながるイベントをさらに掘り下げたい場合は、これについての記事を書きました。それをチェックすることを忘れないでください。

注： manifest.jsonを機能させるには、 index.htmlに含める必要があります。デフォルトでは、 create-react-appはすでにこれを行っているはずです。

 <link rel = "manifest" href = "％PUBLIC_URL％/manifest.json" />

PWAをServiceWorkerと適切なmanifest.jsonに登録すると、ユーザーがアプリを起動するとbeforeinstallpromtが起動され、ユーザーのホーム画面にPWAをインストールする許可を求められます。

ただし、A2HS（ホーム画面に追加）プロセスのほんの一部にすぎず、学ぶべきことがまだたくさんあることに注意してください。何でも学ぶことができる最善の方法は、ゼロから構築することです。そのため、PWAのこの特定の機能に関する簡単なガイドを用意しました。このガイドでは、PWAのインストールイベントのいくつかの重要な部分について説明します。

あるいは、怠惰でやる気がない場合は、私たちもあなたを可能にするためにここにいます。マニフェストジェネレータは、このプロセス全体を自動化するように作られています。

4.プッシュ通知を設定します

ブラウザは、プッシュ通知のサポートにおいて長い道のりを歩んできました。最近、Chromeは機内モードで通知を表示できるようにする通知トリガーも導入しました。これは、プッシュ通知にとって大きな前進です。

Chrome通知トリガー — *Chrome 80の新機能である**通知トリガー**により、機内モードでも通知が有効になります*

そして今では、このチュートリアルでFirebaseを使用している部分はどこにあるのか疑問に思われるはずです。さて、これです。このパートでは、Firebaseを使用してプッシュ通知をPWAに統合するプロセス、特にHTTPSリクエストを使用してメッセージを送信できるクラウドメッセージング機能について学習します。

ただし、プロセス全体が少し長いため、また全体をより適切に追跡できるように、独自のプッシュ通知統合チュートリアルを用意しています。このチュートリアルでは、ユーザートークンまたはユーザーグループにプッシュ通知を送信しようとしても、問題が発生することはありません。

結論

これで完全なPWAは終わりです。チュートリアルのいずれかの部分で行き詰まったと感じた場合は、遠慮なく質問を投稿してください。できる限り回答します。

続きを読む：
PWAをMagento2に統合する方法