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
970
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
無関心の谷
kanayannet
0
200
生成AIの使いどころ
kanayannet
0
150
github copilot と 心理的安全性
kanayannet
0
190
FW と ライブラリ の考え方
kanayannet
0
220
TDDと今まで
kanayannet
0
540
個人開発 稼げなくてもいいアプリ
kanayannet
0
520
システムの堅牢性
kanayannet
0
290
Agile的学習方法
kanayannet
0
280
GUIをエンジニアが考える
kanayannet
0
250
Other Decks in Programming
See All in Programming
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
Select API from Kotlin Coroutine
jmatsu
1
190
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
600
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
210
ReadMoreTextView
fornewid
1
490
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
600
PipeCDのプラグイン化で目指すところ
warashi
1
180
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
490
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
5つのアンチパターンから学ぶLT設計
narihara
1
130
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
BBQ
matthewcrist
89
9.7k
A Tale of Four Properties
chriscoyier
160
23k
Unsuck your backbone
ammeep
671
58k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Six Lessons from altMBA
skipperchong
28
3.9k
Code Review Best Practice
trishagee
68
18k
GitHub's CSS Performance
jonrohan
1031
460k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。