ウェブアプリとネイティブアプリの未来
ネイティブアプリとウェブアプリの差は縮まりつつあります。進化を続けるウェブアプリの世界を探り、アプリのレベルアップにどのように貢献できるかを見ていきましょう。.
ウェブサイトやアプリで利用できる機能は、静的なページが主流だった初期から劇的に変化しました。近年でも、以下のような大きな進歩が見られます。
ネイティブアニメーション、シンプルで柔軟なレイアウト、リアルな3Dグラフィック、ストリーミングビデオが急増しています。「少しだけ」という名目で。しかし、まだやるべきことは山ほどあります。特に、WebがネイティブOSと効果的に競争していくためには。.
熟練したライターやブラウザエンジニアは、ネイティブOSとそのアプリケーションの人気を高める機能を模索してきました。そして今、Webが立ち上がり、OSの機能のギャップを埋めようとしていることが分かります。基本的に、これは少数の機能に焦点を絞ることにつながっており、実装が容易なものもあれば、そうでないものもあります。以下のタイトルは網羅的なものではありませんが、主要なポイントを網羅しています。.
ネイティブ プログラムには次のものが含まれます。
- リンク： 指定された URL によって Web アプリケーションにリダイレクトされる可能性があります。.
- 反応性: メディアクエリなどのツールを使えば、様々なフォーマット（画面の向き、解像度、画面サイズなど）に対応した複雑なレイアウトを作成できます。実際、デフォルトのWebレイアウトモデルは本質的にレスポンシブであるため、テキスト操作に特に適しています。.
- データ駆動型: HTML を使用すると意味と構造を提供でき、Web はデータの処理に最適です。.
- 高度な： 最新のブラウザに最新の機能を提供しながら、古いブラウザでも許容できるエクスペリエンスを提供するように Web アプリケーションを設計できます。.
- 安全： ウェブは、シングルオリジンセキュリティモデルとHTTPSを使用して、アプリケーションのセキュリティを維持する機能を提供しています。 レッツ・エンクリプト Web アプリケーションのセキュリティ保護がさらに簡単になりました。.
ただし、Web には次のような利点もあります。
- インストール機能: デバイス上でアプリが利用可能で、OSとの完全な統合により操作感も良好です。ホーム画面にアプリの小さなアイコンが表示され、アプリを全画面表示または小さなウィンドウで開くことができれば、さらに良いでしょう。これらはシンプルなことです。そう思いませんか？
- 発見可能性: アメリカのウェブオタクの多くは、クローズドなアプリストアを嫌がっています。しかし、アプリを見つける方法が改善されたことは否定できません。もっとも、一部の人は、たとえ優れたクローズドアプリストアであっても、過密状態のために機能不全に陥っていると主張しています。.
- オフラインの場合: 世界中どこでもインターネットに接続できます。しかし、100%に頼ることはできません。オフラインのため、他に手段がなくアプリが使えないという悩みを抱えているのです。.
- 魅力： ユーザーにアプリを使ってもらえれば、目標は半分達成です。しかし、どうすればユーザーのエンゲージメントを維持し、最新情報を提供し続けられるでしょうか？ネイティブアプリ開発者は長年、プッシュ通知を利用してユーザーに最新情報を提供してきました。.
- 素早い： 多くの人は、ネイティブ コードの方が Web コードよりもパフォーマンスが優れていると考えていますが、後ほど説明するように、この差は急速に縮まっています。.
pokedex.org サイトは、楽しい趣味としても機能する高度な Web アプリケーションの最良の例です。.
√私たちは、ネイティブアプリから便利なアプリケーションにアクセスできるようにウェブを設計したいと考えていますが、既にテスト済みの基本的な機能を犠牲にすることはありません。この動きは「Webアプリ革命」と呼ばれ、Mozillaや グーグル サポートされています。.
√このような進歩を可能にする新しいテクノロジーについては後ほど説明しますが、まずはネイティブ アプリよりも先に進むために、Web についてもう少し詳しく見ていきましょう。.
√注：一方で、ネイティブオペレーティングシステムがWebとのギャップを埋めるために取り組んでいる興味深い取り組みにはどのようなものがありますか？例えば、より深いリンクを可能にするルーブ・ゴールドバーグ風の取り組みなどです。.
以前は何だったのか
まずオフラインにすることが重要です。.
経験豊富なファンは、オフラインで動作し、デフォルトでは更新時のみインターネットに接続する Web アプリを構築したいと考えています。.
ネイティブ機能を備えたアプリという概念は、決して新しいものではありません。そもそも、Chromeアプリなど、様々な場所に「ウェブ」パッケージ、つまりアプリテンプレートが数多く存在し、承認されたパッケージをデバイスにインストールしてオフラインで使用したり、ハードウェアへのアクセスを許可したりしていました。.
CordovaやElectronといった「ハイブリッドアプリ」という言葉を耳にしたことがあるでしょう。これらのアプリは、開発者がWebテクノロジーを用いてアプリを作成し、それをiOSやAndroidで動作するネイティブアプリに移植することを可能にします。こうしたアプリは非常に人気があります。しかし、同じアプリの複数のバージョンを開発・配布する必要があり、アプリがサポートできる機能にも制限があります。「一度書けばどこでも動く」というのは、誰もが知っている通り、完全に正しいとは言えません。.
まず、言うまでもなく、シングルページアプリケーションについても触れておく価値があります。単一のHTMLページをアプリケーションのメインページとして機能させ、XHR（または類似の技術）を使用してさまざまなビューを動的に読み込むことで、Webアプリケーションの高速化と応答性向上を実現します。このタイプのアプリケーションモデルは、Ember.JSやAngularJS、そしてオフラインファーストといった人気のフレームワークでサポートされています。これらは、高度なWebアプリケーションの大部分の基盤となっています。.
インストールとセットアップ機能
高度なWebアプリの最初のパートでは、インストールとセットアップについて説明します。これにより、Webアプリスキンを使用できるようになります。スキンは、アプリを開いたときに使用するアイコン、名前、表示モードなどのWebアプリに関する情報を含むJSONファイルを作成します。
このようなコードを使用すると、アプリケーションをメインのオペレーティング システムとさらに統合できます (ホーム画面上のアイコン、ブラウザーの代わりに全画面で開くなど)。また、アプリケーション リストでの検索性も向上します (たとえば、検索エンジンの結果に表示されます)。.
この情報はすでに、クロスプラットフォーム統合のために携帯電話の Opera と Chrome で使用されており、Firefox でもすぐにサポートされる予定です。.
オフライン
そして現在に話を戻すと、サービスアプリが登場しました。これはFirefox、Chrome、Operaに搭載された新しい技術で、開発者はAppCacheのような動作をするオフラインアプリを開発できるだけでなく、その他多くの機能も備えています。これはAPIの最も低レベルな部分であり、構成ははるかに複雑です。しかし、開発者はサービスにどのような機能を持たせたいかをより自由にコントロールできるようになります。.
一方、アセットストレージは全く別の話です。しばらくの間、AppCacheのようなものが問題を解決してくれるように見えましたが、アプリを起動する方法があるという前提が強すぎたため、開発者は動作を十分に制御できませんでした。.
オフラインウェブの問題は、一見すると単純なように見えますが、信じられないほど長い間続いています。問題は、効果的なオフライン技術セットを実装するのが容易ではないことです。大量のデータをオフラインで保存することは、それほど難しいことではありません。最近のブラウザには、IndexedDBのようなAPI（アプリケーション・プログラム・インターフェース）が以前から備わっており、Web StorageのサポートはIE8以降にまで遡ります。.
サーバーアプリケーションとは、別のファイルに記述されたJavaScriptの断片で、特定のスレッドで実行されます。インターネットとアプリケーション（およびブラウザ）の間のプロキシサーバーとして機能します。何かのリクエストが行われると、サーバーアプリケーションはそれをインターセプトし、ブラウザに送信する前にカスタマイズすることができます。.
サービスプログラムを使用するには、まず () ナビゲーター。サービスワーカー。登録する ホームページにてご登録ください。.
ナビゲーター.サービスワーカー.登録する(‘'sw.js'’)
.それから(関数(登録) {
// アプリを初期化するために何かを行う
});
そして、ユーティリティセクションのインストーラーを使ってインストールしました。これらの必須ファイルは、キャッシュAPIを使用するすべてのアプリケーションによって保存されることがあります（キャッシュAPIは通信アプリケーションとは独立して使用されます）。
これ.イベントリスナーを追加(‘'インストール'’, 関数(イベント) {
イベント.待つまで(
キャッシュ.開ける(‘'v1'’).それから(関数(キャッシュ) {
戻る キャッシュ.すべて追加([
‘'/sw-test/'’,
‘'/sw-test/index.html'’,
‘'/sw-test/style.css'’,
‘'/sw-test/app.js'’
]);
})
);
});
また、サービスアプリケーション内のイベントリスナー応答は、発生したリクエストに応じてコードを送信するため、開発者は応答結果をカスタマイズできます。つまり、開発者は、あまり変更されていないファイル（UIスキンなど）をインストール環境に保存するようにリクエストし、必要に応じてリポジトリに保存されているバージョン（オンラインバージョンではなく）を使用できます。これで、オフラインアプリケーションが完成です。.
これ.イベントリスナーを追加(‘'フェッチ'’, 関数(イベント) {
var 応答;
イベント.応答(キャッシュ.マッチ(イベント.リクエスト).キャッチ(
// 要求されたファイルが存在しないケースを処理するコードを記述します
// キャッシュにオフラインで保存されていない
);
});
サービス アプリケーションは HTTPS 通信でのみ動作することに注意してください。.
↑上の図はサービスアプリケーションのインストールサイクルを示しています↑
ユーザーとの再エンゲージメント
ネイティブOSは長らくプッシュ通知に依存してきました。プッシュ通知とは、アプリケーションが閉じられている場合でも、サーバーがクライアントシステムにメッセージを送信してユーザーに変更を通知する機能です。ニュースアプリが新しいアップデートをユーザーにプッシュ通知したい場合や、ポケモンゲームが遅くなり、対応が必要な場合など、様々な状況に対応できます。今や、Webアプリケーションでも同様の機能が利用できるようになりました。.
このプログラムを使用するには、前述の通り、サービスプログラムをインストールし、プログラムページで有効化する必要があります。その後、プログラムを購読することで使用可能になります。以下の式をご利用ください。 () ServiceWorkerRegistration.pushManager.subscribe 仕事を行うために使用します:
ナビゲーター.サービスワーカー.準備ができて.それから(関数(登録) {
登録.プッシュマネージャー.購読する({ユーザーのみ表示: 真実})
.それから(関数(サブスクリプション) {
// サブスクリプションを考慮してUIなどを更新
// サーバー上の現在のユーザーをサブスクライブするためのステータスを更新します
var 終点 = サブスクリプション.終点;
var 鍵 = サブスクリプション.取得キー(‘「p256dh」’);
更新ステータス(終点,鍵,‘'購読する'’);
})
});
このメソッドは、共有問題を解決するために使用される一種の担保を送信します。エンドポイントプロパティ（サーバーを指す一意のURLを含む）とメソッドを持ちます。 getKey()、 これは暗号化用の公開鍵を生成するために使用されます。両方の許可が必要であり、その結果はアプリケーションサーバーに送信されます。.
サーバーにアラートメッセージを送信するには、エンドポイントアドレスにリクエストを送信します。これにより、サーバーからサービスアプリケーションにメッセージが送信されます。必要に応じて、メッセージと一緒にデータを送信することもできますが、その場合は暗号化キーを使用する必要があります。データに基づくアラートメッセージはFirefoxでのみ機能しますが、他のブラウザでもすぐに対応する予定です。.
サービスアプリケーションは、プッシュイベントハンドラーを使用してアラートメッセージをリッスンします。アラートイベントが送信されるたびに、イベントオブジェクトのデータプロパティを使用してアクセスできます。その後、ニュースアイテムを送信したり、アプリケーションに何らかの更新情報を送信するメッセージをホームページに送信したりするなど、任意の方法でメッセージに応答できます。.
自己.イベントリスナーを追加(‘'押す'’, 関数(e) {
var オブジェクト = e.データ.JSON();
// 何らかの方法でプッシュメッセージに応答する
// 例: 通知またはチャンネルメッセージ
});
注: 多くのテクノロジーサービスファミリー（アラートなど）はChromeとFirefoxで適切にサポートされていますが、他のブラウザでも対応が検討されています。執筆時点では、アラートデータはFirefoxでのみ動作します。.
Mozilla のこのプログラムは、ブラウザーでの最新の Web アプリケーション インターフェイスの実装の進捗状況に関する情報を提供します。.
パフォーマンス
パフォーマンスは長らくウェブアプリとネイティブアプリの悩みの種であり、ネイティブ開発者はウェブのパフォーマンス性能を軽視してきました。しかし、ブラウザのJavaエンジンが大幅に高速化し、ウェブ内でアニメーションや3Dグラフィックスなどの処理を実行するコードも高速化したことで、GPUパワーを有効活用できるケースが増え、その差は近年大幅に縮まっています。.
さらに、Emscriptenなどの技術を用いることで、ネイティブアプリケーションコード（C++など）をJavaに変換することも可能です。ここでJavaと言えば、基本的にはasm.jsを指します。これはJavaの高度に最適化されたサブセットであり、AOTコンパイル技術を活用してネイティブに近いパフォーマンスを実現できます。asm.jsは非常に人気が高く、FirefoxだけでなくChromeやEdgeでもサポートされています。また、Web上では人気の3DエンジンであるUnityやUnrealのパブリッシングターゲットとしてasm.jsが追加されています。.
そして次世代が到来します。一部のブラウザベンダーは、Emcscriptenと同様の機能を実現するWebAssemblyの構築と実装で提携しています。ただし、より高速で、より優れた標準規格と、より高いパフォーマンスを備えています。.
これは wasm 形式の (asm.js) の代わりに使用されます。設定がより優れているため、有効な wasm 出力を生成するコンパイラーに依存でき、どのコンパイラーが生成したかに関係なく、ブラウザーは一貫したパフォーマンスでそれを実行するはずです。.
結果
ご覧の通り、ウェブは進化を続けており、私たちが愛するプラットフォームがこれまで抱えてきた欠点のいくつかを解消するために設計された、刺激的な新技術が登場しています。しかも、そのパフォーマンスは期待をはるかに上回っています。これにより、ウェブアプリはネイティブアプリに匹敵する堂々とした地位を確立しています。ウェブの素晴らしさを改めて認識し、それを維持していくことができれば、なおさらです。.
