プログレッシブウェブアプリとは何ですか？どのようにインストールしますか？

プログレッシブウェブアプリとは何ですか？どのようにインストールしますか？

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





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



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

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





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

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

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



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

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

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



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

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



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

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

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

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

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

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

PWAブラウザサポートの詳細については、チェックアウトする必要があります 使ってもいいですか 、ブラウザのバージョンごとにさまざまなWebおよびブラウザテクノロジの実装を一覧表示することに特化したWebサイト。たとえば、検索バーに「サービスワーカー」と入力すると、各ブラウザーが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層に分類されました。

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

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

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

下のビデオをチェックして、訪問したときに何が起こるかを確認してください。 Twitterモバイルサイト 。

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

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

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

画像ギャラリー（2画像） 拡大 拡大 選ぶ

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

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

少なくとも、当分の間ではありません。

見つかったiPhoneをどうするか

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

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

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

共有 共有 つぶやき Eメール スピーチをアニメーション化するためのビギナーズガイド

スピーチのアニメーション化は難しい場合があります。プロジェクトにダイアログを追加する準備ができたら、プロセスを分解します。

次を読む 関連トピック 著者について ギャビンフィリップス（945件の記事が公開されました）

Gavinは、Windows and Technology Explainedのジュニアエディターであり、Really Useful Podcastの定期的な寄稿者であり、定期的な製品レビュー担当者です。彼は、デボンの丘から略奪されたデジタルアートプラクティスを備えたBA（Hons）現代ライティングと、10年以上のプロのライティング経験を持っています。彼はお茶、ボードゲーム、サッカーをたくさん楽しんでいます。

ギャビンフィリップスからもっと

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください