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
710
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
TDDと今まで
kanayannet
0
180
個人開発 稼げなくてもいいアプリ
kanayannet
0
130
システムの堅牢性
kanayannet
0
160
Agile的学習方法
kanayannet
0
170
GUIをエンジニアが考える
kanayannet
0
140
http2http3
kanayannet
0
120
old typeからのクラウドインフラ
kanayannet
0
280
疎結合と認知
kanayannet
0
300
クリーンアーキテクチャを活かす考察
kanayannet
1
170
Other Decks in Programming
See All in Programming
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
코틀린으로 멀티플랫폼 만들기
pangmoo
0
140
雑に思考を整理する技術と効能
konifar
58
28k
Hanami and htmx
bkuhlmann
0
200
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
480
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
110
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
260
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
160
Goのmultiple errorsについて (2024年4月版)
syumai
1
350
Elm Form Validation
bkuhlmann
0
510
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.1k
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
GraphQLとの向き合い方2022年版
quramy
31
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Navigating Team Friction
lara
177
13k
Facilitating Awesome Meetings
lara
41
5.6k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
It's Worth the Effort
3n
180
27k
Infographics Made Easy
chrislema
238
18k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
YesSQL, Process and Tooling at Scale
rocio
163
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
A better future with KSS
kneath
231
16k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。