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

by さざんか / sasanqua

Slide 1

Slide 1 text

PWAは夢を見るか、夢になるかさざんか / sasanqua 6 September 2025 フロントエンドカンファレンス北海道2025 @sasanqua_dev

Slide 2

Slide 2 text

さざんか / sasanqua Web Frontend Engineer / Student 関東で大学生してますフロントエンド書いてます @sasanqua_dev sasanqua-dev 北海道に初上陸＆初登壇です

Slide 3

Slide 3 text

First Second Thrid Final What is PWA PWAの仕組みこれからのPWA Agenda 1 PWAのこれまでの歴史

Slide 4

Slide 4 text

First Second Thrid Final What is PWA PWAの仕組みこれからのPWA Agenda 2 PWAのこれまでの歴史

Slide 5

Slide 5 text

こんなアイコン見たことありませんか？意外と身近なPWA What is PWA 3

Slide 6

Slide 6 text

意外と身近なPWA What is PWA 4

Slide 7

Slide 7 text

アプリケーションといえば What is PWA 5 ・Webアプリ　　Webブラウザ上で動作するアプリケーション・ネイティブアプリ　　iOSやAndroidなどのデバイスにインストールして利用するアプリケーション

Slide 8

Slide 8 text

Progressive Web 「App」 What is PWA 6 ・Webアプリ　　Webブラウザ上で動作するアプリケーション・PWA ・ネイティブアプリ　　iOSやAndroidなどのデバイスにインストールして利用するアプリケーション

Slide 9

Slide 9 text

PWAの特徴 What is PWA 7 ・URLを介して提供できる・クロスプラットフォーム Webに近い特徴モバイルアプリに近い特徴・インストールが可能・オフラインで動作可能

Slide 10

Slide 10 text

「インストールが可能」 What is PWA 8

Slide 11

Slide 11 text

ブックマークと何が違うのか What is PWA 9

Slide 12

Slide 12 text

ブックマークと何が違うのか What is PWA 10 ブックマーク（Qiita BookMark）は Chromeが生成している画像がアイコンとして表示される（with Chrome アイコン） BookMark

Slide 13

Slide 13 text

ブックマークと何が違うのか What is PWA 11 PWAはqiita.comのManifestで設定されている画像がアイコンとして設定されている PWA

Slide 14

Slide 14 text

ブックマークと何が違うのか What is PWA 12 PWA

Slide 15

Slide 15 text

ブックマークと何が違うのか What is PWA 13 リンク先は「chrome_proxy.exe」に対して「https://qiita.com」を指定 BookMark

Slide 16

Slide 16 text

ブックマークと何が違うのか What is PWA 14 PWA リンク先は「chrome_proxy.exe」に対して「app_id」を指定

Slide 17

Slide 17 text

立ち上げ時の挙動 What is PWA 15 Chromeのウィンドウが立ち上がる BookMark

Slide 18

Slide 18 text

立ち上げ時の挙動 What is PWA 16 PWA 独立ウィンドウで立ち上がる

Slide 19

Slide 19 text

立ち上げ時の挙動（モバイル） What is PWA 17 PWA スプラッシュ画面も表示される

Slide 20

Slide 20 text

First Second Thrid Final What is PWA PWAの仕組みこれからのPWA Agenda 18 PWAのこれまでの歴史

Slide 21

Slide 21 text

キーワード PWAの仕組み 19 ・マニフェスト・サービスワーカーウェブブラウザとウェブサーバー間のプロキシとして機能するJavaScript アセット PWAについての情報を提供する JSON ファイル

Slide 22

Slide 22 text

どのようにしてインストールできるのか（Installable） PWAの仕組み 20 ・Web App Manifest（マニフェスト）を設定することで　インストールが可能になる設定できる項目： https://developer.mozilla.org/en- US/docs/Web/Progressive_web_apps/Manifest

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Webブラウザ Service Worker Webサーバーブラウザ内ストレージなぜオフラインでも動作するのか（Network independent） PWAの仕組み 23 ・Service Workerによってキャッシュを利用する形で　動作することができるブラウザ

Slide 26

Slide 26 text

Webブラウザ Service Worker Webサーバーブラウザ内ストレージなぜオフラインでも動作するのか（Network independent） PWAの仕組み 24 ・Service Workerによってキャッシュを利用する形で　動作することができるブラウザオフライン時

Slide 27

Slide 27 text

キャッシュ戦略 PWAの仕組み 25 ・キャッシュ優先・キャッシュ更新付きキャッシュ優先・ネットワーク優先キャッシュがある場合はキャッシュを返すネットワークから取得したものをキャッシュしつつキャッシュを返す

Slide 28

Slide 28 text

既存のNext.jsプロジェクトにPWAを組み込む PWAの仕組み 26 １．next-pwaを導入する

Slide 29

Slide 29 text

既存のNext.jsプロジェクトにPWAを組み込む PWAの仕組み 27 ２．manifestを作成する

Slide 30

Slide 30 text

既存のNext.jsプロジェクトにPWAを組み込む PWAの仕組み 28 ３．_document.tsxを設定する・headタグ内のlinkとしてmanifestへのパスを設定・headタグ内にtheme-colorを設定

Slide 31

Slide 31 text

First Second Thrid Final What is PWA PWAの仕組みこれからのPWA Agenda 29 PWAのこれまでの歴史

Slide 32

Slide 32 text

PWAの歴史～2010年くらい～ PWAのこれまでの歴史 30 レスポンシブデザインの発表 CSS3で標準化されたメディアクエリ（@media）を利用してブラウザの画面に応じた要素表示を行うデザイン「レスポンシブデザイン」が普及したメディアクエリは1997年のHTML4勧告に示されたのち 2000年にW3Cで制定が開始された。

Slide 33

Slide 33 text

PWAの歴史～2015年くらい～ PWAのこれまでの歴史 31 Progressive Web Appsの発表 Chrome Dev Summit 2015の基調講演にてPWAが発表される。 Webをよくしていくための・Reliability ・Performance ・Engagement の3つの方向性が示された

Slide 34

Slide 34 text

PWAの歴史～最近～ PWAのこれまでの歴史 32 iOS 16.4でのPWAの通知対応（2023） iOS16.4でPWAとしてインストールしたアプリからの通知がサポートされた 2024にサポートの撤回が発表されたが多くの批判を集めたため撤回が撤回された

Slide 35

Slide 35 text

First Second Thrid Final What is PWA PWAの仕組みこれからのPWA Agenda 33 PWAのこれまでの歴史

Slide 36

Slide 36 text

ブラウザAPI これからのPWA 34 ◇ 広く使えるAPI ◇ 実験的なAPI ・位置情報・カメラ・シリアル通信・NFC （・拡張子への関連付けの登録）

Slide 37

Slide 37 text

PWAという選択肢これからのPWA 35 「Webの実装だけでクロスプラットフォーム対応ができる」端末ネイティブな機能を実装しない（既存のWebアプリが担っているような機能）であればネイティブアプリの開発よりもPWA対応を選択肢に入れてみませんか？

Slide 38

Slide 38 text

これからのPWA これからのPWA 36 ◇ いいこと ◇ 悪いことウェブAPIの対応やWeb技術の発展によってできることは着実に増えているプラットフォーム提供側としてはネイティブアプリを推奨したいはず手軽に実装できるからこそ信頼性の確保が課題 → iOSのようにサポートされなかったり撤回される可能性がある

Slide 39

Slide 39 text

PWAは夢を見るか、夢になるかこれからのPWA 37 PWAは「PWA」として機能があるわけではなく最新のWeb技術を使って従来のWebアプリよりも優れたエクスペリエンスを提供するための手法各ブラウザがPWAをサポートし続け、サポートされるウェブAPIが増え続けるならばいつかはネイティブアプリと変わらないユーザー体験を得られるだろう

Slide 40

Slide 40 text

PWAは夢を見るか、夢になるかさざんか / sasanqua 6 September 2025 フロントエンドカンファレンス北海道2025 @sasanqua_dev