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.8k
フリルにおけるドッグフーディング / Fashion Tech Meetup #2 LT
cutmail
2
3.8k
Adapter and Custom Layout
cutmail
3
860
いかにして不具合発見時の フィードバックを素早く行うか #potatotips 12
cutmail
0
2.4k
Androidのログ出力をいい感じにする #potatotips 9
cutmail
8
9.5k
コーディング規約を緩く守りつつ仕事の成果を出す方法
cutmail
2
570

Other Decks in Technology

See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
ABEMA のコンテンツ制作を最適化！生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
新卒1年目が挑む！生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
170
君は隠しイベントを見つけれるか？
mujyun
0
290
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
生成AIとAWS CDKで実現！ 自社ブログレビューの効率化
ymae
2
330
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
260
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180

Featured

See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
We Have a Design System, Now What?
morganepeng
50
7.2k
Side Projects
sachag
452
42k
A designer walks into a library…
pauljervisheath
202
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Done Done
chrislema
181
16k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k

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