PWAは夢を見るか夢になるか

Transcript

1. PWAは夢を見るか、夢になるか さざんか / sasanqua 6 September 2025 フロントエンドカンファレンス北海道2025 @sasanqua_dev
2. さざんか / sasanqua Web Frontend Engineer / Student 関東で大学生してます フロントエンド書いてます @sasanqua_dev sasanqua-dev 北海道に初上陸＆初登壇です
3. First Second Thrid Final What is PWA PWAの仕組み これからのPWA Agenda 1 PWAのこれまでの歴史
4. First Second Thrid Final What is PWA PWAの仕組み これからのPWA Agenda 2 PWAのこれまでの歴史
5. こんなアイコン見たことありませんか？ 意外と身近なPWA What is PWA 3
6. 意外と身近なPWA What is PWA 4
7. アプリケーションといえば What is PWA 5 ・Webアプリ 　　Webブラウザ上で動作するアプリケーション ・ネイティブアプリ 　　iOSやAndroidなどのデバイスにインストールして利用するアプリケーション
8. Progressive Web 「App」 What is PWA 6 ・Webアプリ 　　Webブラウザ上で動作するアプリケーション ・PWA ・ネイティブアプリ 　　iOSやAndroidなどのデバイスにインストールして利用するアプリケーション
9. PWAの特徴 What is PWA 7 ・URLを介して提供できる ・クロスプラットフォーム Webに近い特徴 モバイルアプリに近い特徴 ・インストールが可能 ・オフラインで動作可能
10. 「インストールが可能」 What is PWA 8
11. ブックマークと何が違うのか What is PWA 9
12. ブックマークと何が違うのか What is PWA 10 ブックマーク（Qiita BookMark）は Chromeが生成している画像が アイコンとして表示される （with Chrome アイコン） BookMark
13. ブックマークと何が違うのか What is PWA 11 PWAはqiita.comのManifestで 設定されている画像がアイコンとして 設定されている PWA
14. ブックマークと何が違うのか What is PWA 12 PWA
15. ブックマークと何が違うのか What is PWA 13 リンク先は「chrome_proxy.exe」に対して 「https://qiita.com」を指定 BookMark
16. ブックマークと何が違うのか What is PWA 14 PWA リンク先は「chrome_proxy.exe」に対して 「app_id」を指定
17. 立ち上げ時の挙動 What is PWA 15 Chromeのウィンドウが立ち上がる BookMark
18. 立ち上げ時の挙動 What is PWA 16 PWA 独立ウィンドウで立ち上がる
19. 立ち上げ時の挙動（モバイル） What is PWA 17 PWA スプラッシュ画面も表示される
20. First Second Thrid Final What is PWA PWAの仕組み これからのPWA Agenda 18 PWAのこれまでの歴史
21. キーワード PWAの仕組み 19 ・マニフェスト ・サービスワーカー ウェブブラウザとウェブサーバー間のプロキシとして機能 するJavaScript アセット PWAについての情報を提供する JSON ファイル
22. どのようにしてインストールできるのか（Installable） PWAの仕組み 20 ・Web App Manifest（マニフェスト）を設定することで 　インストールが可能になる 設定できる項目： https://developer.mozilla.org/en- US/docs/Web/Progressive_web_apps/Manifest
25. Webブラウザ Service Worker Webサーバー ブラウザ内ストレージ なぜオフラインでも動作するのか（Network independent） PWAの仕組み 23 ・Service Workerによってキャッシュを利用する形で 　動作することができる ブラウザ
26. Webブラウザ Service Worker Webサーバー ブラウザ内ストレージ なぜオフラインでも動作するのか（Network independent） PWAの仕組み 24 ・Service Workerによってキャッシュを利用する形で 　動作することができる ブラウザ オフライン時
27. キャッシュ戦略 PWAの仕組み 25 ・キャッシュ優先 ・キャッシュ更新付きキャッシュ優先 ・ネットワーク優先 キャッシュがある場合はキャッシュを返す ネットワークから取得したものをキャッシュしつつ キャッシュを返す
28. 既存のNext.jsプロジェクトにPWAを組み込む PWAの仕組み 26 １．next-pwaを導入する
29. 既存のNext.jsプロジェクトにPWAを組み込む PWAの仕組み 27 ２．manifestを作成する
30. 既存のNext.jsプロジェクトにPWAを組み込む PWAの仕組み 28 ３．_document.tsxを設定する ・headタグ内のlinkとしてmanifestへのパスを設定 ・headタグ内にtheme-colorを設定
31. First Second Thrid Final What is PWA PWAの仕組み これからのPWA Agenda 29 PWAのこれまでの歴史
32. PWAの歴史 ～2010年くらい ～ PWAのこれまでの歴史 30 レスポンシブデザインの発表 CSS3で標準化されたメディアクエリ（@media）を 利用してブラウザの画面に応じた要素表示を行うデザイン 「レスポンシブデザイン」が普及した メディアクエリは1997年のHTML4勧告に示されたのち 2000年にW3Cで制定が開始された。
33. PWAの歴史 ～2015年くらい ～ PWAのこれまでの歴史 31 Progressive Web Appsの発表 Chrome Dev Summit 2015の基調講演にてPWAが発表される。 Webをよくしていくための ・Reliability ・Performance ・Engagement の3つの方向性が示された
34. PWAの歴史 ～最近 ～ PWAのこれまでの歴史 32 iOS 16.4でのPWAの通知対応（2023） iOS16.4でPWAとしてインストールしたアプリからの 通知がサポートされた 2024にサポートの撤回が発表されたが多くの批判を集めたため 撤回が撤回された
35. First Second Thrid Final What is PWA PWAの仕組み これからのPWA Agenda 33 PWAのこれまでの歴史
36. ブラウザAPI これからのPWA 34 ◇ 広く使えるAPI ◇ 実験的なAPI ・位置情報 ・カメラ ・シリアル通信 ・NFC （・拡張子への関連付けの登録）
37. PWAという選択肢 これからのPWA 35 「Webの実装だけでクロスプラットフォーム対応ができる」 端末ネイティブな機能を実装しない （既存のWebアプリが担っているような機能） であればネイティブアプリの開発よりもPWA対応を選択肢に 入れてみませんか？
38. これからのPWA これからのPWA 36 ◇ いいこと ◇ 悪いこと ウェブAPIの対応やWeb技術の発展によってできることは 着実に増えている プラットフォーム提供側としてはネイティブアプリを推奨したいはず 手軽に実装できるからこそ信頼性の確保が課題 → iOSのようにサポートされなかったり撤回される可能性がある
39. PWAは夢を見るか、夢になるか これからのPWA 37 PWAは「PWA」として機能があるわけではなく 最新のWeb技術を使って従来のWebアプリよりも優れたエクスペリエンスを 提供するための手法 各ブラウザがPWAをサポートし続け、サポートされるウェブAPIが増え続ける ならばいつかはネイティブアプリと変わらないユーザー体験を得られるだろう
40. PWAは夢を見るか、夢になるか さざんか / sasanqua 6 September 2025 フロントエンドカンファレンス北海道2025 @sasanqua_dev