Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Into the Box 2018 Building a PWA  Slide 1 Into the Box 2018 Building a PWA  Slide 2 Into the Box 2018 Building a PWA  Slide 3 Into the Box 2018 Building a PWA  Slide 4 Into the Box 2018 Building a PWA  Slide 5 Into the Box 2018 Building a PWA  Slide 6 Into the Box 2018 Building a PWA  Slide 7 Into the Box 2018 Building a PWA  Slide 8 Into the Box 2018 Building a PWA  Slide 9 Into the Box 2018 Building a PWA  Slide 10 Into the Box 2018 Building a PWA  Slide 11 Into the Box 2018 Building a PWA  Slide 12 Into the Box 2018 Building a PWA  Slide 13 Into the Box 2018 Building a PWA  Slide 14 Into the Box 2018 Building a PWA  Slide 15 Into the Box 2018 Building a PWA  Slide 16 Into the Box 2018 Building a PWA  Slide 17 Into the Box 2018 Building a PWA  Slide 18 Into the Box 2018 Building a PWA  Slide 19 Into the Box 2018 Building a PWA  Slide 20 Into the Box 2018 Building a PWA  Slide 21 Into the Box 2018 Building a PWA  Slide 22 Into the Box 2018 Building a PWA  Slide 23 Into the Box 2018 Building a PWA  Slide 24 Into the Box 2018 Building a PWA  Slide 25 Into the Box 2018 Building a PWA  Slide 26 Into the Box 2018 Building a PWA  Slide 27 Into the Box 2018 Building a PWA  Slide 28 Into the Box 2018 Building a PWA  Slide 29 Into the Box 2018 Building a PWA  Slide 30 Into the Box 2018 Building a PWA  Slide 31 Into the Box 2018 Building a PWA  Slide 32 Into the Box 2018 Building a PWA  Slide 33 Into the Box 2018 Building a PWA  Slide 34 Into the Box 2018 Building a PWA  Slide 35 Into the Box 2018 Building a PWA  Slide 36 Into the Box 2018 Building a PWA  Slide 37 Into the Box 2018 Building a PWA  Slide 38 Into the Box 2018 Building a PWA  Slide 39 Into the Box 2018 Building a PWA  Slide 40 Into the Box 2018 Building a PWA  Slide 41 Into the Box 2018 Building a PWA  Slide 42 Into the Box 2018 Building a PWA  Slide 43 Into the Box 2018 Building a PWA  Slide 44 Into the Box 2018 Building a PWA  Slide 45 Into the Box 2018 Building a PWA  Slide 46 Into the Box 2018 Building a PWA  Slide 47 Into the Box 2018 Building a PWA  Slide 48 Into the Box 2018 Building a PWA  Slide 49 Into the Box 2018 Building a PWA  Slide 50 Into the Box 2018 Building a PWA  Slide 51 Into the Box 2018 Building a PWA  Slide 52 Into the Box 2018 Building a PWA  Slide 53 Into the Box 2018 Building a PWA  Slide 54 Into the Box 2018 Building a PWA  Slide 55 Into the Box 2018 Building a PWA  Slide 56 Into the Box 2018 Building a PWA  Slide 57 Into the Box 2018 Building a PWA  Slide 58 Into the Box 2018 Building a PWA  Slide 59 Into the Box 2018 Building a PWA  Slide 60 Into the Box 2018 Building a PWA  Slide 61 Into the Box 2018 Building a PWA  Slide 62
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Into the Box 2018 Building a PWA

Download to read offline

Raymond Camden

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Into the Box 2018 Building a PWA

  1. 1. BUILDING A PWA F O R E V E R Y O N E W H O I S S C A R E D T O . . .
  2. 2. RAYMOND CAMDEN • Senior Developer Advocate for Auth0 Extend • Extend, serverless, web and Enterprise Cat demos • Blogging at raymondcamden.com • Tweeting at @raymondcamden
  3. 3. https://auth0.com/extend
  4. 4. THE PLAN • Cover the basics of PWAs • Show an example • Do this in <50 minutes
  5. 5. THE GUIDE • By: Tal Ater • http://shop.oreilly.com/product/06369 20052067.do
  6. 6. WHAT THE HECK IS PWA? Progressive Web App
  7. 7. OK - BUT *WHAT* IS IT? • A term • Coined by Frances Berriman and Alex Russell in 2015 • Set of Guidelines • Technical Baseline
  8. 8. GUIDELINES • Progressive • Responsive • Works offline, or in poor network conditions • App-like • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable Source: https://en.wikipedia.org/wiki/Progressive_web_app
  9. 9. THE TECH STACK • Manifest • Service Workers • App Shell
  10. 10. MANIFEST • "Web App Manifest" • Just a JSON file (woot!) • Allows for "installable" web apps • Controls behavior when launched
  11. 11. MANIFEST • The name (as it appears in the shortcut) • Icons (of various sizes) • Splash screen and colors (bg and toolbar) • Chrome • Forced Orientation • The starting URL (handy for passing a param to note the launch) – https://(something)/index.html?utm_source=homescreen
  12. 12. ADDING TO HTML • <link rel="manifest" href="/manifest.json">
  13. 13. SAMPLE
  14. 14. DEMO • Show manifest1 and 2
  15. 15. (AUTO) ADD TO HOME • AKA Web Install Banners • *Current* criteria is: – manifest with short_name, name, 192x192 icon (png only), start_url – service worker – https – "Meets a site engagement heuristic defined by Chrome (this is regularly being changed)." • Event is fired: beforeinstallprompt • Details: https://developers.google.com/web/fundamentals/app-install-banners/
  16. 16. OLD SCHOOL ADD TO HOMESCREEN
  17. 17. WHAT IT LOOKS LIKE
  18. 18. THANKS IOS • Doesn't support manifest :( • But you can configure... • https://developer.apple.com/library/content/document ation/AppleApplications/Reference/SafariWebContent /ConfiguringWebApplications/ConfiguringWebApplica tions.html
  19. 19. IOS 11.3! S AV E S T H E D AY ! ( U M , K I N D A )
  20. 20. SERVICE WORKERS
  21. 21. SERVICE WORKERS - INTRO • JavaScript • A script registered via a script • Now - forget everything you know about <script>
  22. 22. "REGULAR" JS • You load foo.html • foo.html is all like <script src="ftw_js_is_awesome_unicorns.js"></script> • Code executes while the tab (window) is "alive" • Close the tab and ftw_js_is_awesome_unicorns.js goes bye bye
  23. 23. SERVICE WORKER JS • Runs in parallel to pages in it's scope • Can't actually do anything the first time it loads • Can run when you're not even on the page • Can intercept every single network request (to be clear, not just XHR) • Can work with the browser cache • Can fire off notifications while you're away (and you totally won't abuse this) • Can respond to push notifications (and you totally won't abuse this) • Can help you sync data • Can't touch the DOM
  24. 24. MORE SERVICE WORKER • You can (and must) check for support • Requires https, but localhost is ok • They have a life cycle • Devtools will be very, very helpful
  25. 25. INSTALLING THE SW
  26. 26. DEMO • Show sw1, debugging
  27. 27. CACHING! • CacheStorage API (LINK) • Keyed by name (this is how you version) • Ability to add one or multiple URLs • Ability to read from the cache (and delete)
  28. 28. EXAMPLE Source: https://developers.google.com/web/fundamentals/primers/service-workers/
  29. 29. EXAMPLE Source: https://developers.google.com/web/fundamentals/primers/service-workers/
  30. 30. DEMO • Show sw2 (just fetch handler) and sw3
  31. 31. EXCEPT... • You want to change a file • You only want to use the cache if offline • You want some mix of things where you use the cache first then network but then sometimes you want to hit the network first and then cache and oh yeah maybe you want to use the cache and that's cool but maybe you want to hit the network in the background and passively update stuff and oh my god does this end?
  32. 32. GOOD NEWS/BAD NEWS • Good News: Caching Strategies exist • Bad News: You're responsible for figuring it out • See "The Offline Cookbook" - https://developers.google.com/web/fundamentals/instant-and- offline/offline-cookbook/ • See Workbox: https://developers.google.com/web/tools/workbox/
  33. 33. EXCEPT ROUND TWO... • iOS - no support for Service Workers • But officially "in development" for WebKit • AppCache
  34. 34. IOS 11.3! S AV E S T H E D AY ! ( U M , K I N D A )
  35. 35. BACKGROUND SYNC • Another ServiceWorker feature • App js tells SW js - "hey, start syncing Foo" • SW says - "Ok, no problem. I'll get around to it." • SW will try to do Foo (you write the logic) • If it fails, it will try again (and again...) • Finally, it will try one last time and *tell* you as well • https://developers.google.com/web/updates/2015/12/background-sync
  36. 36. EXAMPLE
  37. 37. EXAMPLE
  38. 38. PUSH NOTIFICATIONS • Two APIs - Push and Notification • Notification - https://developer.mozilla.org/en-US/docs/Web/API/notification • Request permission to show a notification • You can show it
  39. 39. EXAMPLE
  40. 40. NOTIFICATIONS
  41. 41. NOTIFICATIONS
  42. 42. PUSH • User subscribes to push messaging (two step process) • Your server sends a message to central Message server • Messaging server talks to Service Worker • Service Worker does whatever (probably Notification)
  43. 43. THANKS APPLE! • https://developer.apple.com/notifications/safari-push-notifications/
  44. 44. EXAMPLE (MINUS 99%)
  45. 45. STUFF I DIDN'T COVER • ServiceWorker to browser communication – postMessage • Client-side storage
  46. 46. RESOURCES • https://developer.mozilla.org/en-US/Apps/Progressive • https://developers.google.com/web/progressive-web-apps/ • https://jakearchibald.github.io/isserviceworkerready/ • https://developers.google.com/web/tools/lighthouse/ • https://pwastats.com • https://pwa.rocks/
  47. 47. LIGHTHOUSE
  48. 48. JUST BUY THIS
  49. 49. LAST DEMO C O N F E R E N C E S
  50. 50. CONFERENCE "APPS" • Web, not native • Because - duh • No marketing, just text • Works offline • That's it.
  51. 51. H T T P S : / / C F J E D I M A S T E R . G I T H U B . I O / I C E C O N F D E M O / T H E M O S T A W E S O M E D E M O E V E R
  52. 52. SO – ABOUT THE APPLE IN THE ROOM...
  53. 53. SAFARI AND PWAS • Supported in the *released* iOS • Only in Safari, no other browser • Service Workers (Caching) and App Manifests (not entirely) • No Push or Sync • And it gets better: https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have- a-problem-2ff49fd7d6ea
  54. 54. ANY QUESTIONS? • Email me at raymondcamden@gmail.com • Visit my awesome blog at raymondcamden.com • Follow my awesome Twitter account at @raymondcamden

Raymond Camden

Views

Total views

270

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×