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
780
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
FW と ライブラリ の考え方
kanayannet
0
86
TDDと今まで
kanayannet
0
270
個人開発 稼げなくてもいいアプリ
kanayannet
0
390
システムの堅牢性
kanayannet
0
190
Agile的学習方法
kanayannet
0
200
GUIをエンジニアが考える
kanayannet
0
170
http2http3
kanayannet
0
130
old typeからのクラウドインフラ
kanayannet
0
300
疎結合と認知
kanayannet
0
330
Other Decks in Programming
See All in Programming
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
유연한 Composable 설계
l2hyunwoo
0
380
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
CSC307 Lecture 08
javiergs
PRO
0
330
Advanced App Shrinking Techniques
cbeyls
2
150
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
In The Pink: A Labor of Love
frogandcode
139
22k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Clear Off the Table
cherdarchuk
89
320k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Scaling GitHub
holman
458
140k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。