プログレッシブWebアプリ（PWA）：PWAとは何か、長所と短所、市場における主な例

admin

私たちは、ますます速く、ダイナミックで、変化し続ける世界に住んでいます。

  • パフォーマンス：日々使用するデバイスがますます高性能になり、より速く作業ができるようになりました。
  • パフォーマンス：ソフトウェア/ハードウェアの使用におけるあらゆる摩擦を排除するために。

    Progressive Web App (PWA) は、最新の Web 機能を使用して、ユーザーにネイティブ アプリと非常によく似た (よりよい) エクスペリエンスを提供するアプリです。 プログレッシブ」という用語は、新しい機能を導入し、ユーザー エクスペリエンスの観点から、最初は通常の Web サイトとして認識されるが、徐々にモバイル アプリのように動作する、とりわけマルチプラットフォームであるという事実を指しています。

    Pros and cons of the Progressive Web App

    The main features are:

    • Progressive – progressive improvement principles でベースが構築されているので、選択したブラウザにかかわらず、すべてのユーザーで機能する。
    • レスポンシブ – デスクトップ、モバイル、タブレット、または後から利用可能になるサイズなど、さまざまなスクリーンサイズに適応します。
    • アプリライク – 相互作用やナビゲーションにおいて、ネイティブアプリのようにユーザーと動作します。
    • セキュア – HTTPS プロトコルで公開し、接続による情報の表示やコンテンツの変更を防ぎます。
    • 検索可能 – 「アプリケーション」として識別され、検索エンジンにインデックスされます。
    • 再起動可能 – Web 通知などの機能により、アプリケーションを簡単に再起動させることが可能です。
    • インストール可能 – ユーザーが最も便利だと思うアプリを、アプリストアの使用に関連するすべての手順や問題に直面することなく、携帯端末の画面（ホーム画面）に対応するアイコンで「保存」できるようにします。
    • リンク可能 – 複雑なインストールをせずに URL で簡単に共有できます。
    • オフライン – もう一度、何よりもまずユーザーのことを考えて、弱い接続や接続できない場合の通常のエラーメッセージを回避します。 PWA は 2 つの特殊性に基づいています。まず、アプリの「スケルトン」は、コンテンツが応答しなくてもページ構造を呼び出し、その要素にはヘッダー、ページ レイアウト、およびページの読み込みを示すイラストが含まれます。3 以降の iOS サポート、
    • デバイスのバッテリーの使用量が多い、
    • すべてのデバイスが PWA 機能の全範囲をサポートしていない (iOS と Android OS で同じスピーチ)、
    • iOSユーザーに対する強いリエンゲージメントを確立できない (URL スキーム、標準 Web 通知)、
    • オフライン実行のサポートは制限されている、などです。
    • ストアでの存在感がない (そのチャネルからトラフィックを獲得する可能性がない)。
    • コントロールの「組織」 (ストアのような) や承認プロセスがない。
    • デバイスの一部のハードウェア コンポーネントに制限されている。).

    Manifest とサービス ワーカーの重要性

    PWA が最高のものを提供できる最新ブラウザの新機能は、「マニフェスト」と「サービス ワーカー」であります。

    マニフェスト
    これは、PWA の基本パラメーターを定義するシンプルな JSON ファイルで、アプリがユーザーにどのように見えるかを制御し、起動時の外観を定義します。アイコン、色、フォント、画面の向き、ホーム画面にインストールする可能性などのその他の基本的な機能などです。

    Service workers
    PWA が提供できる高度なエクスペリエンスの真の鍵は、このようなものです。 サービス ワーカーとは、Web ページやユーザーのインタラクションを必要としない機能を使用するために、Web ページから切り離されたバックグラウンドでブラウザが実行するスクリプトです。 将来的には、定期的な同期やジオフェンシングなどの機能をサポートする予定です。 主な機能は、応答のキャッシュのプログラムによる管理を含む、ネットワーク要求を傍受し管理する機能です。 これは、開発者が体験を完全にコントロールすることにより、オフライン体験をサポートするAPIです。

    iOSの最新バージョンでサービスワーカーへのサポートが追加されたことにより、AppleはPWAへの扉を開き、意図的に、モバイル市場全体に到達しました。

    PWAに最も使用される技術は何ですか？

    Progressive Web App作成のための技術はいくつかあり、主にJavaScriptに基づいて、異なる特性を持っています。

    その中でも主なものは以下の通りです。

    • React
      ダイナミックでモダンなユーザー インターフェイスを構築するための強力な JavaScript ライブラリ
    • Polymer
      コンポーネントを組み合わせたもの。 PWA を作成するために設計されたツールおよびモデル
    • Angular
      HTML をテンプレート言語として使用する動的な Web アプリケーションを作成する JavaScript フレームワーク
    • Ionic
      強力なアプリケーションを作成するための JavaScript フレームワーク。 基本コードで複数のプラットフォームに対応
    • Accelerated Mobile Pages（AMP）
      Webページのパフォーマンスを向上させるオープンソースプロジェクト

    PWAとネイティブソリューションの選び方

    選択の瞬間が訪れる。 どのようなソリューションを採用するか？

    以下のような場合は、PWAの開発を選択することが望ましいです。

    • アプリをより多くのユーザーに簡単に配布しなければならない
    • 利用できる予算が高くない
    • 本番稼動に使える時間が少ない
    • 検索エンジンに適切にインデックスすることが重要
    • クロスプラットフォームの互換性が必要
    • 厳しい時間内に多くの更新が必要

    反対に、以下の場合はネイティブアプリを開発することが望まれます。

    • ストアを移動する必要がある場合
    • アプリの成功には、速度と応答性が重要なポイントです
    • アプリには、デバイスのハードウェア機能の重要な使用が求められます
    • ビジネス モデルは、たとえば、ダウンロードごとのコストやIAP (In App Purchase) に基づいています
    • アプリには、他のサードパーティ アプリの統合が必要です インストール プロセスにおける相違点です。 PWA vs ネイティブ アプリ

      ネイティブ アプリをインストールする一般的なプロセスは、このような流れになります。

      • Access to the reference Store (App Store or Google Play)
      • Search for the app
      • Click on “Install”
      • Acceptance of the various authorizations
      • Opening and launching the app
      • Use of the app

      比較ではPWAインストールは以下の通りです。

      • サイト訪問
      • 端末ホーム画面への追加（オプション）
      • アプリの起動
      • アプリの使用

      プログレッシブWebアプリの主な例

      ユーザーが端末で使用するPWA「識別」例はすでに多く、その中でも主なものを報告します。

      Pinterest

      もっと知るには、以下を参照してください。
      Addy Osmani on Medium >A Pinterest Progressive Web App Performance Case Study

      Instagram

      現在のPWAはネイティブアプリに非常に似ており、通知からストーリーの閲覧機能まで、すべての主要インタラクション機能を備えています。

      Google Maps

      もっと知りたい方はこちら：
      The Next Web > Googleの軽量Maps GoはただのProgressive Web App

      Tinder

      もっと知りたい方はこちら： Addy Osmani on Medium >A Progressive Tinder Web App Performance Case Study

      Twitter Lite

      もっと詳しく知りたい方はこちら。
      Twitter Blog > How we built Twitter Lite
      Google Developers > Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
      Paul Armstrong on Medium > Twitter Lite and High Performance React Progressive Web
      Twitter Lite PWAは、プログレッシブWebアプリケーションです。 Apps at Scale

      YouPorn

      PWA を使用するという決定は主に Apple と Google がストアでのポルノ コンテンツにかける制限をバイパスするためです。 より良いユーザーエクスペリエンスを確保するためでもあります。

      もっと知りたい方はこちら。
      YouPorn Blog > YouPorn App Experience
      VentureBeat > YouPorn goes progressive with new mobile web apps for Android and iOS

      Progressive Web Appのテーマを深める参考文献

      Google Progressive Web App > https://developers.google.com/web/progressive-web-apps/

      GooglePWAチェックリスト > https://developers.google.com/web/progressive-web-apps/checklist

      Appscope.jp
      YouPorn App Experience>Your Porn App Experience
      VentureBeat >Your Porn App Experience
      YouPorn App Experience
      VentureBeat >YouPorn goes progressive with new mobile web apps for Android and iOS

      では、未来は「プログレッシブ」なのでしょうか。

      その答えは、いつものように、「場合による」です。 PWA を開発するという決定は、プロジェクトごとに、ユーザーごとに、随時行わなければならない分析と反省に従ったものです。 それどころか、検索エンジンでの位置づけという、さらなる複雑さを追加することもできます。すべてを正しく管理できたのか、それとも Web サイトのトラフィックを共食いさせているのか。

      この研究で予想されたように、選択に至る要因は多数あり、定義済みの標準レシピがあるわけではありませんが、戦略や目標に正しく適合するコンテキストが得られるものであれば、それは可能です。 一緒に考えていきましょう

      。

コメントを残す

メールアドレスが公開されることはありません。