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
940
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
github copilot と 心理的安全性
kanayannet
0
120
FW と ライブラリ の考え方
kanayannet
0
180
TDDと今まで
kanayannet
0
500
個人開発 稼げなくてもいいアプリ
kanayannet
0
480
システムの堅牢性
kanayannet
0
260
Agile的学習方法
kanayannet
0
250
GUIをエンジニアが考える
kanayannet
0
210
http2http3
kanayannet
0
170
old typeからのクラウドインフラ
kanayannet
0
350
Other Decks in Programming
See All in Programming
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
260
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
190
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
100
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
ML.NETで始める機械学習
ymd65536
0
230
Ruby on cygwin 2025-02
fd0
0
180
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
PRレビューのお供にDanger
stoticdev
1
230
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Practical Orchestrator
shlominoach
186
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
BBQ
matthewcrist
87
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。