プログレッシブウェブアプリとは何ですか？

アプリが携帯電話を支配します。長い間、アプリはデスクトップやブラウザに同じように影響を与えることはありませんでした。それは近年変わった。プログレッシブウェブアプリ（PWA）は成長を続けており、あらゆる種類のウェブサイトとのやり取りを変えています。

しかし、プログレッシブWebアプリとは正確には何ですか？ PWAは、Webサイトが実行しないことを実行しますか？プログレッシブウェブアプリについて知っておくべきことは次のとおりです。

プログレッシブウェブアプリとは

プログレッシブウェブアプリは、ユーザーに通常のサイトを提供しますが、ネイティブモバイルアプリとして表示されるウェブアプリケーションです。 PWAは、両方の開発分野の進歩を最大限に活用して、ネイティブモバイルアプリの使いやすさを最新のブラウザ機能セットに取り入れようとしています。

では、PWAを定義するものは何ですか？

• ユニバーサル ：PWAは、ブラウザに関係なく、すべてのユーザーに対してシームレスに（ほぼ）機能する必要があります。
• レスポンシブ ：PWAは、ラップトップ、タブレット、スマートフォンなど、あらゆるデバイスで機能する必要があります。
• デザイン ：デザインはネイティブモバイルアプリを模倣する必要があります。つまり、高度な機能のためのシンプルな双方向性を備えた、合理化された、見つけやすいメニューを意味します。
• 安全 ：PWAは、ユーザーデータを安全に保つためにHTTPSを使用する必要があります。
• 検出可能： ユーザーはPWAを見つけることができ、それらは（「サイト」ではなく）アプリケーションとして簡単に識別できます。
• エンゲージメント： PWAは、プッシュ通知などのネイティブエンゲージメント機能にアクセスできる必要があります。
• 更新： PWAは最新の状態に保たれ、最新バージョンのサービスまたはサイトを提供します。
• インストール： ユーザーがアプリストアを必要とせずに、ホーム画面にPWAを簡単に「インストール」できるようにします。
• 共有： PWAは、インストールせずに、共有するために単一のURLのみを必要とします。

ご覧のとおり、PWAは、ネイティブアプリの合理化された機能とインターフェースデザインを使用して、ユーザーに完全なWebサイトエクスペリエンスを提供することを目的としています。

プログレッシブウェブアプリはどのように機能しますか？

プログレッシブウェブアプリの鍵はブラウザサービスワーカーです。

Service Workerは、ブラウザのバックグラウンドで実行されるスクリプトであり、「Webページから分離して、Webページやユーザーの操作を必要としない機能への扉を開きます」。現時点では、プッシュ通知やバックグラウンド同期などのサービスワーカーを使用することもできますが、PWAの当面の将来は、これらのスクリプトに大きな力を与えます。

そのため、サービスワーカーは、ほぼ瞬時の結果を得るためにWebキャッシュを使用して、PWA標準の基盤を形成します。

Service Workerが登場する前は、ブラウザのキャッシュスクリプトはApplication Cache（またはApp Cache）でした。 App Cacheは、オフラインファーストのさまざまなサービスで機能しますが、エラーが発生しやすくなりました。さらに、A List Apartが説明しているように、AppCacheにはいくつかのよく知られた制限があります。

しかし、開発者にとっての主な問題は、AppCacheがどのように機能するかを直接操作できないことであり、問​​題が発生したときに開発者が正確に修正するのを妨げます。同様に、完全なオフライン機能を備えたWebサイトとサービスは危険な選択でした。

ただし、サービスワーカーは、アクションが必要な場合にのみ存続します。 PWAでは、何かをクリックしたり機能を使用したりすると、サービスワーカーが行動を起こします。 Service Worker（スクリプトであることを忘れないでください）はイベントを処理し、オフラインキャッシュがリクエストを完了できるかどうかを判断します。アイデアは、PWAが選択できる複数のオフラインキャッシュがあり、はるかに幅広いオフライン機能を提供することです。

さらに、キャッシュはオフラインの速度を上げるためだけのものではありません。たとえば、PWAに向かいますが、接続は非常に不安定です。 Service Workerは、エクスペリエンスを中断することなく、完全に機能する以前のキャッシュを提供します。

プログレッシブウェブアプリブラウザのサポート

プログレッシブウェブアプリを使用するには、互換性のあるブラウザとPWA対応サービスの2つの要件があります。

まず、ブラウザを見てみましょう。 PWAブラウザのサポートを確認するには2つのオプションがあります。 1つ目は、ジェイク・アーチボルドの「サービスワーカーの準備はできていますか？」です。主要なブラウザのPWA対応ステータスとSamsungインターネットを手軽に表示します。

PWAブラウザサポートの詳細については、ブラウザのバージョンごとにさまざまなWebおよびブラウザテクノロジの実装を一覧表示することを専門とするWebサイトであるCanIUseを確認してください。たとえば、検索バーに「サービスワーカー」と入力すると、各ブラウザがPWAサービスワーカーを実装したバージョン番号を示すテーブルが表示されます。

Can I Use Service Workersテーブルは、主要なブラウザがすべてPWAをサポートしていることを確認します。また、いくつかの代替デスクトップブラウザとモバイルブラウザに対するPWAのサポートも示しています。

もう少し詳しく説明します：

• デスクトップブラウザ（フルサポート）： Chrome、Firefox、Opera、Edge、Safari
• デスクトップブラウザ（部分サポート/古いバージョン）： QQブラウザー、Baiduブラウザー
• モバイルブラウザ（フルサポート）： Chrome、Firefox、Safari、UCブラウザ、Samsungインターネット、Mintブラウザ、Wechat
• モバイルブラウザ（部分サポート/古いバージョン）： QQブラウザ、Androidブラウザ、Opera Mobile

したがって、主要なブラウザはすべてPWAをサポートしています。 Microsoft EdgeとSafariは、完全なサポートリストに最近追加されたものです。逆に、QQブラウザとBaiduブラウザはどちらも古いバージョンを使用しているため、第2層に分類されています。

プログレッシブWebアプリを見つけてインストールする方法

使用するブラウザがわかったので、PWAの検索とインストールについて考えることができます。この例では、SamsungGalaxyS8とGoogleChromeを使用します。

プログレッシブウェブアプリはいたるところにあります。多くの企業は、プログレッシブWebアプリバージョンを提供するためにサイトとサービスを適応させています。多くの場合、ホームページまたはモバイルサービスサイトにアクセスすると、最初にPWAに遭遇し、ホーム画面に追加がトリガーされます。 ダイアログボックス。

以下のビデオをチェックして、Twitterモバイルサイトにアクセスするとどうなるかを確認してください。

もちろん、無数のサイトにアクセスして、ホーム画面のトリガーを確認することは役に立ちません。実際、それは実に時間がかかります。ありがたいことに、PWAのカタログ化を専門とするサイトがいくつかあるので、そうする必要はありません。

まず、outwebを試してください。かなりまともな範囲のPWAがリストされており、新しいオプションが頻繁に表示されます。次に、pwa.rocksを試してください。選択肢は少なくなりますが、デバイスに追加したい便利なPWAがいくつかあります。

さらに、2019年1月、Android向けChrome72にはTrustedWeb Activity（TWA）が同梱されました。 TWAを使用すると、Chromeタブをスタンドアロンモードで開くことができます。これにより、PWAをGooglePlayアプリストアで紹介できるようになります。 Google Playに表示される最初のいくつかのPWAは、Twitter Lite、Instagram Lite、およびGoogle Maps Goであり、時間の経過とともにさらに表示されるように設定されています。

プログレッシブウェブアプリはネイティブアプリに取って代わりますか？

プログレッシブウェブアプリは、ブラウザとネイティブモバイルアプリの優れたハイブリッドステップです。 PWAはネイティブアプリを完全に置き換えますか？それは私には難しいことです。 PWAは軽量製品としては優れていますが、現在主に既存のサイトやサービスの複製に重点を置いているため、ネイティブアプリに取って代わることはありません。

少なくとも、当面はそうではありません。

ただし、PWAは機能します。 PWAStatsで入手可能なデータもこれを裏付けています。 PWAが一般的に使用されるWebサイトとのやり取りをどのように変えているかを示す興味深い数字をいくつか示します。

• Trivagoでは、PWAをホーム画面に追加するユーザーのエンゲージメントが150％増加しました。
• ForbesのPWA「ホームページはわずか0.8秒で完全に読み込まれます」が、訪問あたりの表示回数は10％増加しています。 ForbesのPWAでも、ユーザーセッションの長さが2倍になりました。
• Twitter Liteでは、セッションあたりのページ数が65％増加し、ツイート数が75％も大幅に増加しました。また、「3Gで5秒未満」でインタラクティブになります。
• アリババはモバイルコンバージョンが76％増加しました。

PWAはまだ主流ではありません。ただし、デバイスのスペースを節約するなど、さまざまなメリットがあり、今後さらに多くのことを聞くことができます。