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

Progressive Web Apps on Rails

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ross Kaffenberger Ross Kaffenberger
September 22, 2016
Technology
2.3k
0

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

More Decks by Ross Kaffenberger

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

Other Decks in Technology

See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
DevOpsDays2026 Tokyo Cross-border practices to connect "safety" and "DX" in healthcare
Avatar for Yutaro Sugai hokkai7go
0
130
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.2k
ふりかえりがなかった職能横断チームにふりかえりを導入してみて学んだこと 〜チームのふりかえりを「みんなで未来を考える場」にするプロローグ設計〜
Avatar for Masahiro Shimokawa masahiro1214shimokawa
0
340
CC Workflow Studio
Avatar for breaking-brake seiyakobayashi
0
290
OBI+APMでお手軽にアプリケーションのオブザーバビリティを手に入れよう
Avatar for Kenshi Muto kenshimuto
0
230
Databricksで構築するログ検索基盤とアーキテクチャ設計
Avatar for サイバーセキュリティクラウド cscengineer
0
150
シン・リスコフの置換原則 〜現代風に考えるSOLIDの原則〜
Avatar for Watanabe Jin jinwatanabe
0
180
ルールルルルル私的函館観光ガイド── 函館の街はイクラでも楽しめる！
Avatar for nomuson nomuson
0
150
建設的な現実逃避のしかた / How to practice constructive escapism
Avatar for Pauli pauli
4
310
Kubernetes基盤における開発者体験 とセキュリティの両⽴ / Balancing developer experience and security in a Kubernetes-based environment
Avatar for mekka chmikata
0
250
ふりかえりを 「あそび」にしたら、 学習が勝手に進んだ / Playful Retros Drive Learning
Avatar for katoaz katoaz
0
450

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
130
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.4k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.1k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
260

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