プログレッシブウェブアプリ:ウェブ開発の未来?

公開: 2016-10-17

プログレッシブウェブアプリケーションサービスワーカーは比較的新しい概念であり、ウェブサイトとモバイルアプリの現在のエコシステムを現在混乱させているものの中核部分です。 このテクノロジーはGoogleに支えられているため、コンバージョン率が大幅に上昇し、バウンス率が低下しています。 サービスワーカーとプログレッシブウェブアプリの詳細、およびそれらがモバイルアプリケーションや従来のウェブサイトとどのように異なるかをご覧ください。

Service Workerは、単に「SW」と呼ばれることもあり従来のWebサイトのページやスクリプトと一緒に実行される独立したスクリプトとしてコード化されていますが、インターネット上のWebサイトにある通常のJavaScriptと比較して新しいエキサイティングな機能を備えています。

オフライン機能、プッシュ通知、フルキャッシュ、およびスマートフォンやその他のデバイスのハードウェアAPIに接続する可能性が追加されたオプションは、開発者の創意工夫とデザイナーの創造性によってのみ制限されます。 従来のウェブサイト技術と同時にサービスワーカーを使用することには多くの利点がありますが、ビジネスオーナーの観点から新たなトレンドを見ていきます。

プログレッシブウェブアプリを使用する理由

  • ウェブサイトやモバイルアプリの速度と比較して速度を向上させる
  • ページサイズを小さくする
  • オフライン機能
  • 特定のハードウェアデバイスへのアクセス
  • プッシュ通知
  • ホーム画面に追加します

上記は、ビジネスオーナーがサービスワーカープログレッシブウェブアプリを既存のウェブサイトに実装する6つの最も一般的な理由のリストです。 それらを分解して、6つの重要なポイントのそれぞれについてさらに詳しく見ていきましょう。

速度とコンバージョン率を向上させる

サービスワーカーはブラウザとインターネットアクセスの間で機能するため、たとえば、訪問者が新しいページを要求したり、リンクをクリックしたりするたびに、Webサイトの訪問者がWebサーバーに応答を求める必要はありません。

インターネットプロトコルの動作方法により、ネットを通過する各応答には最小限の時間がありますが、Service Workerスクリプトを使用すると、Service Workerスクリプトがページを提供するため、この手順を省略できる場合があります。次のトピックで説明するローカルキャッシュ。

たとえば、Housing.comは、プログレッシブWebアプリService Workerスクリプトを実装して以来、ページの読み込みが30%速くなり、インドに拠点を置いているため、訪問者の大多数が3Gネットワ​​ークから閲覧しているため、すばらしい結果が得られています。したがって、非常に重要です。

もう1つの例は、ナイジェリアの大手eコマース小売業者であるKongaで、訪問者の60%以上が低速の2Gネットワ​​ークから閲覧しているため、ページの読み込み時間を短縮することで、コンバージョン率とバウンス率が大幅に向上しただけでなく、同様に重要なのは、彼らは競争を深い眠りに追いやったことです。

ページサイズを小さくする

上記のポイントと密接に関連して作業する場合、サービスワーカーを使用すると、間違いなくWebサイトのページサイズが小さくなり、バウンス率が低下します。

このような改善が見られる理由は、サービスワーカーが、訪問者の電話やタブレットにWebサイトのコピーを保存するためです。 つまり、サービスワーカーがインストールされ、キャッシュを自動的にアップロードするように設定されたWebサイトのホームページにアクセスすると、インターネットをまったく使用する必要がなくなります。

すでにアクセスしたページをServiceWorkerに保存させることもできますが、キャッシュのダウンロードはユーザーには表示されないため、ユーザーにすべてをダウンロードさせるのは理にかなっています。

今のところ、一部の企業は、Service Workerをインストールすると、ページサイズが最大90%縮小されたと報告しています。

オフライン機能

ユーザーがページを閲覧したりコンテンツを読み込んだりするためにインターネットにアクセスする必要がないように完全に機能するサービスワーカーを使用してWebサイトを開発することが可能です。 いくつかの要件がありますが、一度満たされると、Service Workerはオフラインとオンラインのエクスペリエンスをシームレスに統合できるようになり、現在のWebサイトにゲームを変える追加機能と見なされます。

すべてのWebサイトが完全なオフラインエクスペリエンスを必要とするわけではありませんが、Operaのようにオフライン画面を追加するだけで、閲覧中にインターネットアクセスが失われたときにユーザーがページに留まる可能性が高くなります。

デフォルトのブラウザのオフラインメッセージを、Operaが以下で作成したカスタマイズされたオフラインメッセージと比較し、違いを感じてください。

OperaのオフラインWebサイト機能

Operaプログレッシブウェブアプリオフラインページ

Chromeのデフォルトのオフラインページ

デフォルトのChromeオフラインエラーメッセージ

特定のハードウェアデバイスへのアクセス

モバイルアプリケーションと同様に、サービスワーカーに関連するプログレッシブウェブアプリは、モバイルカメラ、加速度計、その他の一般的な機能などのハードウェアデバイスに対してAPI呼び出しを行うことができます。 これまでのところ、指紋認証や同様の新しい複雑な機能などの高度な機能はサポートされていませんが、それはおそらく時間の問題です。

モバイルアプリの開発は常に特定の種類のビジネスや製品に関連していますが、ウェブサイトが提供する使いやすさとインストールのしやすさを備えたモバイルアプリのエクスペリエンスを提供するプログレッシブウェブアプリが今日オンラインですでに数多く存在しています。

しかし、テクノロジー自体は執筆時点で約1年前(2015年後半に開発された)であり、すべての中小企業の所有者が参加したいと思う最もホットなテクノロジーになる機会がたくさんあります。

プッシュ通知

これらのハードウェア機能の1つは、プッシュ通知であり、Webサイトの所有者がモバイルユーザーに最新のコンテンツについて知らせることができます。 企業にとって、顧客の通知フィードにアクセスすることは、ビジネスにとって大きな恩恵となる可能性があります。

電子メールのニュースレターとは異なり、人々は自分の携帯電話で直接プッシュ通知を開いてクリックする傾向があります。ユーザーはどのアプリがマーケティングや記事広告のコンテンツをプッシュしているかを知るため、この傾向は時間とともに変化する可能性がありますが、今のところ非常に効果的です。

これまでのところ、アフリカのeコマースサイトであるJumiaは、プログレッシブWebアプリとプッシュ通知で大きな成功を収めています。 彼らは、放棄されたカートにあるものを購入したいかどうかをユーザーにメールで送信する従来の方法と比較して、放棄されたショッピングカートのコンバージョン率が9倍高いと報告しています。 Jumiaは、プッシュ通知のオープン率も38%であり、これは非常に印象的であると言わなければなりません。

ホーム画面に追加します

これは私たちのリストの最後ですが、少なくともではありません。 お気に入りのウェブサイトを携帯電話のブックマークに追加し、デバイスにアイコンを表示するのは目新しいことではありませんが、プログレッシブウェブアプリを使用すると、ユーザーはブラウザからPWAをホーム画面に追加するかどうかを確認するメッセージが表示されます。 これはブラウザ自体によって行われ、Webサイト上の派手なポップアップオーバーレイでは行われないため、人々はこの機能で素晴らしい結果を報告しています。

add_to_home_screenプログレッシブウェブアプリのプロンプト

これは、ChromeまたはOperaを使用して携帯電話からワシントンポストにアクセスしたときの外観です。

FlipKartでは、ユーザーがホーム画面からアプリを開いた場合のコンバージョン率が70%増加しました。つまり、アプリをインストールしたユーザーは、問題のウェブサイトを購入して利用することを熱望している忠実な顧客であると言えます。

結論

そこにあるすべてのWebブラウザーがプログレッシブWebアプリサービスワーカーをまだサポートしているわけではありませんが、おそらくそれは時間の問題です。 Internet Explorerを搭載したMicrosoftは、テクノロジーの将来の実装についてはかなり曖昧であり、おそらくこれが短期間のトレンドであるかどうか、またはこれが私たちが知っているようにWebに革命をもたらすかどうかを確認するのを待っています。

Apple with Safariは、サービスワーカーの互換性を5年間のロードマップに追加したため、サービスにプラスの影響が見られれば、このテクノロジーをリストの一番上に置く可能性は十分にありますが、まだまだ時間があります。労働者が持っています。