Aprovecha al máximo tu web app con PWA en Windows

Una introducción al mundo de PWA, y cómo convertir tu aplicación web existente en una aplicación movil en minutos.

Transcript

1. Aprovecha al máximo tu web app con PWA en Windows Mauricio Contreras Microsoft MVP
2. Mauricio Contreras Microsoft MVP Developer Technologies @maurocon3ras https://maurocon3ras.com ¿Quién es este cabro?
3. Una PWA es Progresiva Funciona en cualquier dispositivo y aumenta funcionalidades progresivamente. Detectable Mejor descubrimiento e integración con la búsqueda. Enlazable Habilidad para mantener o recargar sus estados y ser compartida desde un enlace (link). Responsiva Se adapta al tamaño de pantalla de cualquier dispositivo. Como una app Conectividad agnóstica Actualizada La aplicación y el contenido están actualizados cuando están conectados a Internet. Compromete al usuario Promueve el volver a usarla a través de características tales como notificaciones push. Rendimiento Funciona tan rapido o más que una aplicación nativa. Conectado a los usuarios Comentarios directos a través de calificaciones y comentarios Como una app Parece una app nativa y utiliza el modelo de shell de la app con mínimas actualizaciones de página. Conectividad agnóstica Funciona con poca o nula conectividad Instalable Instalable en el escritorio, el menú de inicio o la barra de tareas del dispositivo, de modo que esté fácilmente disponible. Progresiva
4. La mejor experiencia para tu contenido Web estará en Windows. Por qué PWA? – La meta de Microsoft
5. 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. Mantén tu flujo de trabajo de la web
6. Devices + IoT PC Xbox Surface Hub HoloLens A C R O S S W I N D O W S C R O S S P L AT F O R M PROGRES S I VE WEB APPS X
7. HTTPS Web App Manifest Service Worker Mínimo Viable – Progressive Web App
8. Web Application Manifest { "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" }
9. Demo: W3C Manifest
10. Network Web App Network request – Caso típico
11. Network request - Service Worker en juego Service Worker Network Cache Web App
12. Demo: Service Worker
14. Como llegar a la tienda Auto Indexing (beta) Publícala por ti mismo
15. Tomar posesión de una App Abre una cuenta de desarrollador en dev.microsoft.com Muestra propiedad de tu Web App solicitando transferencia a reportapp@microsoft.com
16. Como NO ser publicado • Sin manifest, sin https o sin capacidad offline • Archivo Robot.txt diciendole a Bing que ignore el manifest • Display: browser • Pedirle a la tienda que elimine la app (reportapp@microsoft.com)
17. • Valida si tu PWA está lista para la Microsoft Store • Mejora rendimiento y UX
18. Publicando tu mismo la App • Abrir o Mantener activa una en Dev Center • Cumplir con las políticas de la Tienda de Microsoft • Generar Appx con VS, pwabuilder CLI, o en PWABuilder.com
19. Demo: Empaquetado y Sideloading para la Microsoft Store
21. Valor agregado de una Windows Store App • Analíticas Dev Center • In app Purchase • Difusión • Service Workers • Windows API access
23. Windows API in a PWA Demo
24. PCL u objetos WinRT que han sido “permitidos para la Web” Empaqueta la PWA en Visual Studio (por ahora) Clases expuestas en el DOM como objetos JavaScript nativos Usado para: - Reusar Código - Llamar APIs no accesibles - Rendimiento Llamando C# / C++ desde una PWA
25. Llamando C# desde un webview namespace CommunicationWinRT { [Windows.Foundation.Metadata.AllowForWeb] public sealed class CommunicationWinRT { public CommunicationWinRT() { } public String GetValue() { return "Desde componente WinRT 1313!"; } } }
26. Llamando C# desde un webview document.getElementById('toast').addEventListener('click', function () { if (window.CommunicationWinRT) { testToast.toastMessage(document.getElementById('input').value, 0) } else { alert(document.getElementById('input').value) } }) if (window.CommunicationWinRT) { var testToast = new CommunicationWinRT.CommunicationWinRT(); }
27. Recuerden: 1. Las PWAs son parte de Windows para permitirles crear buenas experiencias de usuario a los desarrolladores web. 2. Las PWAs pueden ser indexadas automáticamente o agregadas a la tienda de Microsoft por un desarrollador. 3. Las PWAs son ponderosas, flexibles y extensibles en Windows. 4. Ésta es la primera version de las PWAs en Windows (más en camino).
28. https://bit.ly/2upr5Ss - Hands On Lab https://pwabuilder.com Mauricio Contreras Microsoft MVP Developer Technologies @maurocon3ras https://maurocon3ras.com