Progressive Web Apps on Rails

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

Transcript

1. Progressive Web
   Apps on Rails
   Ross Kaffenberger
   @rossta
   

   View Slide

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

   View Slide

3. Web > Native
   Responsive
   Write once, Run everywhere*
   Fresh
   Linkable
   Discoverable
   Fast first-visit
   

   View Slide

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

   View Slide

5. View Slide

6. View Slide

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

   View Slide

8. Service Worker
   •Intercept requests
   •Access to cache, IndexedDB, etc.
   •Send push notifications
   •Sync with server in background
   

   View Slide

9. Service Worker
   

   View Slide

10. Service Worker
    

    View Slide

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

    View Slide

12. Service Worker on Rails
    Problem: Making Service Worker scripts
    work with the asset pipeline
    GET /serviceworker.js
    

    View Slide

13. Service Worker on Rails
    gem “serviceworker-rails”
    •Serves pipeline assets from canonical urls
    •Customizes response headers
    

    View Slide

14. Service Worker on Rails
    

    View Slide

15. Service Worker on Rails Sandbox
    

    View Slide

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

    View Slide

17. github.com/rossta/
    serviceworker-rails
    

    View Slide

18. @rossta
    rossta.net
    Ross Kaffenberger
    

    View Slide