Jws masterclass progressive web apps
Download as PPTX, PDF0 likes419 views
The document discusses the evolution of Progressive Web Apps (PWAs) and their features, emphasizing their ability to combine web and mobile app functionalities. It highlights the importance of service workers for offline support, caching, and features like push notifications, while addressing challenges such as browser support and user engagement. The document also offers resources and contact information for further exploration of PWAs and upcoming masterclasses.
Jws masterclass progressive web apps
- 1. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 3. About @alexmarreiros; Digitalmindignition.com Alexandre Marreiros Windows Platform Development Microsoft MVP Microsoft Windows DevCamp Trainer Windows Insider CTO @ Innovagency Software Dev/Arch as Independent Technical Trainer and Speaker as Independent Teacher @ EDIT Technical Writer
- 4. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 5. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 8. Standards
- 9. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 12. Grids
- 13. CSS
- 14. JavaScript and CSS Frameworks Image from Template Toaster
- 15. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 16. Cordova
- 17. WIN JS
- 18. Web as an Equal Citizen (Windows 8 )
- 19. Hosted Web APP’S(Windows 10)
- 20. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 21. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 22. Web Mobile Vs Mobile Apps Web Mobile Mobile APPS Interoperability Performance Vendor Independent Reliable Streamined Mantenance and Upgrade Pathways Seamless User Interface Based on Open Standards OS Embracement Increased Security Options Easy Offline Support Shorter Time To Market Push Notifications Leverage Existing Web Skills Experience and Evolution Native APIS and device features integrtion Easy to Search Store Distribution Browser dependent Can’t Control user’s upgrades Store Dependent
- 23. Web Mobile Vs Mobile Apps
- 24. Conected Phone usage Business Insider
- 25. APP Lifecycle 1) User Search for an APP on the Store, ask to download 2) User Install the APP 3) User navigate to a Website where is sugested to download an APP 4) Users go to the store
- 26. APP Lifecycle 1) Check Install 2) Use the APP Times this is the first and last user’s interation
- 27. APP vs Web Mobile Reach
- 28. APP vs Web Mobile Reach
- 29. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 30. The Problem
- 31. The Fix
- 32. The Problem
- 33. The Fix
- 34. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 35. The Main Idea “Taking Advantage of the latest Web Technologies and Web development Skills and Experience, to combine the best of Web and Mobile APPS” Kevin Farrugia, Incredible Web “This kind of Aplications are almost equal to the APPS on the Store, but They are just Websites who had take Vitamins.” Fabricio Teixeira, BlogAI
- 37. Progressive Web APPS Goal
- 38. The Main Idea They are Sites in the Browser Context but act as Apps once in the Home Screen https://www.washingtonpost.com/pwa/
- 39. The Main Idea
- 40. Features of a PWA Progressive Discoverably Linkable Responsive Secure
- 41. Features of a PWA App-like: A progressive web app should look like a native app and be built on the application shell model, with minimal page refreshes. Re-engageable: Mobile app users are more likely to reuse their apps, and progressive web apps are intended to achieve the same goals through features such as push notifications. Installable: A progressive web app can be installed on the device’s home screen, making it readily available. Fresh: When new content is published that content should be made available in the app.
- 42. Before Start- Understand Service Worker Service workers are programmable proxies that sit between the user’s tab and the wider Internet. They intercept and rewrite or fabricate network requests to allow very granular caching and offline support. The service worker’s function is to simplify the process of bringing an app offline; it also lays the foundation for future app-like features, such as push notifications and background sync.
- 43. Before Start – Understand Service Worker Service workers are Independent from the WebPage Doom. Are a Browser Feature Most supported on: Chrome, Firefox, opera Almost suported on Edge
- 44. Before Start – Understand Service Worker To help you build your first service Worker: https://remysharp.com/2016/03/22/the-copy--paste-guide-to-your-first-service-worker
- 46. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 47. PWA For a Ticket Website
- 48. PWA Manifest A web app manifest file is a simple JSON file that follows the W3C’specification. This metadata file in essence says to the OS that the WebSite as a APP Behavior. I case of using an Android Phone when you enter a Website that as a Manifest The browser will present a installation banner
- 49. PWA Manifest
- 50. Include the manifest The manifest should them be linked from the index.html page of the Website.
- 51. Build the Service Worker
- 52. Build the Service Worker To install and run our Service Worker, include the file in our case sw.js on your website
- 53. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 56. To Test There also a Shell variation that we can get from GitHub https://github.com/GoogleChrome/lighthouse
- 58. Challenge For Progressive Web APPS • Few browser support is available till now, hence are efforts to be made by the browsers to integrate features like Service Workers. • Engagement with the user to use the web page more and more for better performance during offline mode or slow internet speeds. • Native Apps that work completely offline cannot be converted into Progressive apps. • Progressive Web APPs are a Challenger but this is not a battle, so it is necessary to understand what’s the role of PWA and Native APPS
- 59. JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
- 61. Thank you! Check out upcoming masterclasses at http://aka.ms/jwsmasterclasses