ネイティブアプリは運命的

2014–09ハゲタカ—ディックナイト(CC BY-NC-ND 2.0)

これからは、これ以上ネイティブアプリを作成しません。今後の私のアプリはすべてプログレッシブWebアプリになります。プログレッシブWebアプリは、ネイティブモバイルアプリよりもモバイルデバイスでさらにシームレスに動作するように設計されたWebアプリケーションです。

「よりシームレスに」とはどういう意味ですか?ほとんどのWebトラフィックはモバイルデバイスからのものであり、ユーザーは平均して月に0〜3個の新しいアプリをインストールするということです。つまり、人々はアプリストアで試してみるために新しいアプリを探すのに多くの時間を費やすことはありませんが、アプリを見つけて使用する可能性のあるWebに多くの時間を費やしています。

プログレッシブWebアプリケーションは、他のWebアプリと同じように起動しますが、ユーザーがアプリに戻って、アプリをより定期的に使用することに興味があることを使用方法で示すと、ブラウザーはアプリをホーム画面にインストールするようにユーザーを招待します。 PWAは、ネイティブアプリのようなプッシュ通知の恩恵を受けることもできます。

ここが面白いところです。ネイティブアプリと同様に、プログレッシブWebアプリには独自のホーム画面アイコンがあり、クリックすると、ブラウザーのクロムなしでアプリが起動します。つまり、URLバーもWebナビゲーションUIもありません。携帯電話の通常のステータスバーと、ほぼ全画面表示のアプリだけです。

これには長い時間がかかっています。特に新しい技術はありません—新たなクロスプラットフォーム標準の顕著な例外を除きます。

いくつかの歴史

iPhoneの初期には、アプリストアはありませんでした。 Steve Jobsは、開発者が標準のWebテクノロジーを使用してiPhoneアプリを構築することを望んでいました。

先見の明がある人もいますが、彼らは時代を先取りしています。 2年前を振り返ると、iPhone用のWebアプリを構築するというSteve Jobsの推奨は、ネイティブアプリが大成功を収めたため、Forbesの「最大の間違い」と呼ばれていました。

今日を振り返ってみると、彼が本当に何かに夢中になっていたことは明らかです。その当時の既存のWeb標準の能力をはるかに超えています。

10年後、モバイルWeb標準は開発者がネイティブアプリで求めていた多くの機能をサポートするようになり、モバイルWebアプリケーションに対するSteve Jobsの当初のビジョンは世界中で真剣に追求されています。 Appleは、iOSデバイスが適切なアイコンなどを見つけるのに役立つメタタグを使用して、ほぼ最初からホーム画面に追加できる「apple-mobile-web-capable」Webアプリをサポートしています。

他のベンダーも同様に、それぞれ独自のメタタグのコレクションを作成してモバイルWebアプリの機能を宣言していましたが、最近ではクロスプラットフォーム仕様が導入され、現在ではクロスプラットフォームモバイルWebアプリがついに本物になりつつあります。

標準を実装するアプリは、プログレッシブWebアプリケーションと呼ばれます。プログレッシブエンハンスメントまたはレスポンシブアプリのような紛らわしいほど類似した用語と混同しないでください。

プログレッシブWebアプリとは何ですか?

プログレッシブWebアプリは、モバイルフレンドリーに設計された単なるWebアプリケーションです。ユーザーがアプリを使い続けたいとブラウザが判断した場合、ホーム画面やドックなどにインストールするようにユーザーに促す場合があります。しかし、資格を得るには、特定の基準を満たす必要があります。

  • HTTPSである必要があります(暗号化を参照してください)
  • 必須プロパティを含む有効なマニフェスト(Web Manifest Validator)
  • サービスワーカーが必要
  • マニフェストstart_urlは、オフラインであっても常にロードする必要があります(Service Workerを使用)
  • 独自のナビゲーションを提供する必要があります
  • さまざまな画面サイズと向きに対応する必要があります

もちろん、HTTPSとサービスワーカーをオフラインユーザーに使用することは、最新のアプリにとっては良い習慣です。

多くのアプリビルダーが忘れているように見えるのは、プログレッシブWebアプリケーションを構築する場合、ブラウザーのクロムおよびブラウザーナビゲーションジェスチャなしでアプリケーションをナビゲートできる必要があるということです。モバイルデバイスは、アプリへの独自のナビゲーションが組み込まれていることを前提としています。

たとえば、Aboutページがある場合、そのページにはアプリのUIに戻るリンクが必要です。そうでない場合、ユーザーはアプリを閉じて再度開いてメインのアプリのUIに戻る必要があります。

プログレッシブWebアプリの使い方

プログレッシブWebアプリケーションの構築に関する多くの情報がWeb全体に広がっていますが、それらの多くは時代遅れであり、その多くには、構築に必要な知識のほんの一部しか含まれていません。それを修正しましょう。

HTTPSを有効にする

HTTPSを有効にするには、次のものが必要です。

  • Webサーバー(DigitalOceanを推奨)
  • SSL証明書
  • 強力なDiffie-Hellmanグループ(sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048)
  • WebサーバーのTLS / SSL構成(UbuntuでのNginxの手順)

マニフェスト

マニフェストファイルはmanifest.jsonと呼ばれ、非常に単純です。これは、名前(ホーム画面アイコンのshort_name、およびより完全な名前のオプション名)、開始URL、およびアイコンの大きなリストで構成されているため、さまざまなプラットフォームに必要なさまざまなアイコンサイズをサポートできます。 Android + iOSの場合、次のものが必要です。

  • 36x36
  • 48x48
  • 60x60(Apple touchアイコンiPhone)
  • 72x72
  • 76x76(Apple touchアイコンiPad)
  • 96x96
  • 120x120(Apple touchアイコンiPhone網膜)
  • 152x152(Apple touchアイコンiPad Retina)
  • 180x180(iOS 8以降のAppleタッチアイコン)
  • 192x192
  • 512x512

Appleのタッチアイコンは、よく知られた名前を持っているため、私はそれを選びました。

apple-touch-icon-180x180.png

180x180は、特定の解像度に置き換えられます。既知の名前を使用する必要はありませんが、タグを含めることを忘れた場合、iOSは、既知の名前を使用している場合、Webアプリのルートディレクトリでアイコンを検索することでアイコンを検索できます。

iOSアイコンは透明度をサポートしていません。

サンプルmanifest.json:

知っておくべき機能がいくつかあります。 theme_colorは、Androidでアプリを切り替えるときに使用されるステータスバーとウィンドウヘッダーバーの色を設定します。

background_colorは、スプラッシュ画面で使用される色を設定します。 Androidでは、スプラッシュスクリーンはnameプロパティ(長い名前)とbackground_colorの上にある大きなアイコンで構成されます。

マニフェストはどこにもありません

プログレッシブWebアプリケーションを初めて作成したとき、Chrome for Androidで期待どおりに機能することに興奮しましたが、Safari / iOSで見たときは機能しなかったようです。その理由は、10年ほどカスタムタグを使用してこれらの機能をサポートしていたにもかかわらず、モバイルSafariはまだWebマニフェスト仕様をサポートしていないためです。

そのため、サポートされているブラウザーのマニフェストファイルに加えて、iOS用の特別なメタタグも必要になります。これは、ブラウザークロムなしでアプリを起動するものです。

ただし、覚えておくべきタグはたくさんありますが、別の方法があります。 manifest.jsonファイルを読み取り、古いモバイルブラウザ、iOS、さらにはWindows PhoneやFirefox OS用のベンダー固有のタグを追加するWebマニフェストポリフィルがあります。

サービスワーカー

Service Workerは最近のWebプラットフォーム仕様で、ユーザーがインターネットに接続していなくてもアプリが引き続き機能するように、リソースをローカルにキャッシュできます。

ネットワーク要求をハイジャックし、ユーザーがオフラインのときにローカルキャッシュから応答を提供することで機能します。しかし、それ以上のことがあります。これはかなり洗練された低レベルAPIであり、ユーザーがオンラインでもオフラインでも、ユーザーエクスペリエンスを最適化するために多くのことを行うことができます。

まず始めに、非常にシンプルで高レベルの抽象化をお勧めします。 UpUpと呼ばれる小さなスクリプト。 UpUpの使用は本当に簡単です。 UpUpドキュメントの例を次に示します。

content-urlは、ユーザーがオフラインのときに読み込むURLです。このためにアプリのルートURLを使用するだけで、問題なく機能します。

アセットは、アプリが適切に機能するためにローカルにキャッシュする必要があるファイルです。すべての画像、アイコン、CSS、さらにはデフォルトのAJAXリクエストレスポンスが含まれていることを忘れないでください。ご覧のとおり、どのタイプのファイルでも機能するはずです。

最終的に、UpUpが提供するよりも多くのオフラインリソースキャッシングを制御したい場合があります。その日が来たら、あなたを始めるための素晴らしい教育リソースがあります:

  • 無料のGoogle Udacityコース
  • 詳細なカバレッジについては、Service Worker Cookbook。

テスト中

Chrome検査で物理デバイスをデバッグする

デバイスをUSBケーブルに差し込みます。 AndroidデバイスでUSBデバッグをオンにします。リモートデバッグ手順を参照してください。リモートデバッグを有効にするためにAndroidフォンをデベロッパーモードにする方法を理解するために、Googleを探す必要があるかもしれません。

開発者モードをオンにすると、設定モードで開発者オプションが表示される場合があります。それを開き、USBデバッグがオンになっていることを確認します。

chrome:// inspect#devicesにアクセスします。検査ボタンを押すと、アプリの完全な開発ツールを入手できます。

サービスワーカーを確認する

chrome:// inspect /#service-workersにアクセスして、サービスワーカーが適切に機能していることを確認します。

ホームページへのインストールを確認する

ユーザーエンゲージメントチェックをスキップして、常にホームページにインストールするオプションを取得する場合は、Chromeフラグで[ユーザーエンゲージメントチェックをバイパスする]をオンにします。

chrome:// flags /

デスクトップでテストするには、「シェルフへの追加を有効にする」も有効にする必要があります。

ネイティブアプリはまだ死んでいない

プログレッシブWebアプリにはネイティブアプリのほとんどの機能が搭載されており、インストールの摩擦はネイティブアプリよりも低くなるため、アプリストアのゲートキーパーを心配する必要がなくなり、30%の税金を支払う必要がなくなりますアプリストアにいるという特権のためのアプリ販売。

ただし、ネイティブアプリには、モバイルWebアプリが潜在的に長い間備えていない機能がまだいくつかあります。

特に、ほとんどのセンサーとハードウェアの統合仕様はほとんどのブラウザーでサポートが制限されているか、まったくサポートされておらず、デバイス指向APIのような基本機能でさえ、さまざまなブラウザーに仕様の複数のバージョンが存在し、いくつかのトリッキーなロジックまたはポリフィルが必要なため、重大な変更を受けています安全に使用します。

皮肉なことに、Appleが進歩的なWebアプリケーションテクノロジーの多くを開拓したにもかかわらず、iOSは進歩的なWebアプリの採用に対する唯一の大きな障害のようです。現在、サービスワーカーをサポートしていませんが、開発中です。

ありがたいことに、iOSのハイブリッドアプリにサービスワーカーのサポートを追加するCordovaプラグインがあります。

ただし、すべてのWebブラウザーベンダーが、特にユーザーフレンドリーな方法でインストールプロンプトを実装するとは限りません。現在の仕様を使用すると、ユーザーはアプリのインストールを求められる場合と求められない場合があります。また、アプリストアでアプリを検索しようとしても、従来のアプリストアプロセスでハイブリッドアプリを公開しない限り、ユーザーはそれを見つけられません。

短期的には、iOSデバイスのギャップを埋めるためにCordovaまたはそのようなものを使用して立ち往生する可能性がありますが、Androidデバイスではすぐに仕様の適切なサポートが展開されます。 Chromeを実行している最近のAndroidスマートフォンをお持ちの場合、Cordovaビルドに頼らずにアプリが動作する可能性が高くなります。

Appleのサポートの欠如があなたを遠ざけるべきだと思うなら、Androidは今や世界のモバイルOS市場の86%であることを忘れないでください。世界中の86%の低いインストール摩擦を利用するためにiOSをCordovaでポリフィルする必要がある場合でも、PWAを構築する価値があるかもしれません。

結論

短期的には、Web標準ではまだ利用できない一部のデバイスAPIを利用できるハイブリッドアプリを作成したい場合があります。

初めてのプログレッシブWebアプリケーションを構築した後、私は将来に期待していますが、完璧ではないことも意識しています。すべてのデバイスプラットフォームですべてがスムーズに機能するようになるには時間がかかります。また、ユーザーがアプリストアでよく知っている発見機能とよく知られているインストール手順を見逃すことを忘れないでください。

ブラウザベンダーがこのビジョンに追いつくことを願っています。最終的には、プログレッシブWebアプリケーションのインストールエクスペリエンスがネイティブアプリよりもはるかに優れたものになるでしょう。物事はそのように進んでいるように見えます。

確かに、ネイティブアプリはしばらくの間存続しますが、SwiftまたはJavaの学習に忙しくてネイティブアプリを構築できる場合は、代わりにJavaScriptの学習を検討することをお勧めします。

いくつかのプログレッシブWebアプリを試してみませんか? pwa.rocksをご覧ください。

編集:Web Platform Rocks

コメントに飛び込んで、ウェブプラットフォームで本格的なアプリを構築することがどのように不可能かを教えてください。

これは2016年であり、2004年ではありません。Webプラットフォームは大きく進歩しました。 「10のWebアプリとゲームを見る必要があります」を読んで、他の人々がWebプラットフォーム用に構築しているものを確認してください。

まだ納得できませんか? 「ネイティブアプリが本当に運命づけられる理由:ネイティブアプリが運命づけられる理由2」をお読みください。

この記事は、サービスワーカーのiOSステータスを更新するために編集されました。元々、Appleは実装の意図をほのめかしたと言っていました。ステータスが「開発中」に変更されました。

クロスプラットフォームのユニバーサルJavaScriptアプリケーションを構築したいですか?

エリックエリオットでJavaScriptを学ぶ

エリックエリオットは、「JavaScriptアプリケーションのプログラミング」(O’Reilly)、および「エリックエリオットでJavaScriptを学ぶ」の著者です。彼は、Adobe Systems、Zumba Fitness、The Wall Street Journal、ESPN、BBC、およびUsher、Frank Ocean、Metallicaなどのトップレコーディングアーティストのソフトウェアエクスペリエンスに貢献しています。

彼は、サンフランシスコ湾岸地域で世界で最も美しい女性とほとんどの時間を過ごしています。