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.

1. JOURNEY TO THE WEBSUMMIT
ONLINE MASTERCLASSES

2. Questions?
#MicrosoftJWS

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

6. Web Foundations

7. Cross Plataform Technologies

8. Standards

9. JOURNEY TO THE WEBSUMMIT
ONLINE MASTERCLASSES

10. Different sizes, Experiences

11. Responsive Web Design

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

36. Who’s Behind this

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

45. Service Worker References
https://remysharp.com/2016/03/22/the-copy--paste-guide-to-your-first-service-worker
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

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

54. http://www.Flipkart.com
https://flights.airberlin.com
http://www.theverge.com/

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

60. Contacts
Alexandre Marreiros
Twitter:
@alexmarreiros
Email:
amarreiros@innovagency.com
amarreiros@gmail.com
Blog:
Digitalmindignition.com
Linkedin:
https://pt.linkedin.com/in/alexandremarreiros

61. Thank you!
Check out upcoming masterclasses at
http://aka.ms/jwsmasterclasses