Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Progressive web app PWA - il futuro del web

in questa sessione si parla di come partire da un semplice sito web, renderlo responsive e una web application per poi evolverla in una progressive web app hostata su windows 10 e su microsoft azure.

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Progressive web app PWA - il futuro del web

  1. 1. Progressive WebApp (PWA) il futuro del web Angelo Gino Varrati DotNet Abruzzo cofounder MVP on Microsoft Azure MSP Team Europe Università degli Studi del Molise Dipartimento Bioscienze e Territorio CdL in Informatica – Pesche (IS) Credits to: Devmiup UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  2. 2. Progressive Works on any device and enhance functionality progressively. Discoverable Better discovery and integration with search. Linkable Ability to retain or reload its state and be shareable from a link. Responsive Fit any device’s form factor and screen size. Current Application and content is up to date when connected to the Internet. Re-engageable Promotes re-engagement through features such as push notifications. Performant Works as fast or faster than a native app. Connected to users Direct feedback to you through ratings and reviews App-like Looks like a native app and uses the application shell model with minimal page refreshes. Connectivity-agnostic Works with low connectivity or offline. Installable Install on the device’s desktop, start menu, or task bar making it readily available. App-like Connectivity-agnostic Progressive A PWA is @angelus_gi
  3. 3. The very best experience for your Web content will be on Windows. Why PWA? – Our Goal @angelus_gi
  4. 4. Build Deploy Publish App Web Content Build Build with web technology and web developers. Deploy The work flow for web and PWAs are shared, so your deploy process doesn’t need to change to accommodate PWA. Publish App Your PWA “app container” needs only to be published once. The content is always up to date because it comes from the web. Web The same app runs across browsers and can take advantage of PWA features as needed / supported. PWA The same app serve as a store app with even more features and additional reach to store users. Keep your workflow for web @angelus_gi
  5. 5. Devices + IoT PC Xbox Surface Hub HoloLens AC ROSS WIND OWS C ROS S P L ATFORM P ROGRESSIVE WEB AP P S X @angelus_gi
  6. 6. Let’s start building a Web Application Angelo Gino Varrati DotNet Abruzzo cofounder MVP on Microsoft Azure MSP Team Europe Credits to: Devmiup UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  7. 7. Web Application on Azure Angelo Gino Varrati DotNet Abruzzo cofounder MVP on Microsoft Azure MSP Team Europe Credits to: Devmiup UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  8. 8. Cloud infrastructure models @angelus_gi
  9. 9. @angelus_gi
  10. 10. @angelus_gi
  11. 11. Azure App Service @angelus_gi
  12. 12. Let’s put a Web Application on Azure Demo Angelo Gino Varrati DotNet Abruzzo cofounder MVP on Microsoft Azure MSP Team Europe Credits to: Devmiup UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  13. 13. HTTPS Web App Manifest Service Worker Minimum Viable – Progressive Web App @angelus_gi
  14. 14. W3C Manifest Demo Angelo Gino Varrati DotNet Abruzzo cofounder MVP on Microsoft Azure MSP Team Europe Credits to: Devmiup UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  15. 15. { "lang": "en", "short_name": "Wash Post", "name": "The Washington Post", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "img/launcher-icon-4x.png", "sizes": ”512x512", "type": "image/png" } ], "start_url": "/pwa/?utm_source=homescreen", "display": "standalone", "orientation": "portrait", "background_color": "black" } Web Application Manifest @angelus_gi
  16. 16. • Runs in Edge as a separate windows or Tab. • Full browser UI, no store listing Browser • Runs in App container in separate process. • No browser UI, back button only. • Microsoft store listing Standalone UI • Runs in App container in separate process. • Limited UI (navigation & read only nav bar). • Microsoft store listing Minimal UI Minimum Viable – Progressive Web App @angelus_gi
  17. 17. NetworkWeb App Network request - Typical @angelus_gi
  18. 18. Service Worker Network Cache Web App Network request - Service Worker in play @angelus_gi
  19. 19. Service Worker Demo Angelo Gino Varrati DotNet Abruzzo cofounder MVP on Microsoft Azure MSP Team Europe Credits to: Devmiup UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  20. 20. Packaging & Sideloading for the Microsoft Store Demo Angelo Gino Varrati DotNet Abruzzo cofounder MVP on Microsoft Azure MSP Team Europe Credits to: Devmiup UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  21. 21. • Validate your PWA is ready for Microsoft Store • Improve perf and User Experience @angelus_gi
  22. 22. Self Publishing of App • Open / Maintain active Dev center Account • Adhere to Microsoft Store policies • Generate Appx with VS, pwabuilder CLI, or on PWABuilder.com @angelus_gi
  23. 23. Name: Angelo Gino Varrati DotNet Abruzzo community co-founder Microsoft MVP on Azure (2018-2019) Microsoft Student Partner (2015-2016, 2016-2017*, 2017-2018*, 2018-2019**) http://angelusgi.azurewebsites.net/ https://twitter.com/angelus_gi https://github.com/AngelusGi https://it.linkedin.com/in/angelusgi Contact details & recap *Team Leader **Team Europe
  24. 24. Azure subscriptions Azure for Students 25+ free products and $100 in free credit* https://azure.microsoft.com/it-it/free/students Azure for Students Starter 25+ free products* https://azure.microsoft.com/it-it/offers/ms-azr-0144p Standard subscription pay-as-you-go https://Azure.microsoft.com *No credit card needed. Simply verify your student status through your school email address.
  25. 25. Resources https://azure.microsoft.com/ https://azure.microsoft.com/it-it/services/app-service/web/ https://imagine.microsoft.com/ https://imaginecup.microsoft.com/ https://aka.ms/insiderdevtour-labs https://docs.microsoft.com/labs/insiderdevtour2018/pwa/ This session is based on the InsiderDev Tour 2018
  26. 26. Q&A & Feedback http://bit.ly/2S6ntzz UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi
  27. 27. Feedback sulla giornata http://bit.ly/2CkhFNr UNIVERSITÀ DEGLI STUDI DEL MOLISE @angelus_gi

×