Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5 minutes PWA

Tatsuya Arai
February 23, 2018
Technology
0
180

5 minutes PWA

Tatsuya Arai

February 23, 2018
Tweet

More Decks by Tatsuya Arai

See All by Tatsuya Arai
Androidアプリ開発における技術顧問としての役割 #DroidKaigi 2018
cutmail
1
2.3k
4年続くアプリにおけるチーム開発 #DroidKaigi 2017
cutmail
13
4.9k
フリルにおけるドッグフーディング / Fashion Tech Meetup #2 LT
cutmail
2
3.8k
Adapter and Custom Layout
cutmail
3
870
いかにして不具合発見時の フィードバックを素早く行うか #potatotips 12
cutmail
0
2.5k
Androidのログ出力をいい感じにする #potatotips 9
cutmail
8
9.6k
コーディング規約を緩く守りつつ仕事の成果を出す方法
cutmail
2
580

Other Decks in Technology

See All in Technology
20250116_JAWS_Osaka
takuyay0ne
2
200
iPadOS18でフローティングタブバーを解除してみた
sansantech
PRO
1
140
【Oracle Cloud ウェビナー】2025年のセキュリティ脅威を読み解く：リスクに備えるためのレジリエンスとデータ保護
oracle4engineer
PRO
1
100
ゼロからわかる！！AWSの構成図を書いてみようワークショップ 問題&解答解説 #デッカイギ #羽田デッカイギおつ
_mossann_t
0
1.5k
今から、 今だからこそ始める Terraform で Azure 管理 / Managing Azure with Terraform: The Perfect Time to Start
nnstt1
0
240
#TRG24 / David Cuartielles / Post Open Source
tarugoconf
0
580
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
540
テストを書かないためのテスト/ Tests for not writing tests
sinsoku
1
170
なぜfreeeはハブ・アンド・スポーク型の データメッシュアーキテクチャにチャレンジするのか？
shinichiro_joya
2
470
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
680
Amazon Route 53, 待ちに待った TLSAレコードのサポート開始
kenichinakamura
0
170
データ基盤におけるIaCの重要性とその運用
mtpooh
4
520

Featured

See All Featured
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Gamification - CAS2011
davidbonilla
80
5.1k
How GitHub (no longer) Works
holman
312
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Code Review Best Practice
trishagee
65
17k
KATA
mclloyd
29
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Making Projects Easy
brettharned
116
6k
The Language of Interfaces
destraynor
155
24k
Speed Design
sergeychernyshev
25
740

Transcript

  1. 5 minuts PWA

  2. PWAͱ͸ • Progressive Web Apps • ϞόΠϧ୺຤ͰϖʔδΛදࣔ͢Δͱ͖ʹωΠςΟϒΞϓϦͷ Α͏ͳڍಈΛͤ͞Δ͜ͱ͕Ͱ͖Δ • GoogleΛத৺ͱͯ͠ࡦఆ͞Ε͍ͯΔ

  3. PWAΛߏ੒͢Δཁૉ • Service Worker • Push API • Notification API

    • localStorage / IndexedDB • History API • Geolocation API

  4. PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯରԠ • ϖʔδͷදࣔ • ը໘ભҠ • ϓογϡ௨஌ •

    ϗʔϜը໘ͷ௥Ճ • Ґஔ৘ใͷऔಘ

  5. PWA vs Native

  6. None

  7. ࠾༻ྫ • Twitter Mobile • Instagram • ଞଟ਺

  8. Service Worker • ϒϥ΢β͕Webϖʔδͱ͸ผʹόοΫάϥ΢ϯυͰ࣮ߦ͢Δ εΫϦϓτɻ • DOMʹ͸௚઀ΞΫηεͰ͖ͳ͍ɻ • Service Worker͸࢖༻͍ͯ͠ͳ͍ؒ͸ऴྃ͞Εɺඞཁʹͳͬ

    ͨΒىಈ͠·͢ɻ • localhost or httpsͰͷΈಈ࡞ɻ

  9. Service Worker

  10. ϒϥ΢βରԠঢ়گ

  11. iOS11.3ΑΓService Worker͕༗ޮ ʹ

  12. ݁࿦

  13. ͙͢ಋೖ͢΂͖͔ʁ

  14. ·ͩૣ͍

  15. Ҏ্

  16. ࢀߟϦϯΫ • http://www.publickey1.jp/blog/18/ appleiosmacosprogressiveweb_apps.html • https://qiita.com/edwardkenfox/items/ 4c0b9550ffa48c1f0445 • https://qiita.com/y_fujieda/items/f9e765ac9d89ba241154 •

    https://developers.google.com/web/fundamentals/primers/ service-workers/?hl=ja • https://qiita.com/horo/items/ff665e4a6613e7684f8f