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

公開: 2022-04-18

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

PWAスタジオの概要

PWAスタジオ

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

プログレッシブウェブアプリは、ネイティブアプリのように見えますが、モバイルブラウザで直接機能します。 AppStoreから何かをダウンロードする必要はありません。 代わりに、顧客はブラウザでアプリのようなエクスペリエンスを即座に得ることができます。

プログレッシブウェブアプリの機能

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

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

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

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

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

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

MagentoPWAStudioの概要

マゼントスタジオ

MagentoPWAスタジオの起源

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

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

マーチャントは、非常に高速なフロントエンドアーキテクチャとオープンWebAPIを活用できます。 それは彼らの店を急速に新しい規範になりつつあるものに変えるのを助けます。

PWAビルドパック

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

PWAストアフロント

PWAストアフロントはVeniaストアフロントとも呼ばれ、ペレグリンツールとPWAビルドパックを使用して構築された概念実証PWAです。 Magento PWA Studioとそれが何を達成できるかを学ぶとき、ストアフロントにはカテゴリページのサンプルと製品の詳細が表示されます。

ペレグリン

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

MagentoPWAStudioのいくつかの優れた機能

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

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

オフラインで動作–PWAWebアプリはオフラインとオンラインの両方で動作できます。

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

MagentoPWAStudioを使用する場合の利点

Magentoスタジオ

包括的な開発ツール

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

簡単なセットアップ

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

GraphQL

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

コミュニティサポート

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

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

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

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

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

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

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

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

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

MagentoPWAStudioと克服する必要のある短所

単一のプラットフォーム

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

互換性の欠如

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

iOSサポートの問題

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

検証の問題

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

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

MagentoPWAStudioをインストールする方法

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

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

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

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

sudo apt-get install nodejs

まず、ノードのバージョンを確認する必要があります： node -v

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

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

sudo npm cache clean -f

sudo npm install -gn

sudo n stable

ステップ3：NodeJSをインストールして実行する

NodeJSのインストールと実行後、Yarnをインストールする必要があります（Yarn> = 1.13.0）。 Yarnをインストールするには、次のコマンドを実行します。 （Linux OSにのみ適用可能）。

sudonpmインストールyarn-g

今糸のバージョンを確認してください：

糸-v

ステップ4：

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

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

ステップ5：

この手順に続いて、次のコマンドを実行してプロジェクトの依存関係をインストールします。

ヤーンインストール

ステップ6：.envファイルを作成します

.envファイルを作成するには、PWAルートディレクトリから次のコマンドを実行します-

（テーマVeniaの場合、ユーザーがインストールしたMagentoまたはデフォルトのMagento 2.3.1を使用できます。ここではデフォルトを使用しています。）

MAGENTO_BACKEND_URL =” https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/”ヤーンビルドパックcreate-env-file packages / venia-concept

次のコマンドを使用して、.envファイルを作成し、カスタムMAGENTO_BACKEND_URL値を設定することもできます。

MAGENTO_BACKEND_URL =” https：// YOUR_MAGENTO_BACKEND_URL /”ヤーンビルドパックcreate-env-file packages / venia-concept

手順7：SSL証明書をインストールする

PWAが安全なパスで実行されるときにSSL証明書をインストールします。SSL証明書を生成するためにcreate-custom-originコマンドを実行できます。

ヤーンビルドパックcreate-custom-originパッケージ/venia-concept

ステップ8：Veniaサンプルデータをインストールする

Veniaサンプルデータをインストールすることもできます。packages/venia-concept/deployVeniaSampleData.shにすでにbashスクリプトがあります。

bash deployVeniaSampleData.sh

Magentoにサンプルデータをインストールするには、次のコマンドを実行します。

bin / magentoセットアップ：アップグレード

bin / magentoインデクサー：reindex

実行して、テーマのすべてのアーティファクトを今すぐ作成します-

ヤーンランビルド

PWAプロジェクトのルートディレクトリから、必要に応じて次のコマンドのいずれかを実行して、サーバーを起動します。

開発用-

ヤーンランウォッチ：ベニア

完全な開発者PWAStudioを実行するため

ヤーンランウォッチ：すべて

アーティファクトを構築し、PWAスタジオを実行してステージングする場合-

ヤーンランビルド&&ヤーンランステージ：venia

これで、PWAが正常にインストールされました。 上記のコマンドを実行すると、PWAが動作しているURLが表示されます。 次に、インストールが成功したかどうかが示されます

MagentoPWAStudioをインストールします

結論

Magento pwa studioの概要を理解していることを願って、この記事を順を追って説明します。 素晴らしい機能がたくさんあるので、オンラインストアを増やすために飛び込む価値は間違いありません。 したがって、あなたのビジネスは顧客の需要を満たすことができ、インターネット環境で発展するためのより多くの機会をもたらします。 ただし、このテクノロジーについてまだ混乱している場合は、Magesolutionがビジネスを支援するパートナーになることをいとわないでしょう。 この分野での多くの経験により、私たちは最高のサービスであるMagentoプログレッシブWebアプリケーション開発を提供できると確信しています。 したがって、ご不明な点がございましたら、お問い合わせください。