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

Progressive Web Apps on Rails

Avatar for Ross Kaffenberger Ross Kaffenberger
September 22, 2016
Technology
0
2.2k

Progressive Web Apps on Rails

Talking about "Why Progressive Web Apps?" and how you can start building them on Rails
Avatar for Ross Kaffenberger

Ross Kaffenberger

September 22, 2016
Tweet

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
Getting Lazy with Vue and PDFs
Avatar for Ross Kaffenberger rossta
2
1.4k
A Webpack Survival Guide for Rails Developers
Avatar for Ross Kaffenberger rossta
1
2.4k
What I look for in a Junior Developer
Avatar for Ross Kaffenberger rossta
2
1k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
370
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
510
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
2k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.7k
Create and Deploy an Ember App in 5 Minutes
Avatar for Ross Kaffenberger rossta
7
3.7k

Other Decks in Technology

See All in Technology
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
Avatar for sugamasao sugamasao
1
220
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
Avatar for katsukamaru shin1988
1
1.1k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
Avatar for M-Yamashita myamashii
1
250
伴走から自律へ： 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
180
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for yasam flyunitedhelp
1
470
SEQUENCE object comparison - db tech showcase 2025 LT2
Avatar for Noriyoshi Shinoda nori_shinoda
0
270
CDKコード品質UP！ナイスな自作コンストラクタを作るための便利インターフェース
Avatar for Haruka Sakihara harukasakihara
2
160
Four Keysから始める信頼性の改善 - SRE NEXT 2025
Avatar for ozaki-kota ozakikota
0
130
shake-upを科学する
Avatar for Jack rsakata
7
900
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
2
220
対話型音声AIアプリケーションの信頼性向上の取り組み
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
600
オフィスビルを監視しよう：フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
1
290

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
980
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k

Transcript

  1. Progressive Web Apps on Rails Ross Kaffenberger @rossta

  2. Native > Web Reliable Independent of connectivity Works offline Sync-able

    Installable Re-engageable

  3. Web > Native Responsive Write once, Run everywhere* Fresh Linkable

    Discoverable Fast first-visit

  4. Best of both worlds (on the web) Progressive Web Apps

  5. None
  6. None

  7. Service Worker •Event driven •Worker context •No DOM access

  8. Service Worker •Intercept requests •Access to cache, IndexedDB, etc. •Send

    push notifications •Sync with server in background

  9. Service Worker

  10. Service Worker

  11. Service Worker •HTTPS only •Scoped by URL, e.g. /serviceworker.js /admin/serviceworker.js

  12. Service Worker on Rails Problem: Making Service Worker scripts work

    with the asset pipeline GET /serviceworker.js

  13. Service Worker on Rails gem “serviceworker-rails” •Serves pipeline assets from

    canonical urls •Customizes response headers

  14. Service Worker on Rails

  15. Service Worker on Rails Sandbox

  16. github.com/hemanth/ awesome-pwa github.com/TalAter/ awesome-service-workers

  17. github.com/rossta/ serviceworker-rails

  18. @rossta rossta.net Ross Kaffenberger