From the Browser to the Home Screen: PWAing Your Ember App

For EmberConf, we built a cutting-edge Ember mobile web app to serve as a convenient up-to-the-minute reference for the conference's schedule. Now updated for EmberFest, I'll highlight how we made this conference schedule app a fully compliant Progressive Web App. We'll walk through the steps needed to take your mobile Ember app out of the mobile browser and onto your users' home screens. With new native platform support available just this year and the backing of the always-amazing Ember addon ecosystem, making your Ember app fully PWA capable has never been easier or more worthwhile.

Transcript

1. From the Browser to the Home Screen: PWAing Your Ember App
2. 201-created.com
3. https://xkcd.com/1079/
4. https://xkcd.com/1079/
5. emberfest.201-created.com
12. What is PWA?
13. Progressive
 Web App
14. 1. Reliable 2. Fast 3. Engaging
15. 1. Reliable 2. Fast 3. Engaging
16. 1. Reliable 2. Fast 3. Engaging
17. Why PWA?
19. How to PWA?
23. npm install -g lighthouse
 lighthouse https://emberfest.201-created.com
29. JS-free Render
31. ember install ember-cli-fastboot ember install prember
32. // ember-cli-build.js let app = new EmberApp(defaults, { prember: { urls: [ '/' ] } });
33. PREMBER=true ember serve
37. Service Worker
39. ember-service-worker ember-service-worker-index ember-service-worker-asset-cache ember-service-worker-cache-fallback
40. ember-service-worker ember-service-worker-index ember-service-worker-asset-cache ember-service-worker-cache-fallback
41. ember-service-worker ember-service-worker-index ember-service-worker-asset-cache ember-service-worker-cache-fallback
42. ember-service-worker ember-service-worker-index ember-service-worker-asset-cache ember-service-worker-cache-fallback
43. ember install ember-service-worker ember-service-worker-index ember-service-worker-asset-cache
44. // ember-cli-build.js let app = new EmberApp(defaults, { 'asset-cache': { include: [ 'assets/**/*', 'ember-welcome-page/images/*' ] } });
48. Web App Manifest
50. ember install ember-web-app
51. // config/manifest.js module.exports = function() { return { name: "emberfest", short_name: "emberfest", description: "", start_url: "/", display: "standalone", background_color: "#fff", theme_color: "#fff", icons: [ { src: "/ember-welcome-page/images/construction.png", sizes: "540x540", type: "image/png" } ] }; }
56. emberfest.201-created.com
57. Bonus FAQ
59. safe-area-inset-top
 safe-area-inset-bottom safe-area-inset-left safe-area-inset-right
60. header { padding-top: 0.5rem; padding-top: calc(env(safe-area-inset-top) + 0.5rem); } .session { margin: 0.125rem 0.5rem; margin-left: calc(env(safe-area-inset-left) + 0.5rem); margin-right: calc(env(safe-area-inset-right) + 0.5rem); }
61. header { padding-top: 0.5rem; padding-top: calc(env(safe-area-inset-top) + 0.5rem); } .session { margin: 0.125rem 0.5rem; margin-left: calc(env(safe-area-inset-left) + 0.5rem); margin-right: calc(env(safe-area-inset-right) + 0.5rem); }
62. Thank You! Kevin Pfefferle
 kpfefferle
 kpfefferle 201 Created
 201-created
 two_oh_one emberfest.201-created.com
63. Credits: -United Shapes by XKCD: https://xkcd.com/1079/ -201 Created: https://www.201-created.com/ -Example App: https://emberfest.201-created.com/ -Example Repo: https://github.com/201-created/emberfest-schedule-2018 -Google PWA Resources: https://developers.google.com/web/progressive-web-apps/ -Lighthouse: https://developers.google.com/web/tools/lighthouse/ -FastBoot: http://ember-fastboot.com/ -Prember: https://github.com/ef4/prember -Ember Service Worker: http://ember-service-worker.com/ -ember-web-app: https://github.com/san650/ember-web-app -GitHub Logo: https://github.com/logos -Twitter Logo: https://about.twitter.com/en_us/company/brand-resources.html