Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to PWA Talk - Smau Milano 2018
Similar to PWA Talk - Smau Milano 2018 (20)
Recently uploaded
Recently uploaded (20)
PWA Talk - Smau Milano 2018
- 2. Hello everyone! I’m Valerio Pisapia Contact us at: www.dreaming-lab.com info@dreaming-lab.com @dreaminglab
- 3. What are a PWA?
- 4. What are the Progressive Web Applications 4 Reliable: Load instantly and never show the downsaur, even in uncertain network conditions. Fast: Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging: Feel like a natural app on the device, with an immersive user experience.
- 8. But: Do you really want to Build a Native App?PWA vs Native Apps Learn two new programming languages 8 80%of time spent happens in User’s Top 3 Apps on Device
- 9. PWA vs Native Apps 9 Reach of Apps vs Mobile Web
- 10. PWA vs Native Apps 10 PWAs vs Native Apps vs “Traditional” Web Pages
- 11. PWA vs Native Apps 11 1. Indicizzabile 2. Accesso Rapido 3. Sicure 4. Navigazione quasi istantanea e offline 5. Personalizzabile e con una grande esperienza utente 6. Tracciamento ed engagement PWA Advantages
- 12. Requirements
- 14. Requirements: Manifest file in depth 14 A. name, short_name, icons These are used to compose the home screen icon and title. B. display There are different display modes you can select: fullscreen, standalone, minimal-ui and browser. C. start_url It defines the page loaded when the customer launches your progressive web app from their homescreen. Properties Overview D. theme_color It’s used to set the splash screen's background color E. background_color It’s used to set the splash screen's background color
- 15. Requirements: Manifest file in depth 15 Triggering the “Add to Homescreen” on Chrome
- 16. Requirements: Manifest file in depth 16 Controlling the Add to Homescreen Prompt
- 17. Requirements: Service Worker 17 Service Worker Overview Basic features - Caching - Offline Intermediate features - Push Notification - Loading cached content for new user Advanced features - Background sync - Geo-fencing
- 18. Requirements: Service Worker 18 Service Worker LifeCycle
- 22. Requirements: Service Worker Fetch 22 Service Worker LifeCycle
- 23. Requirements: Service Worker Cache Strategies 23 Cache Strategies Network or cache Cache only Cache and update Cache, update and refresh
- 25. Exemplary Progressive Web Application 25 ○ Indexability & social ○ User experience ○ Push notifications ○ Performance ○ Caching ○ Additional features
- 26. Lighthouse
- 27. Lighthouse 27 Lighthouse Overview Lighthouse is an open-source, automated tool for improving the quality of web pages.
- 38. Progressive Web App browser Support 38 How Do PWAs Work on iOS?
- 40. SEO and Accessibility 40 TOP PROGRESSIVE WEB APPS SCORE 85% IN SEO
- 41. SEO and Accessibility 41 BEST PRACTICE AND ACCESSIBILITY SCORE IN PWA ◦ Use of HTTP/2 ◦ Do not use front-end JavaScript libraries with known security vulnerabilities (older versions) ◦ App’s `short_name` must be less than 12 characters to ensure that it’s not truncated on homescreens. ◦ Do not log errors that can come from network request failures and other browser concerns. ◦ Avoid Application Cache or WebSQL DB because both are deprecated ◦ Avoid requesting the geolocation permission on page load ◦ Display images with correct aspect ratio
- 43. What are developers saying? 43 Their preferences for building PWA ◦ 40% use Angular 2.X, 37% ReactJS and only 27% VueJS ◦ Bootstrap (50%), Material UI (33%) and Semantic UI (10%) are the most used CSS frameworks ◦ The most important PWA features: Caching/Offline (over 80%). 66% recognize “Add to HomeScreen” or App Install Prompt as being mandatory in a PWA whereas 60% consider Push Notifications as being key to building PWAs.
- 45. Case History 2018 George.com 45 George.com enhances the mobile customer experience with new Progressive Web App ◦ 3.8x - Faster average page load time ◦ 2x - Lower bounce rate ◦ 31% - Increase in Conversion Rate ◦ 20% - More page views per visit ◦ 28% - Longer average time on site for visits from Home screen
- 46. Helpful Links 46 ◦ Web App Install Banners ◦ The Web App Manifest ◦ Installable Web Apps with the Web App Manifest in Chrome for Android ◦ Your First Progressive Web App ◦ Introduction to Service Worker ◦ Adding a Service Worker and Offline into your Web App ◦ Web App Manifest ◦ Progressive Web Apps with Service Workers ◦ Progressive Web App Checklists
- 47. 47 PWA is the next step in web development. So try it out and be ready for the Future!
- 48. That’s all folks! Ci sono domande? Non dimenticare di segnarti la mia email: info@dreaming-lab.com