WordPressサイトをPWAに変換する：トレンドに合わせて

公開: 2021-02-17

PWAムーブメントは、非常に変化し、記念碑的なムーブメントであるため、巨大な波のようになり、テクノロジーの世界を席巻し、その道のすべてをより良い方向に変えます。

世界で最も影響力のあるブランドのいくつか、つまり有名なTwitter Liteを備えたTwitterは、PWAを将来の開発の基盤として正式に確立しました。

 おすすめの読み物：インスピレーションを得るための12のプログレッシブウェブアプリの例

WordPress、より具体的にはAutomattic – WordPressの背後にいる人々は、プログレッシブテクノロジーをWordPressなどのプラットフォームのワークフローに統合する進行中の作業を発表することにより、Chrome DevSummit2017でWordPressPWAの動きを開始しました。

それ以来、WordPressの状況は大きく変化したため、WordPressをPWAに変換しないと、視聴者の満足度がほぼ確実に失われます。

PWAを理解する

グーグルが言ったように、プログレッシブウェブアプリは

信頼性–ネットワークの状態が不確実な場合でも、即座にロードし、ダウンサウルスを表示することはありません。
高速–滑らかで滑らかなアニメーションを使用し、ぎくしゃくしたスクロールを行わずに、ユーザーの操作にすばやく応答します。
魅力的–没入型のユーザーエクスペリエンスを備えた、デバイス上の自然なアプリのように感じます。

簡単に言えば、PWAはWebブラウジング体験の未来です。 PWAの詳細については、記事「PWAとは」をご覧ください。

なぜWordPressのPWAなのか？

Webページが読み込まれるのを待って視聴者を飽きさせたくない場合を除いて、サイトのパフォーマンス、機能、およびUXが向上したソリューションが常に優れた選択肢です。

たとえば、有名なTwitterLiteを見てください。ケーススタディによると、TwitterはTwitter Liteのリリースにより、ユーザーの行動に大きな変化をもたらしました。

TwitterLiteのエンジニアリングリードであるNicolasGallagherは、次のように述べています。

Twitter Liteは、Twitterを使用するための最も速く、最も安価で、最も信頼できる方法になりました。 Webアプリは、ネイティブアプリのパフォーマンスに匹敵しますが、Android用Twitterと比較して、デバイスのストレージスペースの3％未満しか必要としません。

そして、この動きに参加したのはTwitterだけではなく、Spotifyなどの大手ブランドも最近のSpotifyPWAの開発で参加しました。 PWAがもたらす変化に関する統計とニュースはいたるところにあり、無視するにはほとんど大きすぎるため、PWAを活用したWebの未来を主張することはこれまで以上に現実的であるように思われます。

WordPressでPWAを設定するための前提条件

プログレッシブウェブアプリでは、WordPressウェブサイトが安全なオリジンから提供される必要があります。つまり、ウェブサイトはHTTPではなくHTTPSである必要があります。
WordPressバージョン：3.5.0以降
PHPバージョン：5.3以降

WordPressサイトをPWAに変換する方法

前述の前提条件が満たされると、WordPressサイトの所有者は、手動またはプラグインを使用する2つの方法のいずれかを使用してPWAに変換することを選択できます。

1.PWAを手動で開発する

PWAの開発は、他のタイプの開発よりもコストがかからないにもかかわらず、一般的なJavascriptフレームワークとライブラリ（特にAngularとReact）を理解するために、かなりの量のコーディング知識とその開発者を必要とします。 PWAを構築するプロセスは簡単ではないため、経験の浅いサイト所有者がプラグイン（無料および/または有料のもの）を試すか、プロの開発者を雇うことがしばしば推奨されるのはこのためです。

PWAを手動で作成する場合は、Googleのプログレッシブウェブアプリのチェックリストに従い、Lighthouseツールに対してウェブページをテストして、最高のユーザーエクスペリエンスを実現することを忘れないでください。

2.プラグインを使用

開発者以外のサイト所有者は気にしないでください！ WordPressは、ユーザーが選択するための手間のかかる作業のほとんどを実行するさまざまなプラグインを提供します。これらのプラグインには、無料プラグインと有料プラグインの2種類があります。

無料のプラグイン

1. SuperPWA

WordPress用の無料のPWAプラグインのトップには、優れたサービスと品質という長年の伝統を持つSuperPWAがあります。

SuperPWAは簡単に構成でき、プログレッシブWebアプリのセットアップに1分もかかりません。 SuperPWAは、作成したすべてのデータベースエントリとファイルを削除することにより、クリーンアンインストールを実行します。実際、最初に手動で保存するまで、デフォルト設定はデータベースに保存されません。

アクティブインストール： 30000以上
星評価：★★★★★

2. PWA

PWAは、テーマとプラグインのPWAビルディングブロックと調整メカニズムを提供して、車輪の再発明を行わず、相互に競合しないようにすることを目的としています。

Service Workerを含むプラグインまたはテーマを開発している場合は、このPWAプラグインに依存することを検討するか、少なくともPWAプラグインが利用できない場合のフォールバックとして組み込みの実装のみを使用してください。

最終更新日： 5か月前
アクティブなインストール： 20,000以上
星評価：★★★★

3.WPおよびAMPのPWA

無料で提供されるPWAforWP＆AMPは、その機能に優れています。それは良い、使いやすい、そして卓越した顧客サービスを提供します。ただし、そのドキュメントは少し不足していると感じており、すべてを機能させるのに苦労する可能性があります。
アクティブなインストール： 8,000以上
星評価：★★★★★

4. WebSuite PWA

WebSuite PWAは、AMPサポートが統合されたPWAにWebサイトを変換するための完全なプラグインです。プラグインには、PWAにアプリのような外観を与えるためのさまざまなテーマが付属しており、ホーム画面に追加、プッシュ通知、CDN、分析統合などの多くの機能があります。

アクティブなインストール： 30以上

星評価： ★★★★★

5.WebkulによるWordPress用のシンプルなPWA

たった49ドルで、WordPressサイトをすべての機能と特典を備えた完全に機能するPWAに変換できますが、それだけではありません。プラグインはすべてのWordPressテーマと互換性があり、さらに、多くの労力や技術的な知識を必要とせずに、管理バックエンドからテーマ、アプリケーション名、およびアプリケーションアイコンを変更できます。

アクティブなインストール：情報は利用できません

星の評価：情報は利用できません

PWAプラグインをインストールする方法

WordPress PWAプラグインのインストールプロセスは、非常に簡単で合理化されています。以下では、例としてSuperPWAを使用します。

WordPressのインストール：

WordPress管理>プラグイン>新規追加にアクセスします
「スーパープログレッシブウェブアプリ」を検索
「今すぐインストール」をクリックしてから、「アクティブ化」をクリックします。スーパープログレッシブウェブアプリ

手動でインストールするには：

super-progressive-web-appsフォルダーをにアップロードしますサーバー上の/wp-content/plugins/ディレクトリ
WordPress管理>プラグインに移動します
リストからSuperProgressiveWebAppsプラグインをアクティブ化します。

結論

このPWAの動きはすぐに減速しているようには見えません。最善の策は、遅れをとる前に今すぐ行動を起こすことです。

あなたが技術に精通していて、あなたとあなたのサイトのためにより多くの自由を望んでいるなら、PWAの手動開発はあなたにとって好ましいオプションであるべきです。ただし、それほど経験がなく、より安全で試行錯誤された方法を望んでいるサイト所有者にとって、WordPress用のPWAプラグインはそれほど悪い考えではありません。プラグインを使用すると、PWAを構築するプロセスを処理する際の時間と時折の頭痛の種を節約できるため、リソースの割り当てを改善できます。

参考文献：

Magento PWA Studio：Vueストアフロントとの詳細な比較

Magento WordPress統合：ステップバイステップガイド