Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
今更聞けないPWA
kanayannet
August 01, 2020
Programming
0
380
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
old typeからのクラウドインフラ
kanayannet
0
42
疎結合と認知
kanayannet
0
86
クリーンアーキテクチャを活かす考察
kanayannet
1
83
プロジェクト管理ツールの経験則
kanayannet
0
150
TDDと認知
kanayannet
0
150
gunmaweb-serverless
kanayannet
0
120
Animation GIF
kanayannet
0
190
jojo-naive
kanayannet
0
160
pattern
kanayannet
0
160
Other Decks in Programming
See All in Programming
Let's make a contract: the art of designing a Java API
mariofusco
0
160
dbtとBigQueryで始めるData Vault入門
kazk1018
0
250
【Qiita Night】新卒エンジニアによるSwift6与太予想
eiji127
0
190
NieR Re[in]carnationにおけるUnityアニメーション活用術
applibot
1
960
A technique to implement DSL in Ruby
okuramasafumi
0
830
LegalForceの契約データを脅かすリスクの排除と 開発速度の向上をどうやって両立したか
aibou
0
630
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
3.5k
Swift Concurrencyによる安全で快適な非同期処理
tattn
2
340
Oculus Interaction SDK 概説 / xrdnk-caunity-LT4
xrdnk
0
300
マイクロインタラクション入門〜ディテイルにこだわるエンジニアリング〜
swimmyxox
0
120
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
300
Named Document って何?
harunakano
0
610
Featured
See All Featured
What the flash - Photography Introduction
edds
61
10k
Debugging Ruby Performance
tmm1
65
10k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Automating Front-end Workflow
addyosmani
1351
200k
Visualization
eitanlees
124
11k
The Invisible Side of Design
smashingmag
289
48k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Building an army of robots
kneath
299
40k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。