Save 37% off PRO during our Black Friday Sale! »

The web is getting pushy - Codemotion Amsterdam

The web is getting pushy - Codemotion Amsterdam

The battle between native and web rages on. The browsers are fighting hard to tear down the benefits that native developers have relied on since the inception of mobile platforms. Geolocation, sorted. Accelerometer, done. Performance, we'll come back to that. But one of the greatest draws for native developers has been push notifications, for the web, email alerts just don't cut it.

But now, new in browsers for 2015, is the Service Worker. Born out of the struggle to make the Appcache work for offline capable sites, it has also brought the advent of push notifications to the web. Through building up an example application live, you will learn how to implement the Service Worker to not only serve up an app when you're offline but enhance the online experience with push notifications.

The battle may continue, but the web is definitely pushing back.

Links:

Check out the code from the presentation: https://github.com/philnash/the-web-is-getting-pushy

Web Powered SMS Inbox with Service Worker: Push Notifications: https://www.twilio.com/blog/2016/02/web-powered-sms-inbox-with-service-worker-push-notifications.html

The Service Worker Cookbook - https://serviceworke.rs/
Web Push for Node.js - https://www.npmjs.com/package/web-push - https://github.com/marco-c/web-push
Google Developers - Your first push notifications web app - https://developers.google.com/web/fundamentals/getting-started/push-notifications/?hl=en

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

May 12, 2016
Tweet

Transcript

  1. THE WEB IS GETTING PUSHY Codemotion Amsterdam 2016

  2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com

  3. WARNING!

  4. LIVE CODING!

  5. ES6

  6. ES6 ES2015

  7. ES6 ES2015

  8. NEW JAVASCRIPT STUFF

  9. AUDIENCE PARTICIPATION!

  10. THE WEB IS GETTING PUSHY

  11. WEB VS NATIVE

  12. GEOLOCATION

  13. ACCELEROMETER

  14. PEER TO PEER VIDEO CHAT

  15. PUSH NOTIFICATIONS

  16. None
  17. NOTIFICATIONS

  18. #CODEMOPUSH

  19. DEMO

  20. None
  21. REAL NOTIFICATIONS

  22. Support 22 22 25 6 14 flag

  23. DEMO

  24. None
  25. None
  26. PUSH NOTIFICATIONS

  27. SERVICE WORKER

  28. “THE APPLICATION CACHE IS A DOUCHEBAG”

  29. NOT JUST FOR OFFLINE

  30. Service Worker Support 40 44 24 under consideration under consideration

  31. Push Notification Support 42 44 ? non- standard under consideration

  32. None
  33. None
  34. Service Worker Support jakearchibald.github.io/isserviceworkerready status.modern.ie

  35. DEMO

  36. None
  37. None
  38. WITH GREAT POWER...

  39. None
  40. None
  41. The code! github.com/philnash/the-web-is-getting-pushy

  42. The slides! https:/ /speakerdeck.com/philnash

  43. Other resources • Push notifications and SMS - Twilio blog

    • The Service Worker Cookbook - https:/ /serviceworke.rs/ • Web Push for Node.js - npm - GitHub • Google Developers - Your first push notifications web app
  44. THANKS!

  45. Use code PNASH20 for 20% off tickets

  46. Thanks! @philnash http:/ /philna.sh philnash@twilio.com