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
1k
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
MCP で「こいつ動くぞ」
kanayannet
0
80
無関心の谷
kanayannet
0
560
生成AIの使いどころ
kanayannet
0
190
github copilot と 心理的安全性
kanayannet
0
220
FW と ライブラリ の考え方
kanayannet
0
240
TDDと今まで
kanayannet
0
570
個人開発 稼げなくてもいいアプリ
kanayannet
0
540
システムの堅牢性
kanayannet
0
310
Agile的学習方法
kanayannet
0
290
Other Decks in Programming
See All in Programming
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
820
明日から始めるリファクタリング
ryounasso
0
140
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
私はどうやって技術力を上げたのか
yusukebe
43
18k
XP, Testing and ninja testing ZOZ5
m_seki
3
630
All About Angular's New Signal Forms
manfredsteyer
PRO
0
120
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
810
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
220
CSC305 Lecture 05
javiergs
PRO
0
210
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
Embracing the Ebb and Flow
colly
88
4.8k
Why Our Code Smells
bkeepers
PRO
339
57k
A better future with KSS
kneath
239
18k
Navigating Team Friction
lara
190
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
RailsConf 2023
tenderlove
30
1.2k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。