前のブログでは、プログレッシブWebアプリ（PWA）とは何かについて説明しました。今日は、優れたPWAを構築するために必要なことについて理解を深めていきます。
アプリケーションを定義する要素を簡単に見てみましょう。 - デバイスのホーム画面ですばやくアクセスできるアプリケーションアイコン - 背景でファイルやプログラムをロードするスプラッシュ画面 - 迅速にロードする、スムーズで魅力的で安全な体験 - キャッシュされたコンテンツを使用したオンラインおよびオフラインエクスペリエンス - プッシュ通知 - ブラウザの検索バーが不要
これらの機能は、ブラウザにネイティブに存在します。アクセス可能なHTML5 APIをブラウザですぐに確認することができます。
##プログレッシブWebアプリを構築する主な手順
モバイルネットワークの世界の制約を考慮しながら、これらのすべてのAPIを活用するには、技術的には、次のことが必要です。
- アプリケーションシェル（またはアプリシェル）を定義し構築する
- サービスワーカーを介してキャッシュを管理することでコンテンツのロードを最適化する
- アプリケーションのような経験を更に改良するために、アプリケーションマニフェストを定義する
- ユーザに安全でセキュアなブラウジングを提供する
アプリケーションのUIスケルトンをデータから分離して、速度に集中します。Googleのイラスト。画像ソース
アプリシェルには、プログレッシブWebアプリの基本的なユーザインタフェースを表示するための、アプリケーションの最小限のHTML、CSS、および主要コンポーネントが含まれています。アプリケーションのUIをデータから完全に分離して、初期ロード時の速度に集中します。アプリシェルが定義され、最初のアプリスケルトンとしてロードされると、サービスワーカーがそのシーンに入ります。
サービスワーカーは、イベントを捕まえてネットワーク要求の処理方法を制御するための保証に基づいたワーカースクリプトです。これはあなたのアプリとは独立しており、しばしばプロキシとして記述されます。これらのワーカーは、あなたのアプリシェルをキャッシュし、ネットワークの状態に依存せずに、バックグラウンドコンテンツの更新とコンテンツキャッシュの管理も行います。オフラインの場合、ユーザは接続を待つ間にキャッシュされたデータをブラウズし、サーバから最新のデータを取得します。webプッシュ通知の管理もしてくれるので、助かります。
次のステップでは、アプリケーションマニフェストを定義して、ユーザの関与の仕方を制御します。アプリケーションマニフェストはJSONファイルで、ユーザのホーム画面用のアイコンと名前を定義し、リソースをキャッシュからダウンロードまたは復元している間にスプラッシュ画面を定義し、テーマの色を設定し、初期のページ向きを指定し、ブラウザの検索バーもなくし、ネイティブのアプリケーション感覚を向上させることができます。
Webアプリはほぼ準備ができています。最後に、PWAがユーザにとって安全でセキュアであることを確認してください。ユーザは、HTTPSを使って安全な情報源から提供を受ける必要があります。さあ、どうぞ！あなたには、今、優れた、安全で、接続に依存しない、常に最新かつ記憶に残るアプリケーションを構築する鍵が用意されています。
さあ、コードを書いてください！PWAを構築するのに役立つ最高のリンクを集めました。
スターターキット
あなたの最初のプログレッシブWebアプリ
プログレッシブWebアプリの初心者ガイド
Webには今、何ができるか？
https://pwa.rocks/
App Shell、AMP＆Webプッシュ通知
アプリシェルモデル
アクセラレーションモバイルページ（AMP）
Webプッシュ通知：適時でかつ関連性が高く、正確
サービスワーカー & HTTPS
https://serviceworke.rs/
サービスワーカー：概要
サービスワーカーのレシピ
なぜHTTPSか
混合コンテンツの防止
ツール、テスト、デバッグ
Lighthouseを使ってWebアプリを監査する
プログレッシブWebアプリのデバッグ
プログレッシブWebアプリチェックリスト
プログレッシブWebアプリサミット2016ビデオ
TwitterでPWAの経験を楽しく共有してください！