From the browser to the home screen - PWAing your Ember app
summary
Demo app reaches 100% PWA score in Lighthouse after specific steps: add ember-cli-fastboot for JS-free rendering, ember-serviceworker plus serviceworker-index and asset-cache to cache assets and API responses, and ember-web-app to generate a manifest and icons. Audit climbs 46 → 50 → 73 → 92 → 100 as each piece lands. Notes include using cache-first or cache-fallback strategies, CSS env(safe-area-inset) to avoid the notch, and ensuring deployment redirects HTTP to HTTPS for the final audit.
AI-written summary · about
chapters (10)
- 0:00Introduction and background
- 1:27What is a PWA and why use one
- 5:22Lighthouse tool for PWA compliance
- 7:08Starting with a new Ember app
- 8:30FastBoot for JavaScript-free rendering
- 10:19ServiceWorker for offline caching
- 12:51Web app manifest for home screen
- 15:03HTTP to HTTPS redirect
- 15:46Demo app and resources
- 16:31Styling to avoid iPhone notch
related talks
26mGoing Progressive with Ember
11mPWA's with Ember
31mFrom Website to Progressive Web App
27mHow to score 100 on a Angular Progressive Web App Audit
28mLDD PWA (Lighthouse Driven Development for Progressive Web Apps)
17mLet's Build a Progressive Web App
48mPWAs, are we there yet?!
25mSupercharge the speed of your app with these PWAs' secrets! ⚡