WordPressとWooCommerceに基づいたプログレッシブWebアプリを構築したいですか?こちらがその方法です(コード例付き)

おそらくすでにおわかりでしょうが、この投稿は "高度な" 側面ですが、非常に興味深いトピックに取り組み、ウェブサイトやアプリのこのモバイルファーストパス全体をたどる新しい分岐を提示します.


私たちが呼ぶもの "レスポンシブウェブデザイン" しばらくの間私たちと一緒にいて、ゲームのこの段階では、ほとんどの開発者/ウェブサイト/ウェブツールはすでにその原則を完全に統合しています。しかし、それは "モバイル対応"? または、それはほんの始まりにすぎない.

まあ、Googleは後者だと思っています。そして、プログレッシブWebアプリが登場!

読み込もうとしている投稿は、 "開発ハウス内" イニシアチブ(これは前のものです)それはのアレクサンドラアンヘルによってまとめられました Appticles.com.

アレクサンドラを入力してください:

WordPressとWooCommerceのプログレッシブWebアプリ

プログレッシブウェブアプリについて

Progressive Web Apps(PWA)は、最高のWebと最高のアプリを組み合わせたエクスペリエンスです。ネイティブアプリストアアプリは、過去に次のような機能により非常に人気が高まっています プッシュ通知, オフラインでの作業、スムーズなアニメーションと移行、ホームスクリーンへのロードなど.

モバイルWebアプリは、ブラウザーで機能し、ネイティブアプリの機能のいくつかをWebに取り込もうとしたJavaScriptアプリケーションですが、たとえばプッシュ通知を提供することはできませんでした。新しいWeb APIのモバイル導入により、プログレッシブWebアプリはギャップを埋め、モバイルWebでアプリのような完全なエクスペリエンスを提供します.

グーグルはそれらを説明します として:

  • 信頼性のある –瞬時にロード
  • 速い –ユーザーの操作にすばやく対応
  • 魅力的な –ネイティブアプリのように動作する

これらすべてのポイントを達成するには、プログレッシブウェブアプリに次の機能が必要です。

  • オフラインまたは貧弱なネットワーク条件で作業する
  • Webアプリインストールバナーまたはホーム画面に追加
  • Webプッシュ通知を使用します。 Web Push APIの導入により、ブラウザーが閉じている場合でも、ユーザーにプッシュ通知を送信できるようになりました.
  • HTTPSを実装する
  • ネイティブアプリケーションと同様に、ユーザーの画面に瞬時に読み込まれるアプリケーションシェル(またはアプリシェル)アーキテクチャを使用する.

本質的に、PWAはJavaScriptで記述された単一ページアプリケーションです。オフラインモード、ホーム画面に追加、Webプッシュ通知はすべて、Service Workerを使用して実装されています.

プログレッシブウェブアプリとレスポンシブウェブデザイン

プログレッシブウェブアプリとレスポンシブウェブデザインを混同しないでください。プログレッシブウェブアプリはさまざまな画面サイズに適応できるため、レスポンシブ機能を備えていますが、 彼らのユニークな価値提案は、彼らをアプリのようにする機能です.

ここ数年、RWDはモバイルWebソリューションの主要なソリューションでしたが、 フォレスター 昨年のレポートでは、RWDが飽和状態に達し、デジタルエクスペリエンスメーカーの87%がそれを採用し、ウェブ上でアプリのようなエクスペリエンスを好むという顧客の期待の変化が目の前で起こっていることがわかりました.

PWAは魅力的なモバイルWebユーザーのためのソリューションですか?

高品質のプログレッシブWebアプリを構築すると、ユーザーを楽しませ、エンゲージメントを高め、コンバージョンを増やすことができるという、信じられないほどのメリットがあります。プログレッシブウェブアプリを使用して指標を改善した企業、特にeコマース業界のいくつかの例があります。それらの多くはGoogleのデベロッパーウェブサイトに掲載されています.

  • たとえば、Alibaba.comは、高速で効果的で信頼性の高いモバイルWebエクスペリエンスにつながるPWAを構築しました。新しい戦略 76%の増加を実現 ブラウザー全体での合計コンバージョン数、およびAdd to Homescreenからの4倍のインタラクション率.
  • 別の使用例では、OLXは、[ホーム画面に追加]と[プッシュ通知]を使用して、モバイルWebユーザーに再度アプローチしたいと考えていました。彼ら エンゲージメントが250%増加 その他の指標も改善されました。ページがインタラクティブになるまでの時間は23%減少し、それに対応して直帰率が80%低下しました。クリック率(CTR)が146%上昇し、収益化も改善.

モバイルWebアプリがプログレッシブであることをどのように知ることができますか?

まず第一に、プログレッシブであることはスコアであり、はいまたはいいえではありません。 灯台 このスコアの測定に使用できます。このプラグインは本当に使いやすく、すべてのPWA機能を備えたレポートを生成します。基本的に、Webアプリが完全にプログレッシブになるために何を変更する必要があるかを知らせます。 WooCommerce PWAのアルファ版では、Lighthouseで91点を達成しました。.

灯台

どうすればPWAを構築できますか?

GoogleのPWA標準には、プログレッシブウェブアプリを作成するための特定のテクノロジーやフレームワークは記載されていません。チェックリストに従っている限り、何でもかまいません. 多くのPWAは、 Angular JS または 反応する, 現在最も人気のあるJavaScriptフレームワークです.

反応する

AngularJSとReactの両方に利点があります。

  • アンギュラー/ イオン 組み合わせは最近かなり人気があります。 Ionicは、もともとモバイルアプリ用に構築された優れたフレームワークですが、プログレッシブウェブアプリやデスクトップアプリケーションにまで拡張されています。.
  • Reactは本当に直感的で理解しやすいです。デフォルトでPWAサポートが付属している素晴らしいボイラープレートであるcreate-react-appの恩恵を受ける.

これら2つに加えて, VueJS 人気も高まっています.

次に、WordPressとWooCommerceの上にReactで構築されたeコマースアプリケーションのコードサンプルをいくつか見ていきます。 REST API.

これらの記事にも興味があるかもしれません:

  • 最高のAngular管理ダッシュボードテンプレート

WooCommerce REST APIについて

eコマースアプリケーションを作成する場合、最初に必要なのは、データを取得できるAPIです。さいわい、コアにREST APIが含まれているため、WordPressをバックエンドとして使用するための扉が開かれました。さらに、eコマースアプリの場合、REST APIを 人気のWooCommerceプラグイン.

WooCommerceにはNPMパッケージ(WooCommerce API)API呼び出しを行うためですが、残念ながらこのパッケージでは、リクエストを認証するためにコンシューマキーとコンシューマシークレットの両方が必要です。フロントエンドアプリでコンシューマシークレットを使用すると、セキュリティの問題が発生します.

また、WooCommerce管理セクションからキーを作成する場合、ルートレベルで権限を指定することはできません。たとえば、製品の表示アクセスと注文の書き込みアクセスを許可します.

そのため、WordPressプラグインでプロキシを作成する必要がありました。これにより、制限されたAPIエンドポイントのセットにアクセスできます。以下の例でわかるように、ベースとして、WooCommerce REST API PHPラッパーを使用しました。

上のコードを表示 要旨.

まず、コンシューマキーとシークレットを使用してWooCommerceクライアントを初期化します。 2番目と3番目のメソッドは、製品と呼ばれるカスタムルートを作成し、そのルートをWooCommerce APIから製品/カテゴリエンドポイントにマップします.

このようにして、読み取りカテゴリと製品へのアクセスを許可し、注文の作成操作のみを許可することができます。.

4つの簡単なステップで新しいReactアプリを作成する

APIを設定したら、Reactアプリケーションの作業を開始できます。インストール後 NodeJS そして NPM グローバルに、create-react-appパッケージを使用して、デフォルトでPWAをサポートするReact JSアプリをすばやく生成できます.

  1. インストール NodeJSとNPM 世界的に
  2. インストール create-react-app ボイラープレート
    npm install create-react-app -g
  3. 生む 新しいReactアプリケーション
    create-react-app my-app
  4. アプリケーションを開始
    cd my-app & npmスタート

以下は、create-react-appによって生成されるアプリケーションのスクリーンショットです。必要なものがすべて含まれているため、ライブリロードを含めてコーディングを開始できます。

サンプル反応アプリ

新しいアプリを開始するときに注意すべき点がいくつかあります。

1)アプリファイルの整理
アプリを最適に構成する方法については、いくつかの優れたチュートリアルがあります。スケーラビリティが向上するため、機能ごとのフォルダーを使用します。あなたは見つけることができます ここで本当に良い説明.
2)リンターとコーディング標準
コーディング標準に慣れていないと煩わしいかもしれませんが、 このステップをスキップしないでください. 未使用の依存関係をクリーンアップし、データがコンポーネントレベルで適切に検証されるようにします。さらに、コードを自動的にフォーマットするきれいなエディタープラグインをインストールすると、コーディング標準を簡単に使用できます。規格自体は人気の方がいい Airbnbが作成.
3)小さなコンポーネント
コンポーネントファイルを小さくすると、テストと管理が容易になります。単一のコンポーネントでコードを書き始めることができ、それが大きくなると、それをより小さいコンポーネントに分割します。 UI / UXコンポーネントの場合、Reactと互換性のあるいくつかのライブラリがあります。 マテリアルUI, セマンティックUI あるいは ブートストラップ, いくつかの例を挙げます.

これらのライブラリには、グリッド、メニュー、カード、ボタンなど、既製のコンポーネントのセットが含まれています。基本的なセマンティックUI要素で構築されたeコマースアプリケーションインターフェースの例を次に示します。

カテゴリのリスト、製品のリスト、サイドメニューを確認できます。コードを詳しく見ていきましょう。Reactを使用してそのような例を作成するのがいかに簡単かがわかります。.

eコマースアプリの例

ReactJSに飛び込む

以下は、APIから製品カテゴリのセットを読み取るReactコンポーネントです。コンポーネントの状態は、カテゴリの空のリストで初期化されます。レンダリング前にReactによって自動的に呼び出されるcomponentWillMountメソッドで、カテゴリーをフェッチする要求を作成し、応答を受け取った後、それらを状態に追加します。

上のコードを表示 要旨.

ご覧のとおり、カテゴリーを受け取ったときにrenderメソッドを呼び出す必要はありません。Reactがそれを処理してコンポーネントを再レンダリングします。 renderメソッドは、カテゴリデータを受信する次のようなCategoriesListという別のカスタムコンポーネントを返すだけです。

上のコードを表示 要旨.

上記のコンポーネントは、小道具として受け取ったカテゴリのリストを反復処理し、CategoryCardという別のカスタムコンポーネントを呼び出して、単一のカテゴリ要素をレンダリングします。.

これらのコンポーネントはすべて、コンポーネント間で小道具を渡すことによって通信します。メインのCategoriesコンポーネントはAPIを呼び出し、カテゴリのリストをCategoriesListに渡します。次に、それはカテゴリの詳細をカテゴリカードに渡します。.

Reduxを使用したグローバルアプリの状態の管理

上記のアプローチの問題は、ショッピングカートに追加された製品のリストなど、最上位のアプリケーションレベルで管理する必要があるデータがある場合があることです。商品の数はヘッダーバーのショッピングカートアイコンに表示されますが、チェックアウトページのリストとしても表示されます.

このすべてのデータを親アプリケーションコンポーネントに追加すると、大きなアプリケーションでは管理が非常に難しくなります。これは、 ReduxJs 明確にするために、Reduxは任意のJavaScriptフレームワークと組み合わせて使用​​でき、Reactに固有ではありません.

また、Reduxを使用しても、コンポーネントレベルで状態や小道具を使用できないわけではありません。 Reduxは、アプリケーションレベルで意味のあるデータを保持するためにのみ使用する必要があります.

カテゴリで必要なものと同様に、APIから製品を読み取ってリストにレンダリングする方法を見てみましょう。今回はReduxを使用します。まず、メインのアプリコンポーネントをグローバルストアにラップして、Reduxとの接続を確立する必要があります。

上のコードを表示 要旨.

この例では、グローバルアプリストアにカテゴリのリストと製品のリストが含まれます。これらは、ReduxのCombineReducersメソッドを使用して結合されます。.

次に、タイププロパティを含む必要があるオブジェクトを返す非常に単純な関数であるReduxアクションの定義を続けます。 JSは非同期であるため、2つのアクションが必要です。1つはリクエストが送信されたときのシグナリング用、もう1つはレスポンスが受信されたときのシグナリング用です。アプリ全体は、これらのアクションがいつ発生するかを認識します.

以下では、fetchProductsという関数も追加しました。ご覧のとおり、この関数は次のとおりです。

  • 製品リクエストアクションをディスパッチします,
  • 製品を取得するためのAPIを呼び出します,
  • 結果を受け取ったときにreceiveProductsアクションをディスパッチします.

上のコードを表示 要旨.

アプリの状態を変更するために、いわゆるReduxを追加します "減速機". レデューサーは、特定のアクションをリッスンし、グローバル状態の一部を変更する関数です。この場合、製品のリストです。.

このレデューサーは、製品のリクエストアクションを受け取ったときに何もせず、常に現在の状態を返します。製品の受信アクションの場合、レデューサーは渡されたデータを返します。この場合は、製品のリストになります。.

上のコードを表示 要旨.

まとめとして、これらのアクションとレデューサーを新しいProductsコンポーネントで使用します.

上のコードを表示 要旨.

このコンポーネントは、Reduxのconnectメソッドでラップされており、componentWillMountメソッドでfetchProductsをディスパッチするだけです。また、コンポーネントには製品リストが含まれていますが、ご覧のとおり、製品リストコンポーネントは製品データを直接受け取りません。これは、商品リストコンポーネントがグローバルアプリの状態に直接リンクされており、Reduxも使用しているためです。.

このようにして、アプリストアから直接商品データにアクセスし、商品のリストを反復処理し、ProductCardコンポーネントを使用して単一の商品要素をレンダリングできます。.

上のコードを表示 要旨.

これまでのところ、データを表示する方法の例をいくつか見てきましたが、たとえばカートに商品を追加するなど、ユーザー操作を追加したい場合はどうでしょうか?

この場合、ユーザーが "カートに追加" ボタンをクリックすると、グローバルアプリの状態を変更するアクションがディスパッチされます。カート商品の数を表示するヘッダーバーはReduxに接続されます。アプリケーションのカートに保存されている製品の数をカウントし、それに応じて自身を更新します.

カートに追加の例

アプリとWordPressのリンク

これらはすべて、始めるための基本的な例であり、このアプリをWordPressに正確にリンクするにはどうすればよいか疑問に思われるでしょう。.

そうですね、アプリをサブドメインでホストしてAPIに接続させるか、WordPressテーマとして使用できます。つまり、JavaScript / CSSファイルをロードするだけのindex.phpファイルで非常に基本的なテーマを作成します。 create-react-appボイラープレートには、アプリケーションのビルドを作成するためのコマンドが含まれているため、本番ファイルをすぐに取得できます.

上のコードを表示 要旨.

Service Workerを使用する場所

オフラインモードでは、ユーザーがオフラインの場合でもアプリのシェルを表示するService Workerを追加できます。 Service Workerは、ブラウザーにそれ自体を登録する単なるJavaScriptファイルです.

上のコードを表示 要旨.

オフラインモードで使用できるいくつかの戦略があります。たとえば、ネットワークを最初に、キャッシュを最初に使用します。これらの方法については、Googleの オフラインクックブック.

アプリの読み込みがはるかに速くなるため、ネットワーク接続がある場合でも、アプリのシェルをキャッシュするとメリットがあります.

さらに進んでAPIからのデータのキャッシュを開始したい場合は、redux-persistなどのNPMパッケージを使用してアプリを変更し、ブラウザーのローカルストレージからデータを保存/取得できます.

Webプッシュ通知については、 One Signal Free WordPressプラグイン. このプラグインはレスポンシブなテーマでも機能するため、すぐに確認する必要があります.

次は何ですか?

あなたはできる を見つける 上記のWooCommerce PWAのデモはこちら.

現在ベータ版に取り組んでおり、ロードマップの一部を以下に示します。

  • オフラインモード機能を追加する
  • プッシュ通知を追加する
  • チェックアウトプロセスを完了する

自分のニーズに合わせて貢献またはカスタマイズしたい場合は、eコマースプログレッシブウェブアプリケーションのアルファ版を見つけることができます GitHubで.

PWAデモ

Progressive Web Appsと、モバイルWordPressランドスケープでの役割についてどう思いますか?次のプロジェクトでこのパスをたどることを検討していますか?

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Karol Kによるレイアウトとプレゼンテーション.

著者について:アレクサンドラアンヘルは共同創設者でCTO Appticles.com –プログレッシブウェブアプリを構築するためのプラットフォーム。プラットフォームの拡張として、AppticlesにはWordPressプラグイン(WordPressモバイルパック)100万ダウンロードを超えています。 Alexandraはフルスタック開発者です。彼女は、Startupbootcamp(コペンハーゲン/デンマーク)とProsper Women Accelerator(セントルイス/米国)の2つのビジネスアクセラレータに参加しました。 2017年の初めに、彼女は共同創設者としてCodetteに参加しました.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map