Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今更聞けないPWA
Search
kanayannet
August 01, 2020
Programming
0
1k
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
MCP で「こいつ動くぞ」
kanayannet
0
84
無関心の谷
kanayannet
0
610
生成AIの使いどころ
kanayannet
0
190
github copilot と 心理的安全性
kanayannet
0
220
FW と ライブラリ の考え方
kanayannet
0
240
TDDと今まで
kanayannet
0
580
個人開発 稼げなくてもいいアプリ
kanayannet
0
540
システムの堅牢性
kanayannet
0
310
Agile的学習方法
kanayannet
0
290
Other Decks in Programming
See All in Programming
SODA - FACT BOOK(JP)
sodainc
1
8.9k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
140
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
660
Six and a half ridiculous things to do with Quarkus
hollycummins
0
220
AI Agent 時代的開發者生存指南
eddie
4
2.1k
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
Software Architecture
hschwentner
6
2.3k
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
zsmb
1
110
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
技術的負債の正体を知って向き合う
irof
0
270
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Writing Fast Ruby
sferik
630
62k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
RailsConf 2023
tenderlove
30
1.3k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
KATA
mclloyd
PRO
32
15k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Transcript
今さら聞けない PWA Gunma.web #38 Gunma.web #38 @kanayannet @kanayannet
PWA とは
PWA とは プログレッシブウェブアプリの略 ネイティブアプリに近い動きをもたらすウェブアプ リのこと
PWA を構成するもの
PWA を構成するもの 安全なコンテキスト manifest le service worker
安全なコンテキスト localhost か https
理由 service worker ( 後述) を install 出来ないため
localhost? ⾃分の端末でテストする
グローバルに公開するに はhttps
manifest file { "name": "pwa gunmaweb", "short_name": "pwa-gunmaweb", "icons": [
{ "src": "/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
service worker 記述する⾔語: JS JS だけど制約が⾊々ある 例: dom にアクセスできない o
ine で表⽰可能などnative アプリっぽい挙動を可 能にする web のJS とは全く異なる制御をする
None
service worker 読込⽅法 if ('serviceWorker' in navigator) { console.log('service worker
is active'); navigator.serviceWorker.register('/sw.js').then(function (regis // 登録成功 console.log('ServiceWorker registration successful with scop }).catch(function (err) { // 登録失敗 :( console.log('ServiceWorker registration failed: ', err); }); }
service worker 記述例 // self.addEventListener('install', function (e) { console.info('install', e);
}); // self.addEventListener('activate', function (e) { console.info('activate', e); }); // self.addEventListener('fetch', function (e) { console.info('fetch', e); });
少しだけデモを⾒せま す。 https://pwa-gunmaweb-e6457.web.app/
参考 Try PWA MDN google https://www.amazon.co.jp/dp/B07ZV4CPXQ/ https://developer.mozilla.org/ja/docs/Web/API/Ser https://developers.google.com/web/fundamentals
まとめ 今回は最低限の実装 最低限の実装でここまで出来る o ine 対応などもあるが、今回は時間over どっか でハンズオンやりたい。 push noti
cation もあるが、時間over のためここま で
ご清聴ありが とうございま した。
質疑応答 実は PWA の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。