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
730
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
TDDと今まで
kanayannet
0
200
個人開発 稼げなくてもいいアプリ
kanayannet
0
320
システムの堅牢性
kanayannet
0
160
Agile的学習方法
kanayannet
0
180
GUIをエンジニアが考える
kanayannet
0
150
http2http3
kanayannet
0
130
old typeからのクラウドインフラ
kanayannet
0
280
疎結合と認知
kanayannet
0
300
クリーンアーキテクチャを活かす考察
kanayannet
1
180
Other Decks in Programming
See All in Programming
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Try creating your own orderedmap
kazamori
1
270
Git Rebase
bkuhlmann
11
1.6k
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
540
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
290
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
930
Hanami and htmx
bkuhlmann
0
230
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
530
PostmanでAPIの動作確認が楽になった話
h455h1
0
190
Documentation for users with AsciiDoc and Antora
ahus1
0
370
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Designing with Data
zakiwarfel
96
4.8k
Web Components: a chance to create the future
zenorocha
306
41k
A Philosophy of Restraint
colly
197
16k
How to Ace a Technical Interview
jacobian
273
22k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Navigating Team Friction
lara
179
13k
How GitHub (no longer) Works
holman
305
140k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Become a Pro
speakerdeck
PRO
13
4.6k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。