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
無関心の谷
kanayannet
0
490
生成AIの使いどころ
kanayannet
0
180
github copilot と 心理的安全性
kanayannet
0
220
FW と ライブラリ の考え方
kanayannet
0
240
TDDと今まで
kanayannet
0
570
個人開発 稼げなくてもいいアプリ
kanayannet
0
540
システムの堅牢性
kanayannet
0
310
Agile的学習方法
kanayannet
0
290
GUIをエンジニアが考える
kanayannet
0
260
Other Decks in Programming
See All in Programming
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
🔨 小さなビルドシステムを作る
momeemt
4
690
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
旅行プランAIエージェント開発の裏側
ippo012
2
930
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
AIでLINEスタンプを作ってみた
eycjur
1
230
個人軟體時代
ethanhuang13
0
330
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
アセットのコンパイルについて
ojun9
0
130
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
A Tale of Four Properties
chriscoyier
160
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Done Done
chrislema
185
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Bash Introduction
62gerente
615
210k
4 Signs Your Business is Dying
shpigford
184
22k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Making Projects Easy
brettharned
117
6.4k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。