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

Progressive Web Apps

Kenichiro Okada
June 18, 2017
Technology
0
370

Progressive Web Apps

Introduction to progressive web apps

Kenichiro Okada

June 18, 2017
Tweet

More Decks by Kenichiro Okada

See All by Kenichiro Okada
100%の傾聴を実践する
pastelinc
0
110
組織を変革する最初の一歩に躓いたけど、それはそれで良かった話
pastelinc
1
1.4k
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
pastelinc
0
1.9k
慣習から旅立つチーム
pastelinc
0
1.2k
AngularJSを通してDockerと触れ合った
pastelinc
0
930
AngularJSとWeb Audio APIはじめてみました
pastelinc
0
360

Other Decks in Technology

See All in Technology
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
370
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
祝！Iceberg祭開幕！re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
2
240
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
210
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
160
.NET 9 のパフォーマンス改善
nenonaninu
0
440
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
300
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
180
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180

Featured

See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
The Cult of Friendly URLs
andyhume
78
6.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GitHub's CSS Performance
jonrohan
1030
460k
Site-Speed That Sticks
csswizardry
2
190
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Optimising Largest Contentful Paint
csswizardry
33
3k
Why Our Code Smells
bkeepers
PRO
335
57k
YesSQL, Process and Tooling at Scale
rocio
169
14k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510

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