Download as PDF, PPTX
![App-Like Characteristics
{
"name": "Mike.Works - World Class Developer Training",
"short_name": "Mike.Works",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"description": "World Class Developer Training",
"orientation": "portrait-primary",
"lang": "en-US",
"icons": [ ]
};
manifest.json](https://image.slidesharecdn.com/ti9szqqnrvyzizjwebic-signature-04f23d1d6c5d80e9c36f7527f92362953be6f741bde3b947670b43e4a9d18d3f-poli-170120132913/75/Anatomy-of-a-Progressive-Web-App-43-2048.jpg)
Uploaded byMike North
Anatomy of a Progressive Web App
The document discusses the architecture and benefits of Progressive Web Apps (PWAs), emphasizing their app-like characteristics and advantages over traditional web applications. It covers key topics such as service workers, resource caching strategies, and storage options like IndexedDB. The content also highlights the importance of optimizing network stability and performance metrics in PWA development.
More Related Content
![Progressive Web Apps [pt_BR]](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-170306202026-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Anatomy of a Progressive Web App
Anatomy of a Progressive Web App
- 1. Anatomy of a ProgressiveWeb App January 20, 2017 Michael North Agent Conf
- 2.
- 6. A lot haschanged since 2012
- 7. Benefits of Each Approach WebNative •Presence on home screen • Background functionality • Fast return startup • Doesn’t require install • Cross-Platform • Very similar to desktop web experience
- 8.
- 10.
- 11. Hello! Formerly Now • CTO •UI Architect @ • Lead Engineer @ Imagequix • Training Partner @ • Staff Engineer @ • Instructor @
- 12. Major Pieces Pruning theCritical Path Tolerating Network Instability App-Like Characteristics
- 13. Important Metrics Pruning theCritical Path 🎨First Paint 👆Interactive Time to… 📊Data
- 14. index.html app.css app.js data.json API 🖥User Asset Storage 1 2 4 5 6 Static Hosting 3 ☁CDN 🎨 FirstPaint 👆 Interactive parse 📊 Data 🎨 boot 👆 📊 Client Rendered SPA
- 15. Server-Side Rendering • ⏱Don’t have to wait for client-side JS • 🔗 Better for SEO & sharing links • ⚠ Node.js and the Browser are different • 👷 Try not to do the same work twice • ⚡ HTML is assembled in your data center
- 16.
- 17. Resource Caching Strategies •Content at a URL is never changed • max-age=year • index.html is the key • Offline-friendly • Content at a URL can change • Cache-Control: no-cache • Use Last-Modified or ETag • Involves extra network requests Immutable Content “Check w/ server”
- 18. Service Workers • Aprogrammable network proxy • A JavaScript worker • Only works over HTTPS • Has a predictable lifecycle XHR SW WWW Cache
- 19.
- 20. Service Workers I needitem.pngApp Of course! Here it is. I have a list of important resources. I’ll fetch them all and cache them. Cache Precache 🖼
- 21. Service Workers App Just gotit for you! Ok, I’ll get it Cache Network or Cache 🖼 I need item.png
- 22. Service Workers Took toolong. Here’s a cached version🖼 App Ok, I’ll get it Cache Network or Cache I need item.png
- 23. Service Workers App Ok, I’llget it Cache Network or Cache I need item.png Something went wrong. Here’s a cached version🖼
- 24. Service Workers App I’ll godownload a new copy in case it changed Here’s a cached version Cache Cache and Update 🖼 I need item.png Next time you ask, you’ll get this new version
- 25. Service Workers App I’ll godownload a new copy in case it changed Here’s a cached version Cache Cache, Update and Refresh 🖼 I need item.png Hey! I’ve got a new version. Ask me for itpostMessage 🎆
- 26.
- 27.
- 28. index.html .css .js data.json API 🖥User Asset Storage 1 2 6 7 8 Rendering Server 5 ☁CDN 🎨 FirstPaint 👆 Interactive parse 📊 Data 🎨 boot 👆📊 Server Rendered PWA v1 3 4 Service Worker ⚙
- 29. Storing Dynamic Content •Cookies - Not worker-friendly, just a string • LocalStorage - See 👆 • What’s left???
- 30. Storing Dynamic Content •Cookies - Not worker-friendly, just a string • LocalStorage - See 👆 IndexedDB
- 31. IndexedDB • 🔢 Versioned •🗃 Indexable • ⚙ Worker-Friendly • 📅 Durable • 🔣 Supports values of many types • ⚠ Not a SQL, or a relational DB
- 32. IndexedDB !// Open (orcreate) the database let open = indexedDB.open('MyDatabase', 1); !// Create and/or Migrate the Schema open.onupgradeneeded = (evt) !=> { !// Transactions open.onsuccess = () !=> { !!... }; !!... };
- 33. IndexedDB !// Create and/orMigrate the Schema open.onupgradeneeded = (evt) !=> { }; let db = open.result; let store = null; switch (evt.oldVersion) { case 0: !// Upgrade from 0 !// !!... case 1: !// Upgrade from 1 !// !!... }
- 34. IndexedDB !// Open (orcreate) the database let open = indexedDB.open('MyDatabase', 1); !// Create and/or Migrate the Schema open.onupgradeneeded = (evt) !=> { !// Transactions open.onsuccess = () !=> { !!... }; !!... };
- 35.
- 36. App Shell Architecture Shellloads instantly Dynamic content in the shell
- 37. index.html .css .js data.json API 🖥User Asset Storage 1 2 6 7 8 Rendering Server 5 ☁CDN 🎨 FirstPaint 👆 Interactive parse 📊 Data 🎨 boot 👆📊 Server Rendered PWA v1 3 4 Service Worker ⚙
- 38. index.html .css .js data.json API 🖥User Asset Storage 1 2 6 7 8 Rendering Server 5 ☁CDN 🎨 FirstPaint 👆 Interactive parse 📊 Data 🎨 boot 👆📊 Server Rendered PWA v2 3 4 Service Worker ⚙ 99 shell html First Visit 💾 IndexedDB 99 Records
- 39. LocalRem ote shell.html .css .js IndexedDB API 🖥User Asset Storage 4 7 8 Rendering Server 3 ☁CDN 🎨 First Paint 👆 Interactive parse 📊 Data 🎨 boot 👆📊 Server Rendered PWA v2 Service Worker ⚙ Return Visit 2 1 💾 IndexedDB 5 6 data.json
- 40. Major Pieces Pruning theCritical Path Tolerating Network Instability App-Like Characteristics ✅ ✅
- 41.
- 42. App-Like Characteristics <meta name="apple-mobile-web-app-capable"content="yes"> Get rid of browser UI App Icons <link sizes=“180x180" rel=“apple-touch-icon" href="icon.png"> <meta name="mobile-web-app-title" content="Mike.Works"> Bookmark Name <link href="splash.png" rel="apple-touch-startup-image"> Splash Screen
- 43. App-Like Characteristics { "name": "Mike.Works- World Class Developer Training", "short_name": "Mike.Works", "start_url": ".", "display": "standalone", "background_color": "#fff", "theme_color": "#fff", "description": "World Class Developer Training", "orientation": "portrait-primary", "lang": "en-US", "icons": [ ] }; manifest.json
- 44.
- 45. In The Future… •💬 Push Notifications • 🔁 Background Sync • ⚛ First-Class Framework Support • 📦 IndexedDB 2.0 • ⚡ HTTP/2 Optimizations
- 46. This is gettingvery complicated…
- 47. Reduce the #of decisions you must make 🤔
- 48. You will bebuilding these things…
- 49.
- 50.