Clever Geek Handbook

ネイティブアプリは運命づけられています（パート1）

画像



これからは、ネイティブアプリケーションを作成しなくなります。 私の将来のアプリケーションはすべて、プログレッシブWebアプリケーション（PWA、プログレッシブWebアプリ）になります。 これらは、ネイティブアプリケーションよりもモバイルデバイスでさらに有機的に動作するように設計されたアプリケーションです。



「より有機的な仕事」とはどういう意味ですか？ Webトラフィックのほとんどはモバイルデバイスからのものであり、ユーザーは月に平均0〜3個の新しいアプリケーションをインストールします。 つまり、人々はApp Storeで新しいアプリケーションを探すのにあまり時間をかけませんが、アプリケーションを見つけて使用できるネットワーク上で多くの時間を費やします。



プログレッシブWebアプリケーションは、他のWebアプリケーションと同様に作業を開始しますが、ユーザーがアプリケーションに戻って（使用の事実により）アプリケーションへのより定期的なアクセスに関心があることを示すと、ブラウザーはユーザーにホーム画面にアプリケーションをインストールするように促します。 PWAは、ネイティブアプリケーションとしてプッシュ通知を使用することもできます。



そして、ここから面白い部分が始まります。 ネイティブアプリケーションと同様に、プログレッシブWebアプリケーションにはホーム画面用の独自のアイコンがあり、クリックすると、Chromeブラウザーのシェルなしでアプリケーションが起動します。 これは、アドレスバーとナビゲーションボタンがないことを意味します。 通常の電話ステータスバーと、ほぼ全画面で表示されるアプリケーションのみ。



これは長い間続いています。 進化するクロスプラットフォーム標準の顕著な例外を除いて、特に新しいテクノロジーはありません。



ちょっとした歴史



iPhoneの夜明けには、アプリストアはありませんでした。 Steve Jobsは、開発者が標準のWebテクノロジーを使用してiPhone用のアプリケーションを作成することを望んでいました。



夢想家が正しいこともありますが、彼らは時代を先取りしています。 2年前を振り返ると、iPhone用のWebアプリを作成するというSteve Jobsの推奨は、ネイティブアプリが圧倒的に成功してきたため、Forbes誌から「 最大の間違い 」と呼ばれました。



今日、振り返ってみると、彼が何かを本当に感じていたのは明らかですが、当時の既存のWeb標準の可能性よりもはるかに先でした。



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



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



標準に準拠するアプリケーションは、プログレッシブWebアプリケーションと呼ばれます。プログレッシブ改善やレスポンシブアプリケーションなどの混乱を招く類似の用語と混同しないでください。



プログレッシブWebアプリケーションとは



プログレッシブWebアプリケーションは、モバイルデバイス用に開発および適合されたWebアプリケーションです。 ユーザーがアプリケーションの使用を継続することをブラウザが確認した場合、ユーザーはホーム画面にアプリケーションをインストールするようにユーザーに提案できます。 しかし、彼がこれを行うには、アプリケーションが特定の基準を満たす必要があります。





もちろん、今日のオフラインアプリケーションでは、HTTPSとサービスワーカーをオフラインユーザーに使用することが推奨されています。



多くのアプリケーション作成者が忘れているのは、プログレッシブWebアプリケーションを作成している場合、ブラウザシェルとナビゲーションジェスチャなしでアプリケーションを制御できることです。 モバイルデバイスでは、独自のナビゲーションをアプリケーションに組み込んだことをお勧めします。



たとえば、ページがある場合、このページにはアプリケーションのユーザーインターフェイスに戻るリンクが必要です。そうしないと、ユーザーはメイン画面に戻るためにアプリケーションを閉じて再度開く必要があります。



プログレッシブアプリケーション-手順



WebにはプログレッシブWebアプリケーションの作成に関する多くの情報がありますが、大部分は時代遅れであり、多くのソースにはアプリケーションの作成に必要なものの断片しか含まれていません。 それを修正しましょう。



HTTPSを有効にする



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







manifest.json



. (short_name



name



), url, . Android iOS :





Apple touch :



apple-touch-icon-180x180.png







180*180 . , , iOS - , -, .



iOS .



manifest.json:



{
  "name": "My Progressive Web Application",
  "short_name": "Progressive",
  "start_url": "/?home=true",
  "icons": [
    {
      "src": "/icons/icon36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/icons/icon48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icons/icon60.png",
      "sizes": "60x60",
      "type": "image/png"
    },
    {
      "src": "/icons/icon72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon76.png",
      "sizes": "76x76",
      "type": "image/png"
    },
    {
      "src": "/icons/icon96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon120.png",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
      "src": "/icons/icon152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/icons/icon192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#FFFFFF",
  "display": "fullscreen",
  "orientation": "portrait"
}


, . theme_color



, Android.



background_color



. Android name



( ) background_color



.





-, , Chrome Android, Safari /iOS. , Safari, , -.



iOS, , :







, , . web manifest polyfill,  manifest.json , iOS Windows phone Firefox OS.



:







— Edison, , .


More articles:


All Articles