Magento 2のProgressive Web AppsまたはPWAとは何ですか？

• MagentoがプログレッシブWebアプリケーションプラットフォームになりつつあるとはどういう意味ですか？
• MagentoのPWAのコード構造はどうなりますか？
• REST APIとPWAの扱いは何ですか？

プログレッシブWebアプリとは何ですか？

• 見た目も動作もモバイルアプリのようです。
• テイク利点のネイティブモバイル、デバイスの機能を必要とせずに 、アプリケーションストアを訪問するエンドユーザに購入を作り、ダウンロードし、それを ローカルに。

なぜPWAなのか？

• 速い
• セキュア（回答の最後から2番目のトピック）
• レスポンシブ
• クロスブラウザ対応
• オフラインモード（回答の最後のトピックを確認してください）
• モバイル「インストール」
• 共有可能なコンテンツ

この回答には、PWAを使用したMagento 2.3のインストールも含まれています。

フリップカートの例を見てみましょう

インド最大のeコマースサイトであるFlipkartは、Webプレゼンスとネイティブアプリを、進歩的なWebアプリケーションに統合することで、コンバージョンを70％増加させることにしました

フリップカート

アプローチ

1. プログレッシブWebアプリFlipkart Liteを開発
2. ロード時間を短縮するためのサービスワーカーを追加
3. 60フレーム/秒でのスムーズなナビゲーションとスクロール
4. ユーザーがモバイルWebページをホーム画面に追加するように促す「ホーム画面に追加」プロンプトを作成しました

   ---

結果

新しいプログレッシブWebアプリは、Flipkartがコンバージョンを70％高めるのに役立ちます

Flipkartはオフラインモードでも動作します

• Service Workerは、すべてのネットワーク要求をインターセプトし、ユーザーがオフラインの場合でもキャッシュからの応答を提供するようにスクリプト化できます。
• ライブラリラッパーサービス労働者のような単純なパターンを使用可能NetworkFirst、CacheFirstまたはNetworkOnly。 Flipkartアプリで使用されるキャッシュをSW-Toolbox提供して、ブラウズページと前回訪問した製品ページでの以前の検索結果を保存します。LRU
• ツールボックスには、古いコンテンツをパージするために使用するTTL-based キャッシュ無効化メカニズムもあります。Service Workerは、これを可能にする低レベルのスクリプト可能なプリミティブを提供します。

しかし...しかし...しかし...

Magento PWA Studioとは何ですか？

• • Magento PWA Studioプロジェクトは、Magento 2上でのPWAストアフロントの開発、展開、およびメンテナンスを可能にする開発者ツールのセットです。

Magento PWA Studioプロジェクトは、次のツールを提供します。

---

pwa-module

• ヘルパー、サーバー側機能などのモジュールがあり、Magento PWA Studioを使用して作成されたすべてのテーマの基盤として機能します。

PWA-buildpack -

• Buildpackは、WebpackMagento PWAテーマの開発に使用されるプラグインとツールのセットです。

• また、Magento 2プラットフォームのローカル開発環境のセットアップと構成にも使用されます。

次のツールが含まれています。

• PWADevServer
• Magentoレゾルバ
• Magentoルートコンポーネントプラグイン
• magento-layout-loader
• Service Workerプラグイン

ペレグリン -ペレグリンの集合であるReact componentsようなMagentoの固有の機能性処理するために作成したrouting、root-componentsなどのレイアウトハンドラ、製品リスト、価格の表示は、

Veniaテーマ -venia-conceptMagentoのPWAのスタジオを使用してMagentoのによって作成されたデモのテーマです。現在利用可能なすべての機能、ワークフロー、ページを紹介します

PWA Studioは

• Magentoの新しいリリース

• 交換用のすべてのフロントエンドの

• デスクトップアプリケーション

PWA Studioで使用されるツールとライブラリ

Webpack

• Webpackの主な機能は、プロジェクトのモジュールの依存関係から1つ以上のバンドルを作成することです。

App Shell

• 合計サイズが小さい
• 初期ロード要求三つのファイル：login.html、shell-1234.js、3456.js
• 初期ロードはロードする必要があります： Shell + Router + content
• シェルは、Page Shellアプローチよりも早く表示されます。

ページシェル

• 合計サイズが大きい（つまり、ダッシュボードのコンテンツはdashboard-1234.jsおよび4567.jsにあります）

• アプリをオフラインで使用するには時間がかかります。

• 初期ロードは、2つのファイルのみを要求します：login.html、login-2345.js

• 初期ロードはロードする必要があります： Shell + content

• shell + contentアプリのシェル・アプローチと比べて目に見える前です。

シェルとコンテンツが2つのリクエストに分離されているハイブリッドアプローチを使用できます（例として管理者ページを参照）。これは、コンテンツがシェルよりもはるかに大きく、シェルが以前に表示される必要がある場合に意味があります。

ReactJs

• ユーザーインターフェイスを構築するためのJavaScriptライブラリ。

Redux

• Webアプリケーションの状態を管理するために使用されるJavaScriptライブラリ。

GraphQL

• クライアント側のデータ照会言語とサーバー側のサービス層。

MagentoのGraphQL

認証とスキーマ

フロントエンドクエリの量を減らす

フェーズレンダリング

デスクトップブラウザの互換性

• サポートされない：IE、Safari

モバイルブラウザの互換性

サポートされていない：Android Webview、IE、Safari

PWAはより安全です

• ウェブ開発者として、Googleがのhttps代わりにを持っているウェブサイトをどれだけ奨励しているか知っているかもしれませんHTTP。Webおよびアプリ開発者にとって、サイバー脅威は常にリストのトップです。
• 以前は、HTTPユーザーの情報を保護するほど安全ではありませんでした。
• Webサイトは現在プログラミングされてHTTPsおり、安全な環境でプログレッシブWebアプリを簡単に起動できます。
• クレジットカード情報や連絡先の詳細などの個人情報をPWAに入力している間、彼らは安心して安心できます。

PWA-オフラインモード

オフラインウィキペディアアプリケーションは、アプリシェルモデルを使用する PWAの良い例です。

• 繰り返しアクセスすると即座にロードされますが、JSを使用してコンテンツを動的に取得します。
• このコンテンツは、今後のアクセスのためにオフラインでキャッシュされます。

Progressive Web Appは、間違いなくWeb開発の未来です。将来、eコマースサイト、レストラン、およびメディアソースは、ネイティブアプリからプログレッシブWebアプリに移行します。ただし、まだ初期段階では、開発者の多くは、PWAが提供する機会を最大限に活用する方法を積極的に探しています。

PWAを使用したMagento 2.3のインストールから始めましょう

1. DIR / var / www / html /に次のコマンドを入力します（m203はMagento 2.3ディレクトリです）。

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2.コマンドラインでMagentoをインストールします。

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. PWA Veniaテーマの親となるベースpwaテーマを作成します。

• 今のところ、ベースのpwaテーマリポジトリをクローンしましょう。https://github.com/magento-research/theme-frontend-pwa

4.ディレクトリapp/design/frontend/Magento/pwaを作成し、ベーステーマのすべてのファイルとディレクトリをここにコピーします。

• 基本テーマが使用可能かどうかを確認します。

• Run: php bin/magento setup:upgrade

• ナビゲートあなたのMagentoの管理- >のContent>テーマ

5. PWAスタジオプロジェクトをダウンロードします。

6. Magentoインストールのルートディレクトリに移動し、プロジェクトのモジュールディレクトリ（pwa-studio / packages / pwa-module）にリンクするPwaシンボリックリンクフォルダーを作成します。

• このディレクトリからコマンドを実行しました- / var / www / html / m230

• これは、pwaがダウンロードしたソースが/ var / www / html / PWA /であるディレクトリです

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7.テーマディレクトリもリンクします。Magentoインストールのルートディレクトリに移動し、プロジェクトのモジュールディレクトリ（pwa-studio / packages / venia-concept）にリンクするPwa symlinkフォルダーを作成します。

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8.次に、pwa-studioプロジェクトのvenia-conceptディレクトリに移動.env.distし、新しい.envファイルにコピーして、Magento開発ストアへのURLで変数を更新します。

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. veniaテーマとPwaモジュールをインストールします。

run: php bin/magento setup:upgrade

veniaテーマが正常にインストールされていることがわかります。

10.からveniaテーマを設定します admin->Content->Configuration

11.パス（/var/www/html/PWA/pwa-studio-master）に移動します。

npm install

または

npm install webpack-dev-server -g

12.そして最後に移動します /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

おめでとうございます！Veniaテーマプロジェクトの開発環境を設定しました。

PWA-プログレッシブWebアプリケーションは、ユーザーがリッチWebを体験する一般的なWebアプリケーションです。の方法で：

• 信頼性 -すぐにロードでき、オフラインモードでも使用できます。
• 高速 -ユーザーがスムーズに対話する対話方式で、スクロールやアニメーションのジャンクもありません。
• 魅力的 -上記の両方の点で示されているように、アプリケーションが信頼性が高く高速な場合、明らかにユーザーエクスペリエンスが向上し、自然なアプリのように感じられます。

「MagentoがプログレッシブWebアプリケーションプラットフォームになりつつあるとはどういう意味ですか？」

magentoは2.3バージョンのリリースを準備しているため、この「PWA」機能を含めて、ユーザーとのやり取りの方法でフロントエンドをより効率的にしています。

REST APIとPWAの扱いは何ですか？

magentoは「PWA」を使用しているため、「GraphQL API」として「REST / SOAP」のフロントエンド開発側API代替を提供する「GraphQL API」も追加しています。

「PWA」および「magento2.3オープンコマース」の新機能の詳細については、このmagentoの公式ページをご覧ください。

プログレッシブとは、ユーザーがWebサイト内を移動するときに、アプリケーションが関連するデータおよびアセットとともに読み込まれることを意味します。これにより、速度、使いやすさ、オフライン操作、デバイス統合が向上したエンドユーザーエクスペリエンスが実現します。

Webとは、Webの言語（HTML、CSS、JavaScript）で記述されていることを意味します。これにより、iOSやAndroidなどの1つのプラットフォームに制限されたネイティブアプリを作成することなく、アプリのような機能を提供するサイトを作成できます。

アプリケーションとは、買い物客のデバイスまたはコンピューターにコードをインストールして実行することを意味します。これを行うと、従来の単一ページのJavaScriptアプリよりも速度と機能が向上します。

PWAは基本的に通常のWebページとモバイルアプリのハイブリッドであり、モバイルアプリのようなWebエクスペリエンスを可能にします。

MagentoはプログレッシブWebアプリケーションプラットフォームになりつつあります。つまり、MagentoはプログレッシブWebアプリケーションとしてオンラインストアを構築するためのツールスイートを作成しています。これらのツールは、開発者がPWAテクニックを学び、超高速PWAフロントエンドを構築し、Magento Marketplaceで再利用または販売するためのPWAコンポーネントと拡張機能を作成するのに役立ちます。まとめて、Magentoはこの一連のツールをMagento PWA Studioと呼んでいます。

https://github.com/magento-research/pwa-studioでコード構造を確認できます

Magento PWAは、PWAのREST APIの代替としてGraphQLを使用しています。

Magento PWAの詳細については、次のリンクをご覧ください。

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• プログレッシブWebアプリは、インストール可能なモバイルアプリとWebサイトの中間です。2019年までに、デスクトップよりもモバイルデバイスからのインターネットのトラフィックが多くなると予想されます。PWAはWebサイトのルックアンドフィールを改善して、コンバージョンを増やします。

PWAは、Magento加盟店のトラフィックを増やし、コンバージョンを増やし、ページ読み込み時間を短縮する、高速で摩擦のない「アプリのような」エクスペリエンスを提供します

そのため、一般的に、Magentoは変換を増やすためにルックアンドフィールを変換しています。 詳細はこちらをご覧ください。

• PWAは通常、JavaScript、CSS、およびHTMLで構築され、ネイティブアプリとほぼ同じレベルのパフォーマンスと使いやすさを備えています。PWAには次のような特性があります。

  1. プログレッシブコードベース（多くの場合、React Jsのようなコンポーネント）を備えたほとんどの（すべてではないにしても）ブラウザーおよびデバイス（モバイルおよびデスクトップ）で動作します。
  2. レスポンシブデザインを使用して、すべての画面とフォームファクターに適合します。
  3. プッシュ通知などの再エンゲージメントツールを活用するアプリのようなエクスペリエンスを提供する
  4. Webアプリのマニフェストを活用して、使用されているリソースを説明する

詳細はこちらをご覧ください。

• SOAP（Simple Object Access Protocol）およびREST（Representational State Transfer）は、最も一般的なWebサービス通信プロトコルです。ほとんどの場合、RESTはSOAPよりも優先されます（ここで説明します）。したがって、PWAのような新しいテクノロジーと一緒にREST APIが使用されるのは当然です。

質問の一部だけでなく、Magento 2固有のものに回答するため。

PWAは、Magento 2.3の将来のリリースのおかげで構築しやすくなります。

https://www.degdigital.com/insights/magento-2-3/

この記事から引用：

PWA

プログレッシブWebアプリは、最新のテクノロジー機能を利用するために構築されたアプリケーションであり、それらの機能が利用できないデバイスで「段階的に」縮小します。また、データのキャッシングが可能になるため、インターネットサービスが不安定または存在しない場合に、Webサイトを（部分的または完全に）オフラインモードで使用できます。これは一般に、バックエンドアプリケーションとは明確に分離された最新のJavaScriptフレームワーク/スタックでWebサイトのフロントエンドを記述することによって実現されます。このJavaScriptアプリケーションは、新しい（ish）ブラウザー機能を使用して前述のタスクを実行できます。

Magentoはこれに対する複数の利点を認識しており、2017年後半にPWA Studioと呼ばれるものを構築する取り組みを発表しました。PWA Studioには、Magentoのフロントエンド用のPWAを開発および展開するためのツールが含まれます。PWA Studioに加えて、軽量の（機能フルではない）デモサイトが提供されます。当面の利点は、フロントエンドのパフォーマンスが大幅に向上し、新しいMagentoフロントエンド開発者のオンボーディング速度が10倍近く向上することです。

• 関連コンテンツ：PWAはここにあり、すべてを変えています

GraphQL

GraphQLは、APIを使用するためのクエリ言語です。PWAの台頭により、より少ない量のデータを取得し、APIリクエストを少なくする必要があります。GraphQLのクエリ言語は、リクエスターがエンティティについて返される属性の限られたサブセットを要求できるようにすることでこれを可能にし（大幅に小さい応答）、要求を連鎖できるようにします（要求の数が少なくなります）。

Magentoは現在、サービスコントラクトを使用するRESTおよびSOAP APIリクエストをサポートしています。ただし、GraphQLをサポートするために、MagentoはQuery APIに直接インターフェースするまったく新しいレイヤーを作成しています。GraphQL実装は、PWAフロントエンドが必要なデータを取得する方法の基盤となります。

プログレッシブWebアプリケーションは、Webブラウザー機能を使用して、ユーザーにエクスペリエンスのようなモバイルアプリを提供します。

ブラウザのタブから開発し、低摩擦のユーザーエクスペリエンスでページをより没入させます。これは、アプリケーションのように振る舞い、感じるWebサイトを作成するWebテクノロジーです。

ユーザーは、ブラウザの選択に関係なく、ネイティブアプリケーションと同じようにプログレッシブWebアプリケーションを起動できます。

デモテストについては、次のリンクをご覧ください。ここをクリック

I / O 2017 I / O 2017中に発売されたGoogle製品：https : //www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

HTMLに基づくWebサイトです。

キャッシュをデバイスに保存して、オフラインでも使用できるようにします。

ただし、最初は遅くなり、2回目の訪問中にアップします。

デバイスがインターネットに接続すると更新されますので、APPのような新しいものを更新する必要はありません。

誰かがオフラインで何かを投稿すると、デバイスがインターネットを取得すると、サーバーへのすべての電子メールがトリガーされます。

最終的には、iPhone / Androidアプリを構築する必要はありません。

制限 HTMLファイルのみをサポートします。したがって、デバイスはHTMLをサポートする必要があります。

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

PWAのセットアップ（Linux OS）

ステップ1：magento 2.3.1をインストールする

ステップ2：ノードのインストール/アップグレード

ノードをアップグレードするには、npmのnモジュールを使用します

sudo npm install n -g

最新の安定版の場合：

sudo n stable

最新バージョンの場合：

sudo n latest

ステップ3：yarnのインストール/更新：

sudo npm install --global yarn

sudo npm upgrade --global yarn 

ステップ4：node-gypのインストール-Node.jsネイティブアドオンビルドツール

sudo npm install -g node-gyp

ステップ5：PWA Studioリポジトリのクローンを作成する

htmlルートに移動して実行します：

git clone https://github.com/magento-research/pwa-studio.git

これを実行すると、pwa-studioフォルダーが取得されます。

ステップ6：PWA Studioの依存関係をインストールする

sudo yarn install

ステップ7：Magentoバックエンドサーバーを指定する

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

コマンド例：

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

.envファイルの変更（これは管理URLではなく、magento URLになります）：

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

ステップ8：ビルドを作成する

sudo yarn run build

ステップ9：サーバーを実行する

sudo yarn run watch:venia

Veniaストアフロント開発環境のみを開始します。

sudo yarn run watch:all

Veniaホットリロードと同時のBuildpack / Peregrineの再ビルドを含む、完全なPWA Studio開発者エクスペリエンスを実行します。

sudo yarn run build && yarn run stage:venia

ビルドアーティファクトを生成し、ステージング環境を実行します。この環境では、より多くの圧縮されたアセットを使用し、本番環境をより密接に反映します。

上記のコマンドのいずれかを実行すると、PWAによって作成された仮想URLが取得されます。

注：roodユーザーの場合は、sudoを使用します。

Magento 2の公式開発者向けドキュメントに従ってください：

https://devdocs.magento.com/guides/v2.3/pwa/