最新のプログレッシブ ウェブアプリ開発のあらゆる側面を詳しく解説するコースです。
このコースでは、プログレッシブ ウェブアプリ開発の基礎をわかりやすく説明します。以降のモジュールでは、プログレッシブ ウェブアプリの概要、ウェブアプリの作成方法、既存のウェブ コンテンツのアップグレード方法、インストール可能なオフライン アプリのすべての要素を追加する方法について学習します。モジュール間を移動するには、メニューペインを使用します。（メニューはパソコンの場合は左側、モバイルではハンバーガー メニューの後ろにあります）。
ウェブアプリ マニフェスト、Service Worker、アプリを念頭に置いて設計する方法、他のツールを使用して PWA をテストしてデバッグする方法など、PWA の基礎を学びます。これらの基礎を学んだ後は、プラットフォームやオペレーティング システムとの統合、PWA のインストールと使用を改善する方法、オフライン エクスペリエンスの提供方法について学びます。
各モジュールにはインタラクティブなデモと自己診断テストが含まれており、知識をチェックできます。 コーディングをしながらスマートフォン、タブレット、ノートパソコンでデモをテストしてみて、プログレッシブ ウェブアプリの基礎を理解できます。
このコースは、ウェブ デベロッパーの初心者から上級者までを対象としています。 このシリーズを最初から最後まで通じて、PWA の全体像を理解することができます。また、特定のテーマのリファレンスとして利用することもできます。ウェブ開発を初めて行う場合は、HTML、CSS、JavaScript の基礎知識が必要になります。 MDN の CSS について学習するコースと、HTML および JavaScript コースをご覧ください。
主な内容は次のとおりです。
ご利用にあたって
プログレッシブ ウェブアプリを構築する場合、どこから始めるべきか、ゼロから始めずにウェブサイトを PWA にアップグレードできるかどうか、プラットフォーム固有のアプリから PWA に移行する方法に疑問があるかもしれません。この記事では、そうした疑問に答える方法について説明します。
基礎
プログレッシブ ウェブアプリはすべて、その中核をなす最新のウェブサイトです。そのため、レスポンシブ デザイン、モバイルなど、あらゆること、本質的なデザイン、ウェブ パフォーマンスに関する強固な基盤がウェブサイトにあることが重要です。
アプリの設計
プログレッシブ ウェブアプリと従来のウェブサイトおよびウェブアプリの主な違いの一つは、インストールしやすさです。これにより、プラットフォームやオペレーティング システムとより統合されたスタンドアロンのエクスペリエンスが実現します。インストールにより、コンテンツの周囲にブラウザのユーザー インターフェースがなくなるため、柔軟性と責任が新たに生まれます。
アセットとデータ
プログレッシブ ウェブアプリはウェブサイトです。すべてのアセットはウェブと同じですが、新しいツールが追加され、オンラインの場合はアセットの読み込みが速くなり、オフラインでもアセットが利用できるようになります。
Service Worker
Service Worker は PWA の基礎となる部分です。これにより、ネットワークに関係なく高速読み込み、オフライン アクセス、プッシュ通知などの機能が可能になります。
キャッシュ保存
Cache Storage API を使用して、デバイス上のアセットをダウンロード、保存、削除、更新できます。そうすれば、これらのアセットをネットワーク リクエストなしでデバイス上で配信できます。
処理中
Service Worker の fetch イベントを使用すると、ネットワーク リクエストをインターセプトし、さまざまな手法でレスポンスを提供できます。
ワークボックス
Workbox は、ルーティングやキャッシュなどの一般的な Service Worker の操作を簡素化する一連のモジュールです。各モジュールは、Service Worker 開発の特定の側面に対応しています。Workbox は、Service Worker を可能な限り簡単に使用できるようにするとともに、必要に応じて複雑なアプリケーション要件に対応する柔軟性を持たせることを目的としています。
オフライン データ
しっかりとしたオフライン エクスペリエンスを構築するには、ストレージ管理を実装する必要があります。IndexedDB、Cache、Storage Manager、永続ストレージ、Content Indexing などのツールが有用です。
インストール
インストール済みのアプリに簡単にアクセスでき、OS とのより緊密な統合を利用できます。PWA をインストール可能にし、そのメリットを得る方法を学びます。
ウェブアプリ マニフェスト
ウェブアプリ マニフェストは、オペレーティング システム内でのデザインや基本的な動作など、PWA をインストール済みアプリケーションとして扱う方法を定義する JSON ファイルです。
インストール プロンプト
PWA のインストール基準を満たすサイトの場合、ブラウザはユーザーにインストールを求めるイベントをトリガーします。このイベントを使用してメッセージをカスタマイズし、アプリをインストールするようユーザーを招待できます。
更新
PWA を更新する必要がある場合があります。この章では、アセットからメタデータまで、PWA のさまざまな部分を更新するためのツールについて説明します。
機能強化
ユーザーは優れたエクスペリエンスを期待しています。この章では、スプラッシュ画面、アプリのショートカット、セッションの仕組みで PWA を強化する方法について説明します。
検出
ユーザーがアプリをどのように操作しているかを特定することは、ユーザー エクスペリエンスのカスタマイズと改善に役立ちます。たとえば、アプリがユーザーのデバイスにすでにインストールされているかどうかを確認し、ブラウザからスタンドアロン アプリにナビゲーションを転送するなどの機能を実装できます。
OS Integration
これで、PWA がブラウザの外部で機能するようになりました。この章では、ユーザーがアプリをインストールした後、オペレーティング システムとさらに統合する方法について説明します。
ウィンドウ管理
ブラウザ外の PWA は、自身のウィンドウを管理します。この章では、オペレーティング システム内でウィンドウを管理するための API と機能について説明します。
試験運用版の機能
まだ作成中の PWA 機能があり、皆様もその開発にご協力いただけます。この章では、Fugu プロジェクト、オリジン トライアルの登録方法、試験運用版 API の使用方法について説明します。
ツールとデバッグ
プログレッシブ ウェブアプリの開発、デバッグ、テストに利用できるツールを紹介します。
アーキテクチャ
PWA の開発時には、単一ページ アプリケーションとマルチページ アプリケーションのどちらを作成するか、ドメインのルートでホストするかフォルダ内でホストされるかなど、いくつかの決定を行います。
複雑さの管理
ウェブアプリをシンプルに維持するのは、驚くほど複雑です。このモジュールでは、ウェブ API とスレッドが連携する仕組みと、状態管理などの一般的な PWA パターンにウェブ API を使用する方法について学習します。
機能
PWA は画面に縛られるだけではありません。この章では、ハードウェア、センサー、プラットフォームの使用状況の観点から、現在 PWA に搭載されている機能について説明します。
まとめ
次のステップとリソース
では、PWA について学びましょう。