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

5 minutes PWA

Avatar for Tatsuya Arai Tatsuya Arai
February 23, 2018
Technology
0
210

5 minutes PWA

Avatar for Tatsuya Arai

Tatsuya Arai

February 23, 2018
Tweet

More Decks by Tatsuya Arai

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

Other Decks in Technology

See All in Technology
頭部ふわふわ浄酔器
Avatar for uyupun uyupun
0
110
AIとともに歩んでいくデザイナーの役割の変化
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
870
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
Avatar for Lamaglama39 lamaglama39
0
280
難しいセキュリティ用語をわかりやすくしてみた
Avatar for Yuta3110 yuta3110
0
390
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
Avatar for Claire Giordano clairegiordano
0
130
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
Avatar for piyonakajima piyonakajima
0
140
ソースを読むプロセスの例
Avatar for Satoru Takeuchi sat
PRO
15
9.9k
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
Avatar for Bo-Yi Wu appleboy
0
200
ヘンリー会社紹介資料（エンジニア向け） / company deck for engineer
Avatar for Henry, Inc. henryofficial
0
360
コンパウンド組織のCRE #cre_meetup
Avatar for LayerX layerx
PRO
1
260
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
Avatar for OPTiM optim
0
110
Kubernetes self-healing of your workload
Avatar for Hung-Wei Chiu hwchiu
0
510

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.9k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
369
20k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k

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