Magento PWA スタジオについて知っておくべきことすべて

公開: 2022-04-18

プログレッシブ Web アプリまたは PWA は、最新の機能により、ますます人気が高まっています。最先端のテクノロジーのおかげで、顧客体験が向上し、ビジネスにより多くの収益がもたらされます。そのため、多くの企業がこのプラットフォームをオンラインストアに適用して、PWA の利点を活用しています。特に、多くの企業が Magento のプログレッシブ Web アプリを選択しています。次に、Magento PWA スタジオに慣れるための詳細なチェックリストを提供します。

PWAスタジオの概要

プログレッシブ Web アプリとは

プログレッシブ Web アプリは、ネイティブアプリのような外観と操作性を備えていますが、モバイルブラウザーで直接動作します。 App Store から何かをダウンロードする必要はありません。代わりに、顧客はブラウザーですぐにアプリのようなエクスペリエンスを得ることができます。

プログレッシブウェブアプリの特徴

オフライン作業の機能:サービスワーカー – テクノロジがその機能を担当します。したがって、アプリは物事をオフラインで保存し、ネットワーク要求を柔軟に管理してそれらを取得できます. その結果、アプリの実行に必要なデータ量を最小限に抑えることができます。

見つけやすさと簡単なインストール: PWA は、Google や Bing などの通常の検索エンジンで見つけられる追加機能を備えた Web サイトです。したがって、ユーザーはアプリストアから何かをダウンロードする必要はありません。 PWA のインストールは非常に簡単で、最初のアクセス時にバックグラウンドで行われます。

電話機能の使用: PWA には、Android のデバイス機能にアクセスする多くの可能性があり、iOS ではいくつかの可能性があります。アプリのような方法でカメラ、GPS、または指紋スキャナーを使用すると、ユーザーエクスペリエンスが向上します。

自動更新: PWA により、パブリッシャーはパッチをすぐに実装できます。さらに、コンテンツを完全に制御できるようになります。顧客は常に最新バージョンのアプリケーションを使用します。

安全性: HTTPS プロトコルを使用すると、暗号化によってデータが安全になり、傍受や変更がより困難になります。さらに、ユーザーは HTTPS をパブリッシャーの安全性と信頼性の保証と認識しています。そして、Googleはそれを使用するための検索ランキングに追加のポイントを与えます.

アプリのような感覚: PWA の背後にある全体的なアイデアは、可能な限り最高のエクスペリエンスを、Web のオープンな性質を備えたアプリのようなエクスペリエンスに接続する方法を見つけることです。

Magento PWA Studioの概要

Magento PWA Studio の起源

Magento は、オンラインストアを運営するすべてのマーチャント向けの一連のツールをリリースしました。 Magento PWA Studio は、この一連のツールの名前です。オンライン小売業者は、さまざまなオペレーティングシステムすべてに対応するネイティブアプリを開発するための時間と費用を大幅に節約できます。

アプリのような Web サイトをデザインするツール Magento により、オンラインマーチャントはモバイルコンバージョン率を高めることができます。これは、顧客のクロスチャネルエクスペリエンスを改善した結果です。さらに、Magento PWA を使用すると、ネイティブアプリのように動作して、ユーザーエクスペリエンスを向上させることができます。

マーチャントは、非常に高速なフロントエンドアーキテクチャとオープン Web API を活用できます。急速に新しい標準になりつつある店舗に変革するのに役立ちます。

PWA ビルドパック

Buildpack には、非常に高速なフロントエンドと PWA を作成するための必須の開発およびビルドライブラリとツールが含まれています。これにより、PWA 開発用にローカル環境を調整できます。

PWA ストアフロント

Venia Storefront とも呼ばれる PWA Storefront は、Peregrine ツールと PWA Buildpack で構築された概念実証用の PWA です。 Magento PWA Studio とそれが実現できることについて学習すると、ストアフロントにカテゴリページと製品の詳細のサンプルが表示されます。

ペレグリン

前述のように、Magento の Peregrine プロジェクトには、Magento PWA を作成するための一連のツールと UI コンポーネントが含まれています。コンポーネントを組み合わせ、拡張、ブレンドして、独自の Magento 2 PWA ストアを作成できます。

Magento PWA Studio のいくつかの優れた機能

ReactJS – ReactJS は非常に優れたパフォーマンスを発揮し、優れたショッピングおよび開発者エクスペリエンスを提供します。

ホーム画面の代替 – Magento PWA は、ホーム画面でダウンロードできるストアを提供します。ネイティブアプリのように見え、動作します

オフラインで動作 – PWA Web アプリは、オフラインとオンラインの両方で動作します。

強力なバックエンド – Magento の堅牢な社内バックエンドは、ほとんど問題のないスムーズなユーザーエクスペリエンスを提供します。

Magento PWA Studio を使用する場合の利点

包括的な開発ツール

Magento Studio は、最新の完全なドキュメントを含む PWA 開発ツールを提供します。ユーザーは、独自のローカル PWA 開発環境をすばやく調整できます。

簡単なセットアップ

Magento Studio を使用すると、バックエンドから PWA を簡単に設定できます。アプリケーションを正常に開始するには、ユーザーは Magento インスタンスの URL を .env ファイルに挿入する必要があります。次に、リポジトリをクローンして、コマンドを実行します。開発の容易さが最優先課題であることは最初から明らかでした。

GraphQL

GraphQL は宣言型データフェッチを採用しているため、Magento Studio で開発された PWA では、クエリのオーバーフェッチがほとんどありません。そうすれば、さまざまなソースからの複数のユーザーに対応できるようになります。

コミュニティサポート

Magento は有名な e コマースプラットフォームであり、Magento PWA ユーザーと協力者の大規模なグローバルコミュニティを生み出しています。

Magento PWA スタジオのアーキテクチャとフレームワーク

Studio のセットアップと使用は非常に簡単で、アプリ開発プロセスの早い段階でミスが発生するのを防ぎます。何かが適切に配置されていない場合、開発者はすぐに警告を受けます。これにより、プログラムがほぼ完成したときにバグを発見して修復する時間を節約できます。

Magento PWA スタジオのビルダーはすぐに使用できます

ビルダーをインストールして、環境のカスタマイズとセットアップに時間を費やす必要はありません。インストール後、すべてが Magento PWA Studio ですぐに機能します。すべてがセットアップされ、準備が整いました。

既製の要素は適応可能です

PWA Studio には、完成したすぐに使用できる Web サイトパーツが多数含まれています。 Web サイトを作成するときは、一部またはすべての要素を任意の組み合わせで使用できます。この時点で、準備された要素はそのまま使用できます。事前に作成されたものでさえ、開発者や消費者のニーズに合わせて変更できます。

完全にシンプルなルーティングとキャッシング

Magento PWA Studio のルーティングおよびキャッシュ機能は、追加の優れた品質です。ルーティングとキャッシングは、これまでと同じ方法で行われ、変更はありません。ただし、従来の Magento ルーティングおよびキャッシング手法を採用する場合は、ルーティングおよびキャッシングに参加する必要はありません。

Magento PWA Studioと克服する必要がある短所

単一プラットフォーム

Magento Studio を所有する場合は、各ストアを Magento 2.3 以降のビルドで実行する必要があります。互換性について心配する必要はありませんが、かなり制限があります。

互換性の欠如

互換性に関しては、Magento Studios の GraphicQL 機能により、以前のバージョンとの互換性が不適切になります。

iOS サポートの問題

Magento は iOS PWA 通知をサポートしておらず、インターネットに接続されていない iOS デバイスでは動作しません。

検証の問題

新しいクライアントアカウントを作成する場合、検証の問題が発生する可能性があります。これは、パスワードを設定するときに iOS ユーザーに特に当てはまります。選択したパスワードがパスワード要件を満たしていない場合、通知を配信できません。

Magento PWA Studio のインストール方法 (バージョン 2 を使用)

ステップ 1: 最新の Magento バージョンをインストールする

Magento PWA Studio をインストールするには、まず Magento 2.3.x バージョンをインストールする必要があります。これがないと Magento PWA Studio Project(2.3) をインストールできません。これは、他の Magento バージョンでサポートされていないためです。

ステップ 2: NodeJS をインストールする

その後、NodeJS (バージョン >=10.14.1) をインストールする必要があります。この手法に慣れていない場合は、以下にリストされているコマンドを使用してください。 (これは Linux ユーザー専用です。)

sudo apt-get install nodejs

まず、Node のバージョンを確認する必要があります。

 node -v

次に、NPM のバージョンを確認します。

 npm -v

インストールしたバージョンが上記のものよりも古い場合は、以下のコマンドを使用して、ノードの最新の安定したバージョンにアップグレードします。

 sudo npm cache clean -f

 sudo npm install -gn

 sudo n stable

ステップ 3: Node JS をインストールして実行する

NodeJS をインストールして実行したら、Yarn (Yarn >=1.13.0 ) をインストールする必要があります。 Yarn をインストールするには、次のコマンドを実行します。 (Linux OS にのみ適用されます)。

 sudo npm install yarn -g

次に、糸のバージョンを確認します。

 yarn -v

ステップ 4:

Yarn がインストールされたので、PWA リポジトリを開発ディレクトリに複製します。

 ステップ 5:
 この手順に続いて、次のコマンドを実行してプロジェクトの依存関係をインストールします。
 yarn install
 ステップ 6: .env ファイルを作成する
.env ファイルを作成するには、PWA ルート ディレクトリから次のコマンドを実行します。
 (テーマ Venia には、自分でインストールした Magento またはデフォルトの Magento 2.3.1 を使用できます。ここではデフォルトを使用しています。)
 次のコマンドを使用して、.env ファイルを作成し、カスタム MAGENTO_BACKEND_URL 値を設定することもできます。
 ステップ 7: SSL 証明書をインストールする
PWA が安全なパスで実行されるため、SSL 証明書をインストールします。SSL 証明書を生成するために create-custom-origin コマンドを実行できます。
 ステップ 8: Venia サンプル データをインストールする
Venia サンプル データをインストールすることもできます。bash スクリプトは既に次の場所にあります。
 サンプル データを Magento にインストールするには、次のコマンドを実行します。
 次を実行して、テーマのすべてのアーティファクトを今すぐビルドします-
 yarn run build
 PWA プロジェクトのルート ディレクトリから、必要に応じて次のコマンドのいずれかを実行して、サーバーを起動します。
 開発面では――
 完全な開発者 PWA Studio を実行する目的で
アーティファクトの構築と PWA スタジオの実行からステージングまで -
 PWA が正常にインストールされました。 上記のコマンドを実行すると、PWA が動作している URL が表示されます。 次に、インストールが成功したかどうかが示されます
 結論
この記事では、Magento PWA スタジオの概要を理解していることを願って説明します。 多くの素晴らしい機能を備えているため、オンラインストアを増やすために飛び込む価値があります. したがって、あなたのビジネスは顧客の需要を満たすことができ、インターネット環境で発展する機会が増えます. ただし、この技術についてまだ混乱している場合は、Magesolution がパートナーになり、ビジネスを支援します。 この分野での多くの経験により、Magento プログレッシブ Web アプリケーション開発という最高のサービスを提供できると確信しています。 したがって、ご不明な点がございましたら、お問い合わせください。