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
0
410

Progressive Web Apps

Introduction to progressive web apps

Avatar for Kenichiro Okada

Kenichiro Okada

June 18, 2017
Tweet

More Decks by Kenichiro Okada

See All by Kenichiro Okada
将来を語るのが苦手なメンバーと向き合ってわかったこと
Avatar for Kenichiro Okada pastelinc
0
26
探索的なスタイルでフィードバックを使って、学びを豊かにしてみよう！
Avatar for Kenichiro Okada pastelinc
0
59
100%の傾聴を実践する
Avatar for Kenichiro Okada pastelinc
0
130
組織を変革する最初の一歩に躓いたけど、それはそれで良かった話
Avatar for Kenichiro Okada pastelinc
1
1.6k
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
Avatar for Kenichiro Okada pastelinc
0
2.1k
慣習から旅立つチーム
Avatar for Kenichiro Okada pastelinc
0
1.4k
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
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for SmartHR 品質保証本部 qa
0
350
スピンアウト講座03_CLAUDE-MDとSKILL-MD
Avatar for overflow ,Inc overflowinc
0
1.4k
Sansanの認証基盤を支えるアーキテクチャとその振り返り
Avatar for SansanTech sansantech
PRO
1
110
Agent Skill 是什麼？對軟體產業帶來的變化
Avatar for Bo-Yi Wu appleboy
0
240
Phase05_ClaudeCode入門
Avatar for overflow ,Inc overflowinc
0
2.3k
Phase01_AI座学_基礎
Avatar for overflow ,Inc overflowinc
0
4.3k
Embeddings : Symfony AI en pratique
Avatar for Grégoire Pineau lyrixx
0
350
AIエージェント×GitHubで実現するQAナレッジの資産化と業務活用 / QA Knowledge as Assets with AI Agents & GitHub
Avatar for Hitsuji tknw_hitsuji
0
250
契約書からの情報抽出を行うLLMのスループットを、バッチ処理を用いて最大40%改善した話
Avatar for SansanTech sansantech
PRO
3
290
スピンアウト講座04_ルーティン処理
Avatar for overflow ,Inc overflowinc
0
1.3k
DMBOKを使ってレバレジーズのデータマネジメントを評価した
Avatar for Tech Leverages leveragestech
0
410
Phase11_戦略的AI経営
Avatar for overflow ,Inc overflowinc
0
1.7k

Featured

See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
160
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
6k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
110k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
270
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
260
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
650
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.5k

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!!