デスクトッププログレッシブウェブアプリ:大きな進歩

公開: 2019-09-10

目次

プログレッシブウェブアプリ(PWA)について話すとき、モバイルアプリケーションが最初に頭に浮かぶのは、常にそうだったからです。

 推奨読書:プログレッシブウェブアプリとは

しかし、時が経つにつれて、PWAイニシアチブを備えたChromeなどの主要なブラウザがデスクトップ市場に参入し、PWAの無限の可能性をさらに拡大しています。

Chrome 70以降、ユーザーはWindowsとLinuxにデスクトッププログレッシブウェブアプリをインストールできるようになりました。 インストールすると、[スタート]メニューから起動し、アドレスバーやタブなしで、インストールされている他のすべてのアプリと同じように実行されます。

Instagramでこの投稿を見る

プログレッシブウェブアプリ(PWA)は、ネイティブアプリケーションとほとんど区別がつかないため、アプリのような機能を備えたWebの未来であり、その1つは、Webエクスペリエンスに革命をもたらす可能性のあるインストール(ホーム画面へのPWAの追加)機能です。 ?SimiCartを使用して今日PWAを構築します。 。 。 #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsum​​mit#chromedevsum​​mit2019

SimiCart(@ simicart.official)が共有する投稿

そしてそれはそれだけではありません。 ハイブリッドPWAMicrosoftStoreの基盤は、段階的にレイアウトされています。MicrosoftStoreでは、プログレッシブWebアプリがネイティブWindowsアプリケーションと同等になり、Windows10のインストールベース全体である7億近くにまで拡大しています。アクティブな月間ユーザー。

デスクトップPWAとそれが非常に重要である理由を理解する

プログレッシブウェブアプリなどすべての特典を備えたデスクトッププログレッシブウェブアプリは、着実にデスクトップアプリ開発トレンドになりつつあります。

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

デスクトップPWAを簡単に理解すると、デスクトップPWAは、Webコンポーネントを利用して機能するオンラインドキュメントGoogleドキュメントのようなものであると想像できます。 一方、ネイティブデスクトップアプリケーションはMicrosoft Wordに似ています。優れており、サイズが少しあり、スムーズに動作するように設計されています。 デスクトップPWAが現在注目を集めている理由はデスクトップPWAがネイティブデスクトップアプリケーションの仕事をはるかに魅力的なエクスペリエンスで実行でき、ハードディスクのスペースをほとんどまたはまったく占有しないためです。

要約すると、デスクトップPWAは次のとおりです。

  • 高速– PWAは、迅速で応答性が高く、全体的に楽しいエクスペリエンスを提供します
  • インストール可能– PWAは、他のネイティブアプリと同じようにインストールでき、ブラウザーを必要とせずにデスクトップまたはホーム画面に表示できます。 PWAのインストールは常に瞬時に行われ、パッケージサイズは小さくなります。
  • 魅力的– PWAは、ネットワークの状態やデバイスの機能に関係なく機能しながら、高品質のUXとUIに最適なガイドラインを採用しています。

デスクトップPWAの最も顕著な例は、 TwitterLiteです。 Twitterは、モバイルユーザーを念頭に置いて作成されていますが、デスクトップユーザーとのやり取りが目覚ましい成長を遂げました。

セッションあたりのページ数が65%増加

送信されるツイートが75%増加

バウンス率が20%減少

PWA運動の初期段階を示す最初のショットは確かにTwitterによって発射されました。 これに続いて、SpotifyやPinterestなどの影響力のあるブランドが急いでおり、並外れた製品品質もあります。

デスクトップSpotifyとPinterestPWA

見逃した方のために、SpotifyPWAの徹底的なレビューをここに掲載します。 Spotify PWAは、他の製品よりも際立っており、ユーザーエクスペリエンスを大幅に変更し、音楽プレーヤーのように、よりパーソナライズされ、ユーザーのニーズに適応できるように改良されています。

SpotifyPWAの適応背景色

Pinterestも、コアビジネス指標でいくつかの前向きな改善を経験しました。

費やした時間は、古いモバイルWebエクスペリエンスと比較して40%増加し、ユーザー生成の広告収益は44%増加し、コアエンゲージメントは60%増加しています。

彼らの新しいモバイルWebエクスペリエンスは、以前のWebサイトのモノリスへのステップアップです。

JavaScriptから数百KBを分割して削減しただけでなく、コアバンドルのサイズを650KBから150KBに削減しただけでなく、主要なパフォーマンス指標も改善しました。 First Meaningful Paintは4.2秒から1.8秒に短縮され、Interactiveまでの時間は23秒から5.6秒に短縮されました。

Pinterest PWAの特定のケーススタディに関心のある読者には、この記事を強くお勧めします:Pinterestプログレッシブウェブアプリのパフォーマンスのケーススタディ。

PinterestのPWA統計
出典: PWAstats

プログレッシブウェブアプリをデスクトップにインストールする方法

デスクトッププログレッシブウェブアプリをインストールするプロセスは非常に簡単で合理化されています。 最も重要な手順は、アプリの正しいPWAアドレスを見つけることだけです。

今日のチュートリアルでは、デスクトップPWAの例としてTwitterを使用します。

ステップ1Google Chromeバージョン70以降を使用して、https://mobile.twitter.com/homeにアクセスします。

手順2 :アドレスバーの右端に(+)ボタンがあるかどうかを確認します

TwitterPWAインストールアプリのポップアップ

または、ドロップダウンメニューに「 Twitterのインストール」オプションがある場合

TwitterPWAインストールオプション

ステップ3 :[インストール]をクリックすると、プロセスはすぐに終了します。

ステップ4 :新しくインストールしたPWAをデスクトップから起動します。

デスクトップ-twitter-icon
デスクトップTwitterアイコン

デスクトップにプログレッシブウェブアプリをアンインストールする方法

関心のないユーザーの場合、デスクトップPWAアイコンを削除することは、PWAをアンインストールするための1つの許容可能な方法です。 ただし、PWAをアンインストールするより確実な方法を探しているユーザーには、以下の手順をお勧めします。

ステップ1 :デスクトップPWAを開きます(この場合はTwitterです)

ステップ2 :ドロップダウンメニューで「 Twitterのアンインストール…」を選択します

TwitterPWAアンインストールオプション

ステップ3 :提案されたオプションをオンまたはオフにして、最後に「削除」をクリックします

TwitterPWAアンインストールポップアップ

以上です! これで、Twitter PWAは、いくつかの簡単な手順でコンピューターから完全に削除されました。

おわりに

デスクトップPWAは、間違いなくWebアプリの相互作用と機能における次の革新的なステップです。 競合他社に先んじるために、企業は今すぐPWAの動きを受け入れ、Web/アプリ開発の変化する傾向に注意を払う必要があります。

万能の完璧なMagentoプログレッシブウェブアプリソリューションを探しているオンラインマーチャントのために、ここSimiCartであなたとあなたの店のための完全なパッケージを提供します。

SIMICARTでPWAを構築する