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
980
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
無関心の谷
kanayannet
0
270
生成AIの使いどころ
kanayannet
0
160
github copilot と 心理的安全性
kanayannet
0
200
FW と ライブラリ の考え方
kanayannet
0
230
TDDと今まで
kanayannet
0
550
個人開発 稼げなくてもいいアプリ
kanayannet
0
520
システムの堅牢性
kanayannet
0
300
Agile的学習方法
kanayannet
0
280
GUIをエンジニアが考える
kanayannet
0
250
Other Decks in Programming
See All in Programming
Go製CLIツールをnpmで配布するには
syumai
0
790
CDK引数設計道場100本ノック
badmintoncryer
2
590
Comparing decimals in Swift Testing
417_72ki
0
120
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.2k
新しいモバイルアプリ勉強会(仮)について
uetyo
1
200
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
3k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
650
構文解析器入門
ydah
7
1.9k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Practical Orchestrator
shlominoach
189
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Designing for humans not robots
tammielis
253
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Site-Speed That Sticks
csswizardry
10
730
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Bash Introduction
62gerente
613
210k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。