2003 年 3 月、Nick Finck と Steve Champeon は、プログレッシブ エンハンスメントの概念でウェブ デザインの世界に衝撃を与えました。プログレッシブ エンハンスメントとは、まずウェブページのコア コンテンツを重視し、コンテンツの上に微妙に技術的に厳密な表示レイヤーや機能を徐々に追加する手法です。2003 年の段階的な機能向上とは、当時の CSS 機能である最新の CSS 機能、邪魔にならない JavaScript、さらには Scalable Vector Graphics を使うものでしたが、2020 年の段階的な機能拡張とは、最新のブラウザ機能を使うことです。
この講演では、グリーティング カード ウェブ アプリケーションの例をご紹介します。新しいブラウザ機能と今後登場するブラウザ機能により、このアプリケーションを段階的に拡張して最新のすべてのブラウザで便利に使えるようにしながら、ネイティブ ファイル システム アクセス、システム クリップボード アクセス、連絡先取得、定期的なバックグラウンド同期、画面の wake lock、共有機能などをサポートするブラウザには高度なエクスペリエンスを提供します。
このセッションをご覧いただくと、開発者は、ブラウザの新機能でウェブ アプリケーションを段階的に強化する方法をしっかりと理解できるようになります。同時に、互換性のないブラウザを使用する一部のユーザーにダウンロードの負担を負わせることもなく、最も重要な点として、そもそもウェブ アプリケーションの使用を除外せずに済みます。
リソース:
- GitHub の Fugu への挨拶 → https://goo.gle/2VkuwYM
- 新機能のステータス → https://goo.gle/3dEcyH2
- 動画作成 → https://web.dev/progressively-enhance-your-pwa/
Web.dev Live 2 日目の再生リストを見る
講演者: Thomas Steiner