プログレッシブ Web アプリの概要

JavaScript の学習に興味がありますか? jshandbook.com で私の電子ブックを入手してください

プログレッシブ ウェブアプリ (PWA) は、モバイル アプリケーション開発の最新トレンドです ウェブ技術を使用しています。執筆時点 (2018 年初頭) では、Android デバイスのみに適用されています。 .

iOS 11.3 と macOS 10.13.4 に PWA がまもなく登場します。

Safari と Mobile Safari の基盤となる技術である WebKit は、最近 (2017 年 8 月)、Service Worker をブラウザーに導入する作業を開始したと宣言しました。これは、まもなく iOS デバイスにも搭載されることを意味します。したがって、Apple がこのアプローチを奨励することを決定した場合、Progressive Web Apps の概念は iPhone および iPad に適用される可能性があります。

これは画期的な新技術ではなく、Web ベースのアプリのエクスペリエンスを向上させることを目的とした一連の技術を指す新しい用語です。

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

プログレッシブ ウェブアプリは、デバイスのサポート内容に基づいて追加機能を提供できるアプリです 、オフライン機能、プッシュ通知、ほぼネイティブなアプリの外観と速度、およびリソースのローカル キャッシュを提供します。

この手法は 2015 年に Google によって最初に導入され、開発者とユーザーの両方に多くの利点をもたらすことが証明されています。

開発者はほぼ一流のビルドにアクセスできます Web スタックを使用するアプリケーション。これは、特にクロスプラットフォーム アプリの構築と維持の影響を考慮すると、ネイティブ アプリケーションを構築するよりも常にかなり簡単で安価です。

開発者は、インストールの手間が減るというメリットを得ることができます 、ストアにアプリを置いても 99,99% のアプリの発見可能性に関して実際には何ももたらさないときに、Google 検索はそれ以上ではないにしても同じ利点を提供できます。

プログレッシブ Web アプリは、モバイル エクスペリエンスを通常のモバイル最適化 Web サイトよりもはるかに快適にする特定のテクノロジを使用して開発された Web サイトです。次の機能を提供するため、まるでネイティブ アプリで作業しているように感じます:

• オフライン サポート
• 読み込みが速い
• 安全です
• プッシュ通知を送信できる
• URL バーのない没入型のフルスクリーン ユーザー エクスペリエンス

モバイル プラットフォーム (執筆時点では Android ですが、技術的にはそれに限定されているわけではありません) では、Progressive Web Apps のサポートが強化されています。ユーザーにアプリをホーム画面に追加するよう求めることさえあります。 そのユーザーがそのようなサイトにアクセスしたとき。

しかし、最初に、名前について少し説明します。 プログレッシブ ウェブアプリ 紛らわしい用語になる可能性があります 、適切な定義は次のとおりです。最新のブラウザー機能 (Web ワーカーや Web アプリ マニフェストなど) を利用して、モバイル デバイスがアプリを一流のシチズン アプリの役割に「アップグレード」できるようにする Web アプリ。

プログレッシブ ウェブアプリの代替手段

モバイル エクスペリエンスの構築に関して、PWA は代替手段と比較してどのように評価されますか?

それぞれの長所と短所に注目し、PWA が適している場所を見てみましょう。

ネイティブ モバイル アプリ

ネイティブ モバイル アプリは、モバイル アプリを作成する最も明白な方法です。 iOS では Objective-C または Swift、Android では Java /Kotlin、Windows Phone では C#。

各プラットフォームには独自の UI および UX 規則があり、ネイティブ ウィジェットはユーザーが期待するエクスペリエンスを提供します。それらは、プラットフォームの App Store を通じて展開および配布できます。

ネイティブ アプリの主な問題点は、クロスプラットフォーム開発には、さまざまな方法論とベスト プラクティスを学び、習得し、最新の状態に保つ必要があることです。たとえば、小規模なチームの場合、または 3 つのプラットフォームでアプリを構築する単独の開発者である場合、テクノロジと環境の学習に多くの時間を費やす必要があります。また、さまざまなライブラリの管理とさまざまなワークフローの使用に多くの時間を費やすことになります (たとえば、iCloud は iOS デバイスでのみ動作し、Android バージョンはありません)。

ハイブリッド アプリ

ハイブリッド アプリケーションは Web テクノロジを使用して構築されますが、App Store に展開されます。中間には、アプリケーションをパッケージ化するためのフレームワークまたは何らかの方法があり、レビューのために従来の App Store に送ることができます。

最も一般的なプラットフォームには、Phonegap や Ionic Framework などがあります。通常、ページに表示されるのは、本質的にローカル Web サイトを読み込む WebView です。

私は最初に Xamarin をリストに含めましたが、Carlos Eduardo Pérez は、Xamaring がネイティブ コードを生成することを正しく指摘しました。

ハイブリッド アプリの重要な側面は、一度書けばどこでも実行できることです 概念。さまざまなプラットフォームのコードがビルド時に生成され、JavaScript、HTML、および CSS を使用してアプリを構築していることは驚くべきことです。デバイスの機能 (マイク、カメラ、ネットワーク、GPS など) は、JavaScript API を通じて公開されます。

ハイブリッド アプリを構築することの悪い点は、優れた仕事をしない限り、共通点を提供することに決めてしまう可能性があることです。これは、アプリがプラットフォーム固有の人間とコンピューターの相互作用のガイドラインを無視しているため、すべてのプラットフォームで最適ではないアプリを効果的に作成します.

また、複雑なビューのパフォーマンスが低下する可能性があります。

React Native で構築されたアプリ

React Native は JavaScript API を介してモバイル デバイスのネイティブ コントロールを公開しますが、WebView 内に Web サイトを埋め込むのではなく、ネイティブ アプリケーションを効果的に作成しています。

このアプローチをハイブリッド アプリと区別するための彼らのモットーは、一度学べばどこでも書けるということです。 つまり、アプローチはプラットフォーム間で同じですが、各プラットフォームで優れたエクスペリエンスを提供するために、完全に個別のアプリを作成することになります。

構築するものは本質的に App Store を通じて配布されるネイティブ アプリであるため、パフォーマンスはネイティブ アプリに匹敵します。

プログレッシブ ウェブ アプリの機能

前のセクションでは、主な競合他社について説明しました プログレッシブ Web アプリの。では、それらと比較して PWA はどのように評価され、その主な機能は何ですか?

覚えておいてください - 現在、プログレッシブ Web アプリは Android デバイスのみを対象としています。

機能

プログレッシブ ウェブ アプリには、上記のアプローチと完全に異なる点が 1 つあります。それは、アプリ ストアにデプロイされないことです。

これは重要な利点です。アプリ ストアは、取り上げられるリーチと運があれば有益です。これにより、アプリがバイラルになる可能性があります。しかし、上位 0.001% に入らない限り、App Store に小さな場所を置いても大きな利益を得ることはできません。

プログレッシブ ウェブ アプリは、検索エンジンを使用して発見可能です 、ユーザーが PWA 機能を備えたサイトにアクセスすると、端末と組み合わせたブラウザが、アプリをホーム画面にインストールするかどうかをユーザーに尋ねます。 .通常の SEO を PWA に適用できるため、有料の獲得への依存度が大幅に低下するため、これは非常に重要です。

App Store にないということは、Apple や Google の承認が不要であることを意味します ユーザーのポケットに入ります。 iOS アプリにありがちな標準の承認プロセスを経なくても、必要なときに更新をリリースできます。

PWA は基本的に、強化された HTML5 アプリケーション/レスポンシブ Web サイトであり、主要な機能のいくつかを可能にするために最近導入されたいくつかの主要なテクノロジーを備えています。ご存じのように、初代の iPhone にはネイティブ アプリを開発するオプションがありませんでした。開発者は、ホーム画面にインストールできる HTML5 モバイル アプリを開発するように言われましたが、当時の技術者はその準備ができていませんでした。

プログレッシブ ウェブアプリ オフラインで実行 .

サービス ワーカーの使用 アプリがバックグラウンドでダウンロードできる最新のコンテンツを常に保持できるようにし、プッシュ通知をサポートできるようにします。 より大きな再エンゲージメントの機会を提供します。

また、共有可能性により、URL が必要なだけなので、アプリを共有したいユーザーのエクスペリエンスが大幅に向上します。

特典

では、なぜユーザーと開発者はプログレッシブ ウェブアプリを気にする必要があるのでしょうか?

<オール>

PWA は軽量です。ネイティブ アプリは 200 MB 以上になることがありますが、PWA は KB の範囲内になる可能性があります。

ネイティブ プラットフォーム コードはありません

ユーザー獲得のコストが低い (ユーザーにアプリをインストールしてもらうのは、ウェブサイトにアクセスして最初のエクスペリエンスを得るよりもはるかに困難です)

アップデートのビルドとリリースに必要な労力が大幅に削減

通常のアプリストア アプリよりもはるかに多くのディープ リンクをサポートしています

コア コンセプト

• レスポンシブ :UI は端末の画面サイズに適応します
• アプリのような感触 :ウェブサイトではなくアプリのように感じます (可能な限り)
• オフライン サポート :デバイスのストレージを使用してオフライン エクスペリエンスを提供します
• インストール可能 :デバイスのブラウザがユーザーにアプリのインストールを促します
• 再エンゲージメント :プッシュ通知は、ユーザーが一度インストールしたアプリを再発見するのに役立ちます
• 発見可能 :検索エンジンと SEO 最適化は、アプリ ストアよりもはるかに多くのユーザーを提供できます
• フレッシュ :オンラインになると、アプリ自体とコンテンツが更新されます
• 安全 :HTTPS を使用します
• プログレッシブ :機能が少なくても (例:Web サイトとして、インストールできないなど)、どのデバイスでも動作します。古いデバイスでも動作します。
• リンク可能 :URL を使用して簡単に指定できます

サービス ワーカー

プログレッシブ Web アプリの定義の一部は、オフラインで動作する必要があるということです。

ウェブアプリをオフラインで動作させるのは Service Worker であるため、これは Service Worker がプログレッシブ ウェブアプリの必須部分であることを意味します .

警告:Service Worker は現在、Chrome (デスクトップおよび Android)、Firefox、および Opera でのみサポートされています。サポートに関する最新データについては、https://caniuse.com/#feat=serviceworkers を参照してください。

ヒント:サービス ワーカーと Web ワーカーを混同しないでください。それらはまったく別のものです。

Service Worker は、Web アプリとネットワークの間の仲介者として機能する JavaScript ファイルです。このため、キャッシュ サービスを提供し、アプリのレンダリングを高速化し、ユーザー エクスペリエンスを向上させることができます。

セキュリティ上の理由から、Service Worker を利用できるのは HTTPS サイトのみです。これが、プログレッシブ ウェブアプリを HTTPS 経由で提供する必要がある理由の 1 つです。

ユーザーが初めてアプリにアクセスしたときは、デバイスで Service Worker を使用できません。最初の訪問で Service Worker がインストールされ、その後サイトの別のページにアクセスすると、この Service Worker が呼び出されます。

Service Workers の完全なガイドを確認してください

アプリ マニフェスト

アプリ マニフェストは、プログレッシブ ウェブアプリに関するデバイス情報を提供するために使用できる JSON ファイルです。

マニフェストへのリンクを すべて に追加します Web サイトの各ページのヘッダー:

<link rel="manifest" href="/manifest.webmanifest">

このファイルは、デバイスに次の設定方法を指示します:

• アプリの名前と短い名前
• さまざまなサイズのアイコンの位置
• ドメインに相対的な開始 URL
• デフォルトの向き
• スプラッシュ画面

例

{   "name": "The Weather App",   "short_name": "Weather",   "description": "Progressive Web App Example",   "icons": [{    "src": "images/icons/icon-128x128.png",    "sizes": "128x128",    "type": "image/png"   }, {     "src": "images/icons/icon-144x144.png",    "sizes": "144x144",     "type": "image/png"   }, {     "src": "images/icons/icon-152x152.png",    "sizes": "152x152",     "type": "image/png"   }, {     "src": "images/icons/icon-192x192.png",    "sizes": "192x192",     "type": "image/png"   }, {     "src": "images/icons/icon-256x256.png",     "sizes": "256x256",     "type": "image/png"   }],   "start_url": "/index.html?utm_source=app_manifest",   "orientation": "portrait",   "display": "standalone",   "background_color": "#3E4EB8",  "theme_color": "#2F3BA2" }

アプリ マニフェストは W3C ワーキング ドラフトであり、https://www.w3.org/TR/appmanifest/ からアクセスできます。

アプリ シェル

App Shell はテクノロジーではなく、設計コンセプトです。 これは、最初に Web アプリ コンテナーを読み込んでレンダリングし、その後すぐに実際のコンテンツを読み込んで、ユーザーにアプリのような印象を与えることを目的としています。

たとえば、ユーザー インターフェイスに似たスプラッシュ スクリーンを使用するという Apple のヒューマン インターフェイス ガイドラインの提案を見てみましょう。これは、アプリの読み込みに時間がかかっているという認識を低下させることが判明した心理的なヒントを提供します。

キャッシング

App Shell はコンテンツとは別にキャッシュされ、シェルの構成要素をキャッシュから取得するのにほとんど時間がかからないように設定されています。

JavaScript の学習に興味がありますか? jshandbook.com で私の電子ブックを入手してください