Reddit PWA：主要なソーシャルメディアがWebアプリをどのように活用しているか

公開: 2022-06-16

新しいテクノロジーの採用は、オンラインビジネスの革新と成長の必然的な部分です。一般的に、大企業は最新のガジェットを簡単に体験でき、顧客満足度を高め、競合他社との差別化を図ります。 PWAは、Reddit PWA、Facebook PWA、AlibabaPWAなどの多数の巨大ブランドに採用されている次の大きなものになります。

そうは言っても、PWAは、最新のWebサイトの新しい標準であり、ネイティブアプリに取って代わる有望なプレーヤーと見なされています。それでも、それは中小企業や新興企業にとって信じられないほど手頃な価格です。今日のケーススタディでは、最初にReddit PWAに飛び込み、この人気のソーシャルメディアサイトがPWAをどのように活用しているかを見ていきます。

コンテンツ

Redditの概要

Redditは、バージニア大学のSteveHuffmanとAlexisOhanianによって2005年に設立されました。その名前は、他の人が物語を共有したいときの「私はそれを読んだ」という応答の微調整でした。

これは、ユーザーがソーシャルニュース、フォーラムディスカッション、Webコンテンツ、または収集されたネットワークなど、さまざまなコンテンツタイプで投稿を送信できる大規模なプラットフォームです。これは、Redditを人気のあるものにしている理由の一部であり、ほとんどすべての学習分野で知識に関する議論が蓄積されています。

さらに、Redditを使用すると、質問をするときに匿名のままでいることができ、脳が切望する情報を閲覧するためのオープンでエキサイティングな体験の余地が生まれます。

Redditの投稿はコミュニティによって決定されます。投稿またはサブレディットは、ユーザーがそれを有用であると見なす方法に基づいて賛成した場合にのみ上に移動できます。このようにして、スパムや有害で誤解を招く情報を減らすことができます。

彼らの主なターゲットオーディエンスは、大学の学部生、インターネットに精通したフェロー、および18〜29歳のソーシャルメディアの支持者です。彼らは、米国で10番目に人気のあるソーシャルネットワークにランク付けされ、月間アクティブユーザー数は約4800万人、世界中で月間アクティブユーザー数は4億3000万人を超えています。

PWAの統合がブランドの成果向上にどのように役立つか

ユーザーエクスペリエンスの加速

多くのブランドがアプリの読み込み速度を上げるためにPWAに来ています。例としてUberPWAの場合を取り上げます。顧客が（ほとんどの場合）急いでUberを使用していることを知って、2Gの低速接続でも、3秒以内にロードできる小型で強力なUberPWAを作成しました。

ユーザージャーニーを加速すると、バウンス率が低下し、潜在的なコンバージョン率が向上します。最近の人々は、読み込みの遅いページを、いつでもドロップアウトする迷惑な映画を見ていると見なすことがよくあります。

ウォルマートはまた、読み込み時間が1秒改善されただけで、コンバージョン率はすでに2％増加したと考えました。

顧客価値を高める

PWAは、最初のページの読み込みを改善するだけでなく、ページと要素の間のスムーズでシームレスな遷移を作成します。つまり、オンサイトのユーザーエクスペリエンスも楽しいものになります。

eコマースストアやマーケットプレイスの場合、顧客がページに長く滞在するほど、提供されたアイテムに興味があることを意味します。同時に、まとめて買い物をする傾向がある人は、買い物の旅が簡単で速いと感じます。

PWAは、重要な時期にプッシュ通知を有効にすることができるため、エンゲージメントのために頻繁なユーザーと再接続し、オンラインビジネスにより多くの価値をもたらします。

オンラインをぼかす–オフライン距離

オフラインで作業する機能を備えたPWAを使用すると、ユーザーはロードされたページを閲覧することで、外出先でも未完成のオンラインジャーニーを続けることができます。

また、コンテンツに変更を加えることもでき、接続が再適用されたときに最も近い同期のためにすべてがバックグラウンドで保存されます。

すべてのデバイスが同じように動作します

中小企業は、PWA統合のコストを節約しながら、他の重要な投資に予算を割り当てることができます。

任意のデバイスに対してのみ1つのクイックアプリを作成する必要があるため、すべてのオンラインプレゼンスで一貫したパフォーマンスを維持し、顧客を引き付けて獲得するための時間とリソースを最大化できます。

これが、成長する企業が効率的に収益を増やす方法です。

PWA統合前のRedditの課題

Redditは、特にデスクトップを介して、ユーザーにアプリの使用を促すソリューションを常に望んでいました。彼らは、ユーザーがアプリに切り替えるのをほとんど楽にする方法を探していました。

データによると、アプリを使用する際の最大の欠点の1つは、ストレージを大量に消費することです。対照的に、PWAのインストールに必要なのは1MB未満です。

また、Redditのダウンロードプロセスは、その量が多いため、時間の無駄と見なされています。一部のRedditスレッドは、Redditが以前にPWAに取り組んでいて、機能を最適化していないのは驚くべきことだと述べています。

RedditPWAの成果

デザインについて

PWAはプラットフォーム間で同じルックアンドフィールを維持しますが、ブラウザごとにサポートが異なります。 3ドットのメニューを使用すると、MicrosoftEdgeではなくChromeを使用してWebからPWAを簡単にインストールまたはアンインストールできます。

「アプリをホーム画面にインストールする」などのポップアップサインは、ユーザーフレンドリーであり、訪問者がアプリの使用を奨励されるためになくてはならないものと考えられています。

機能について

読み込み速度：効率的に速くスムーズ
ページと要素の間の移行：シームレスでレスポンシブな、瞬時に表示される要素
ナビゲーションのしやすさ：拡張後のホバー効果を備えた典型的なドロップダウンコンテンツレイアウト、使い慣れた、直感的で簡単
各インタラクションのエンゲージメントレベル：全体的に満足のいくものです。読み込み中のコンテンツが後ですぐに表示されるようにRedditのロゴが表示される方法により、サイトはより高速に実行されているように見えます

RedditのようなPWAを構築する方法は？

RedditPWAのヒント

PWAコア要件をカバーしていることを確認してください。それは速く開始する必要がありますが、ユーザージャーニー全体を通して速くとどまる必要があります。 Reddit PWAは、最初の読み込みから最高の速度を示し、スクロールするとすべてのコンテンツが即座に表示されるため、応答性の高いユーザーエクスペリエンスが保証されます。

iOSのみで、ポップアップメッセージやPWAインストールの通知などの再エンゲージメント機能はAppleではサポートされていません。

最適な機能のために高度な開発を実践したい場合は、PWAがベストプラクティスと最新のWebAPIに基づいて構築されていることを知っておいてください。これらは、ビジネスの優先順位と特定の要求に応じて、独立して、または組み合わせて作業するために適用できます。

Reddit PWAは最初に速度の向上に焦点を合わせ、それ以外はすべて続きます。「モバイルアプリのパフォーマンスがどれだけ優れているか見てみましょう。アプリをダウンロードすると何が得られるか想像してみてください」と言っているようなものです。訪問者がスクロールした後、Redditは腕立て伏せを有効にして、ユーザーにアプリへの切り替えを促します。

ウェブサイトのモダンなエッジの外観を揃え、PWAの可能性を最大限に引き出すために、Googleはアジャイル戦略を優先することをお勧めします。これは、機能ごとに機能を起動し、コンボが機能するかどうかを確認することです。

この観点から、市場の反応を段階的に維持することができます。追跡されたデータを分析することで、ユーザーが最も使用したい機能と価値をもたらさない機能を知ることができます。

これらの入力は、Webデザイナーと開発者がそれに応じて調整するために不可欠です。 PWAによって生成される余分なお金を増やすのに役立つ適切なプロセスを実行するまで、試行錯誤のプロセスを続けてください。

PWA開発の簡単な紹介

セットアップ

アプリディレクトリを作成し、ここにjs、CSS、および画像のサブディレクトリを入力します。

アプリインターフェイスのマークアップを作成する

このステップでは、JavaScriptが無効になっているかどうかに関係なく、PWAがコンテンツを表示できる必要があります。このようにして、接続が途絶えたり遅れたりするたびに、ユーザーが邪魔な空白のページに直面することはありません。

代わりに、すべてのインタラクションは応答性が高く、さまざまな画面で正しく表示される必要があります。これには、モバイルフレンドリーな向きを考慮する必要があります。

アプリのテスト

ブラウザで問題が発生したらすぐに、GoogleのLighthouseでテストして、PWA標準に対するパフォーマンスを確認できます。

公開サイトで開いているChromeの開発者パネルのF12を押し、[監査]タブを見つけて、[Lighthouse]をクリックします。

サービスワーカー

この強力な機能は、ユーザーの操作とは別にバックグラウンドで実行される比較的独立したWebスクリプトであるため、PWAがネットワーク要求をインターセプトしたり、ローカルキャッシュを有効にしたりすることができます。

アプリマニフェスト

PWAがホーム画面でどのように表示され、動作するかを決定するには、サービスワーカーにアプリマニフェストが必要です。名前、アイコン、テーマの色、アプリの向きを設定できます。

要約

コードはこのフェーズまで完了していますが、アプリをWebサーバーにアップロードする必要があります。これにより、PWAがHTTPSのセキュリティの下で動作できるようになります。

TigrenによるeコマースのためのプレミアムPWA開発

当社の専門知識

10年の歴史を持つプロのMagentoサービスプロバイダーとして、Tigrenは現在世界でトップのアウトソーシングエージェンシーの1つです。

それはすべて、クライアントの目標を達成するために努力する、高度に訓練された、熟練した、献身的な開発者の小さなチームから始まりました。今日まで、800を超えるグローバルSMBに対して1000を超えるプロジェクトを実行してきました。

ベトナムに拠点を置く私たちは、可能な限りリーズナブルで手頃な価格で、彼らが値する世界クラスのMagentoeコマースプロジェクトで多くの意欲的なビジネスオーナーを支援したいと考えています。

私たちのサービス

私たちは、SMBに持続可能な成長ソリューションをもたらすことを目指しているMagentoの専門機関です。 PWAでは、次の2つのプレミアムサービスを提供しています。

カスタムプログレッシブウェブアプリの開発
プレミアムティグレンPWAテンプレート

重要なポイント

PWAは、ネイティブアプリと通常のウェブサイトの適切な組み合わせであり、エンドユーザーに真の価値をもたらします。

専門家は、それがデジタル世界、特にeコマースの次の大きなものになるだろうと予測しています。うまくいけば、Reddit PWAのこのケーススタディを学ぶことで、顧客を支援し、おそらくPWAの早期採用者の1人になるサイトを革新する方法のアイデアを得ることができます。