PWA-ifying Santa Tracker. Sam

Transcription

1 PWA-ifying Santa Tracker Sam

2 About Sam Developer Relations on "Web" Varied projects: polyfills, apps, demos, videos, talks, internal + public advocacy

3

4

5

6 Demo

7 Why?

8 Open-Source

9 Education focus

10 Talks

11 Ghosts of Holidays Past

12

13 2014 Polymer 0.5 With two polyfills Shadow DOM Object.observe Horizontal design wasn't intuitive Half screen photo slide if text is necessary

14 2015 Total responsive village redesign Removed polyfills in favour of "production-ready Polymer 1.2" lots of bugs, especially around element upgrading and O.o Half screen photo slide if text is necessary

15 2016 Polymer fixed most weird bugs Binding to upgraded elements Used app-layout elements New landing pages and routing code, improved shareability Better use of shared elements for scoreboards, sharing,...

16 2017 Back to Shadow DOM polyfill with Polymer 2.0+ Supported on Chrome/Safari Some surprises?

17

18 Fast users have low attention.. squirrel Reliable Engaging

19 Fast Reliable offline + app-like caching Engaging

20 Fast Reliable Engaging app-like: fullscreen, notifications, modern APIs

21 Santa as a Progressive Web App

22 Add To Home Screen You can already "ATHS" this refers to the prompt Supported on Android Naïvely coerce it just add a Web App Manifest and a basic Service Worker

23 Add To Home Screen 10% of Santa Tracker's eligible sessions started here

24 Manifest describing home screen UX <link rel="manifest" href="manifest.json" /> <script> if ('serviceworker' in navigator) { window.sw = navigator.serviceworker.register( '/sw.js?lang=' + document.documentelement.lang); } </script> Install Service Worker where available

25 <link rel="manifest" href="manifest.json" /> <script> if ('serviceworker' in navigator) { window.sw = navigator.serviceworker.register( '/sw.js?lang=' + document.documentelement.lang); } </script> But still need this cruft <!-- non-standard meta tags --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="#00c6ed"> <meta name="msapplication-tilecolor" content="#30b443"> <meta name="msapplication-tap-highlight" content="no"> <!-- icons --> <link rel="apple-touch-icon" sizes="76x76" href="/images/icon-76.png"> <link rel="apple-touch-icon" sizes="120x120" href="/images/icon-120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/images/icon-152.png">

26 We actually link manifest in JS var manifest = document.createelement('link'); manifest.rel = 'manifest'; manifest.crossorigin = 'use-credentials'; manifest.href = 'manifest.json'; // avoid href rewriting from gulpfile document.head.appendchild(manifest); if ('serviceworker' in navigator) { window.sw = navigator.serviceworker.register( '/sw.js?lang=' + document.documentelement.lang); // Reload the page when a new SW takes over. This should only happen in staging. navigator.serviceworker.addeventlistener('controllerchange', function() { location.reload(); }); }

27 Offline We cache assets and work offline via a Service Worker This is a script that: a) has a lifetime, including install b) proxies network requests

28 Challenges Santa is ~226mb We can't/won't install all of it Languages: + Some different formats (mp3/ogg, gif/mp4) Continuous releases throughout December

29 Static vs prod Static maps.gstatic.com/santatracker Unique URLs per-version cached forever! Not just for offline loading Prod santatracker.google.com Low cache expiry, to detect new release

30 Load what you use Cache core of Santa on 'install' aka the "App Shell" Cache eligible scenes when user interacts with them The village itself is a scene Show offline via frozen houses...but UX is hard

31 <lazy-pages selected-item="village"> <dorf-scene id="village" route="village" icon="1f384" permanent path$="scenes/dorf/dorf-scene_[[language]].html" slot="santa-scene" allow-page-scrolling></dorf-scene> <boatload-scene route="boatload" icon="26f5" "village" route is loaded path$="scenes/boatload/boatload-scene_[[language]].html" loading-bg-color="#8fd7f7" loading-src="scenes/boatload/img/loading.svg" logo="scenes/boatload/img/logo.svg" slot="santa-scene"></boatload-scene>

32 <lazy-pages selected-item="village"> <dorf-scene id="village" route="village" icon="1f384" permanent path$="scenes/dorf/dorf-scene_[[language]].html" slot="santa-scene" allow-page-scrolling></dorf-scene> <boatload-scene route="boatload" icon="26f5" path$="scenes/boatload/boatload-scene_[[language]].html" loading-bg-color="#8fd7f7" loading-src="scenes/boatload/img/loading.svg" logo="scenes/boatload/img/logo.svg" slot="santa-scene"></boatload-scene> "boatload-scene" is HTMLUnknownElement until ready

33 Causes boatload scene to be loaded <lazy-pages selected-item="boatload"> <dorf-scene id="village" route="village" icon="1f384" permanent path$="scenes/dorf/dorf-scene_[[language]].html" slot="santa-scene" allow-page-scrolling></dorf-scene> <boatload-scene route="boatload" icon="26f5" path$="scenes/boatload/boatload-scene_[[language]].html" loading-bg-color="#8fd7f7" loading-src="scenes/boatload/img/loading.svg" logo="scenes/boatload/img/logo.svg" slot="santa-scene"></boatload-scene>

34 Request flow ht ne_en. e c s d tloa v1/boa ml

35 Response flow v1/boatload-scene_en.html ['village', 'boatload',...]

36 Install flow

37 Install flow

38 Install flow

39 Other APIs

40 Web Share New, unifying API for interacting with native share interface It replaces the sea of share buttons normally presented to users Available in Chrome 61+

41 Google Analytics About ¾ of Santa browsers support Web Components + Shadow DOM natively We log all JS errors with an onerror handler although we messed up this year as JS errors from an iframe have their stack trace stripped

42 Santa as a Polymer App

43 <dom-module id="santa-app"> <template> Shows friendly loader <santa-strings id="strings"></santa-strings> <iron-a11y-keys keys="esc enter" on-keys-pressed="_onkeyspressed"></...> <preload-overlay id="preloader"></preload-overlay> <santa-state during-tracker="{{duringtracker}}"...></santa-state> <santa-tracker-router route="{{route}}"></santa-tracker-router> Lazy loads Polymer elements at runtime <santa-chrome id="chrome" pause="{{userpause}}"...> <lazy-pages selected-item="{{selectedscene}}"...> <dorf-scene route="village" icon="1f384" permanent path$="scenes/dorf/dorf-scene_[[language]].html" class="santa-scene" allow-page-scrolling></dorf-scene> <!-- More scenes (30+) below -->

44 Preloader Hides: HTML import of scene itself Loading images, audio etc Matching image used on initial site load, to gain user attention

45 <dom-module id="santa-app"> <template> <santa-strings id="strings"></santa-strings> <iron-a11y-keys keys="esc enter" on-keys-pressed="_onkeyspressed"></...> <preload-overlay id="preloader"></preload-overlay> Takes /boatload.html and converts to route <santa-state during-tracker="{{duringtracker}}"...></santa-state> <santa-tracker-router route="{{route}}"></santa-tracker-router> <santa-chrome id="chrome" pause="{{userpause}}"...> <lazy-pages selected-item="{{selectedscene}}"...> <dorf-scene route="village" icon="1f384" permanent path$="scenes/dorf/dorf-scene_[[language]].html" class="santa-scene" allow-page-scrolling></dorf-scene> <!-- More scenes (30+) below -->

46 route="codeboogie"

47 Generated, shared strings for i18n <dom-module id="santa-app"> <template> <santa-strings id="strings"></santa-strings> <iron-a11y-keys keys="esc enter" on-keys-pressed="_onkeyspressed"></...> <preload-overlay id="preloader"></preload-overlay> <santa-state during-tracker="{{duringtracker}}"...></santa-state> <santa-tracker-router route="{{route}}"></santa-tracker-router> Singleton for Santa's position, date within Dec <santa-chrome id="chrome" pause="{{userpause}}"...> <lazy-pages selected-item="{{selectedscene}}"...> <dorf-scene route="village" icon="1f384" permanent path$="scenes/dorf/dorf-scene_[[language]].html" class="santa-scene" allow-page-scrolling></dorf-scene> <!-- More scenes (30+) below -->

48 Weather The <santa-weather> element wraps a canvas using raf to draw snow and clouds

49 Chrome/Badge The <santa-chrome> element provides the top bar, nav, sidebar etc, wrapping app-layout elements We also have <santa-badge>, which exists on its own: it is owned by the app, and is slotted in the top center

50 Finally...

51 More Resources 2014: How 20% engineers built Santa Tracker Keep an eye on Chrome Developers on YouTube "pwacompat"

52 Ho Ho Ho Sam