プログレッシブWebアプリの紹介

ほとんどの開発者は少なくともいくつかの話題を聞いたことがあります プログレッシブWebアプリ. これらは、グーグルなどのハイテク企業によって広く支持されており、急速に普及しつつあります。 マルチデバイスWebアプリケーションの標準.

しかし、正確には何ですか 典型的なの違い そして プログレッシブ Webアプリ?

開発者向け, それは違いの全世界です. プログレッシブWebアプリは最新のWeb APIを使用して ネイティブアプリのエクスペリエンスを作成する ブラウザで。つまり、開発者はハイブリッドフレームワークを使用せずに高速ロードの動的アプリケーションを構築できます。.

このガイドでは、 プログレッシブWebアプリの基本, いくつかの主な機能、そしてどのようにあなたはあなた自身のものを作り始めることができるか.

プログレッシブWebアプリとは?

プログレッシブWebアプリ（またはPWA） WebブラウザのAPIを利用する あらゆるデバイス上のブラウザでネイティブのアプリエクスペリエンスを作成する.

究極的には、プログレッシブWebアプリは 一握りの技術 開発者は、強力なネイティブのようなアプリケーションを作成するために使用できます。多くの人が Web API のような サービスワーカーAPI または プッシュAPI.

がある かなりの数の要件 何かをPWAと呼びますが、これらは 最も重要なもの：

いっぱいです モバイルレスポンシブ.
に準拠する プログレッシブエンハンスメント.
できる ローカルにインストール スマートフォンやタブレットで.
オフラインで実行 インターネットなしで、サービスワーカーを使う.
機能とコンテンツを分離 アプリシェルを使用する.
HTTPSに基づいて構築 より高いセキュリティのために.
発見可能 Google検索で.
あり 動的なアプリ風ページ それでもそれぞれ 独自のURLを持っています.

もしあなたが〜なら 小さなWebアプリを作ることを考えている 代わりにProgressive Web Appを作成してみてください。これには少し習熟曲線がありますが、そんなにたくさんあります ユーザーエクスペリエンスをさらに制御する 結果として.

プログレッシブWebアプリの基礎を掘り下げて、それらが重要になる理由を学びましょう。.

サービス作業員

プログレッシブWebアプリ サービス要員が必要. これらは 交通官のように トラフィックの行き先、データの行き先、およびその調整方法 すべて整理されキャッシュされます.

簡単に言えば、サービスワーカーは JavaScriptファイルとして動作 Webアプリのバックグラウンドで実行されます。ユーザーはいつでも イベントを実行する, それは サービスワーカースクリプト データを引き出す、データを保存する、またはその両方!

を使う サービスワーカーAPI です 本質的な オフラインでサポートされているPWAを実行する。これはどのようにあなたです ビュー間でデータを送信する そしてどのようにあなたはできる ローカルデータベースからデータを要求する. しかし、これは主にPWAプロジェクトに取り組むことによって学ぶ高度なものです。.

でのぞき見をする サービスワーカークックブック にとって 基本スニペット そして ライブデモ. これは他の人がしたことを研究することによって学ぶための素晴らしい方法です あなた自身のアプリでそれを複製する.

プログレッシブWebアプリを作成したい場合 Service Worker APIから始める. ちょっとそれをいじくり回して、そしてローカルで簡単なデモをセットアップしなさい。これは後で土台を設定するでしょう カスタムアプリケーション機能とページの構築 それはすべてサービスワーカーを介して実行されます.

にとって 初心者向けガイド そして 詳細なコードスニペット, 私は特にこれらのリソースをお勧めします。

サービスワーカー入門
サービスワーカーを始めよう
サービス担当者のサンプル：カスタムオフラインページのサンプル

アプリシェル

ほとんどのネイティブアプリ アプリシェルアーキテクチャに従う データとアプリのコードは UIから完全に分離. アプリケーションシェルは ローカルにキャッシュ だから各ページは非常に速くロードされます.

これは同じです “ネイティブアプリ” どこで感じる インターフェースは常に表示されたままになります しかし コンテンツ/機能のロード方法が異なります 毎回。 Google Developersサイトのこのページをチェックして、Googleについてもう少し詳しく学んでください。 アプリシェルモデル.

ほとんどのアプリには とてもシンプルなアプリシェル そしてあなたはあなたのアーキテクチャをでデザインするべきです シンプルさを念頭に置いて.

通常、アプリシェルにはこれらがあります。 主な要素：

トップナビゲーションバーのリンク.
更新ボタン（オプション）.
ページバックグラウンドコンテナ.

あなたはここについて素晴らしいケーススタディを見つけることができます GoogleのI / O Progressive Web Appシェルアーキテクチャ. それらはまたあなた自身のシェルアーキテクチャを構築し、それをキャッシュするためのいくつかのヒントを提供します、そして ページごとに自動的に引っ張る.

シェルアーキテクチャを すべての静的UI要素 あなたはすべての単一のページで使うでしょう。これらは コードの残りの部分から分離されている 簡単に再利用できるようにキャッシュされています。またチェックアウト Googleのイントロ たくさんのコードで主題に あなたが始めるのを助けるためにスニペット.

オンラインとオフラインのサポート

ほとんどのネイティブアプリ インターネットなしでうまく動く. プログレッシブWebアプリもこれと同じ動作をするように意図されています.

サービスワーカーを通して、あなたはすることができます ローカルキャッシュを構築する 各ページのJSONコード付き。このようにしてユーザーはできる Webアプリをローカルで閲覧する. あなたも マニフェストファイルを含める アイコン、スプラッシュスクリーン、その他の起動設定を定義する.

Service Worker APIを使用している場合は、 キャッシュAPI どちらですか 同じフレームワークの一部. それは一般的に最善の方法です データをローカルに保存する そして サービスワーカーからアクセスする 後.

あなたもすることができます Webアプリをテストする 使う灯台, PWAテクノロジの機能コンプライアンスおよびサポートを確認するための無料ツール.

常にPWA オフラインサポートが必要 Service Worker APIを介して 接続性が低い状態で動作する. 灯台は、他の多くの機能とともにオフラインサポートをテストするための最良の方法です。.

実例

生きているPWAを研究し、それらがどのように機能するかを見ることは学ぶための素晴らしい方法です。しかし、プログレッシブWebアプリ市場は まだ新興, 最高のものがたくさんあります インターネットのさまざまな場所に散らばっている.

しかし、おかげで PWAロックスギャラリー, PWAが本当にできることを披露するために、いくつかの素晴らしい例をまとめました。.

通貨コンバータ

これはかなり簡単です 通貨換算 為替レートを取り、現在の 世界中の何トンもの通貨の違い.

このWebアプリは 完全に反応がよい, タッチをサポート, そして 自動更新 ページを更新せずに.

これらはあなたが誰にでも期待する機能のほんの一部です 典型的なプログレッシブWebアプリ. この アプリはローカルに保存することもできます 現在の為替レートを確認するためにJSONファイルに接続しますが、オフラインで作業するには携帯電話に接続します。.

2.英語のアクセント

それはユニークで信じられないほどうまく設計されているので私は単にこのWebアプリを崇拝する。の 英語アクセントマップ キュレート動画オンライン 人々がアメリカとイギリスの特定の地域からアクセントを持っているところ.

地図上の任意の場所をクリックすると、世界中のさまざまな場所で特定の単語がどのように発音されるのかを聞くことができます。アプリは速く超高速です、そしてそれはそれです GitHubでオープンソース化 誰でもチェックアウトできる.

内部が走る React / Redux と Firebase と GoogleマップへのAPI接続. 初心者が勉強したり習得したりするのに非常に単純な何かの確かに素晴らしい例.

3. Pokedex.org

もう一つの非常に単純なPWAはこれです Pokedexアプリ Nolan Lawsonによって作成されました。彼はまたこのコードを自由に公開しました GitHubで, だから私たちはまだ別のプロジェクトです スヌーピングして勉強する価値がある.

このデータは静的なままなので、 ローカルエンジンで処理 呼ばれる PouchDB. すべてのデータはPokeAPIから来て、そして普通のJavaScriptとして保存します。これはあなたができることを意味します 携帯電話にローカルに保存する 本当のネイティブアプリのように、インターネットに接続してもしなくても動作します。かなりかっこいいですよね?

全部が JavaScriptを搭載, つまり、フロントエンドのコードでどれだけできるかを証明するものです。それは使用しています たくさんのキャッシュ Service Worker APIを使って それは狂気の高速かつ超使いやすいです.

4.フリップカート

最後にそして最も驚くべきことに、 FlipkartのWebサイト. これいっぱい 電子商取引店は、実際には、プログレッシブWebアプリです。.

それは 完全に反応がよい そして 動的にページをロードする. ページのURLはブラウザに追加されるので、通常のWebサイトのようにコピーして貼り付けて共有できます。.

これは簡単です 私が今まで見た中で最も複雑なPWA. 開発者がすべてのユーザーに対してWeb上でこのようなシームレスなエクスペリエンスを作成できたことは驚きです。 ローカルオフラインストレージのサポート, も.

そして、私はFlipkartのソースコード全体のレポを見つけることができませんでしたが、 GitHubのFlipkartページ と 小さなコードスニペット 開発者チームから.

もっと学ぶ

プログレッシブWebアプリは 信じられないほど人気があり、確かに水蒸気を得るでしょう より多くの開発者がネイティブ/ハイブリッドアプリケーションから切り替えるにつれて.

と呼ばれる毎年のサミットがあります プログレッシブWebアプリサミット そして彼らはYouTubeであなたが無料で見ることができるビデオを公開します。これは素晴らしい方法です。 チケットの支払いをせずにプロの知識を習得する.

あなたがより詳細を探しているなら、しかし、 PWAコーディングガイド 間違いなくこれらのチュートリアルをチェックしてください。

プログレッシブWebアプリの初心者向けガイド
Reactを使って最初のプログレッシブWebアプリを作成する
ポリマーを使ったプログレッシブWebアプリケーションの構築