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

Progressive Web Apps

Avatar for Kenichiro Okada Kenichiro Okada
June 18, 2017
Technology
410
0

Progressive Web Apps

Introduction to progressive web apps

Avatar for Kenichiro Okada

Kenichiro Okada

June 18, 2017

More Decks by Kenichiro Okada

See All by Kenichiro Okada
将来を語るのが苦手なメンバーと向き合ってわかったこと
Avatar for Kenichiro Okada pastelinc
0
31
探索的なスタイルでフィードバックを使って、学びを豊かにしてみよう！
Avatar for Kenichiro Okada pastelinc
0
65
100%の傾聴を実践する
Avatar for Kenichiro Okada pastelinc
0
130
組織を変革する最初の一歩に躓いたけど、それはそれで良かった話
Avatar for Kenichiro Okada pastelinc
1
1.6k
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
Avatar for Kenichiro Okada pastelinc
0
2.2k
慣習から旅立つチーム
Avatar for Kenichiro Okada pastelinc
0
1.5k
AngularJSを通してDockerと触れ合った
Avatar for Kenichiro Okada pastelinc
0
1k
AngularJSとWeb Audio APIはじめてみました
Avatar for Kenichiro Okada pastelinc
0
390

Other Decks in Technology

See All in Technology
AI全盛の今だからこそ、あえてもう一度振り返るAPIの基礎
Avatar for Makky12 smt7174
3
140
コーディングエージェントはTypeScriptの 型エラーをどう自己修正しているのか
Avatar for Melonps melonps
3
260
AI時代に求められる思考のパラダイムシフト
Avatar for NRI Netcom nrinetcom
PRO
0
110
Purview Endpoint DLP 動かしてみた
Avatar for kozakigh kozakigh
1
460
社内RAGの導入で気を付けたポイント
Avatar for やくも yakumo
1
130
React Compiler導入の効果と運用の工夫
Avatar for KAKEHASHI kakehashi
PRO
3
300
AWS運用におけるAI Agent活用術 / JAWS-UG 神戸 #11 LT大会
Avatar for GENDA genda
1
320
AIAgentと取り組むKaggle
Avatar for shuto goya 508shuto
2
470
AI-Assisted Contributions and Maintainer Load - PyCon US 2026
Avatar for Paolo Melchiorre pauloxnet
1
190
LookerとADKで作る社内AIエージェント
Avatar for chanyou0311 chanyou0311
0
280
AI時代に、 データアナリストがデータエンジニアに異動して
Avatar for jackojacko_ jackojacko_
0
1.1k
TypeScriptで実現する既存APIを活用したリモートMCPサーバー構築 / TSKaigi 2026
Avatar for Shodai Suzuki soarteclab
1
170

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
830
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
250
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
50k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
150
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k

Transcript

  1. Progressive Web Apps Introduction to progressive web apps

  2. Self Introduction • pastelInc • ng-kyoto organizer • Interests •

    JavaScript • PHP • Natural language processing

  3. What’s PWA

  4. Why PWA https://www.slideshare.net/dynamis/progressive-mobile-web-apps

  5. Why PWA 2 https://www.slideshare.net/dynamis/progressive-mobile-web-apps

  6. Why PWA 3 https://www.slideshare.net/dynamis/progressive-mobile-web-apps

  7. PWA • Fast • Enjoy offline time • Like native

    app

  8. App Shell

  9. Web Apps Manifest https://www.w3.org/TR/appmanifest/

  10. Service Worker • Cannot access the DOM directly • Programmable

    network proxy • HTTPS required https://w3c.github.io/ServiceWorker/ https://w3c.github.io/workers/

  11. Let's see PWA

  12. Trouble • Need to study the Service Worker's lifecycle •

    Need to know how to use developer tools

  13. Reference • https://developers.google.com/web/fundamentals/ engage-and-retain/web-app-manifest/ • https://developers.google.com/web/fundamentals/ instant-and-offline/offline-cookbook/ • https://developer.mozilla.org/ja/docs/Web/API/ Web_Workers_API/Using_web_workers

    • https://workboxjs.org/ • https://github.com/johnpapa/pwa-angular

  14. Let’s try PWA!!