This document discusses how to create progressive web apps (PWAs) using Angular 5 and Visual Studio Code. It begins by defining PWAs as hybrid applications that combine features of regular websites and mobile apps. The benefits of PWAs are then outlined as being reliable, fast and engaging. Steps are provided for adding Angular and the service worker capability to enable progressive features. The use of the web app manifest, service workers and caching are explained. Demo sections show how to set up the development environment and use tools like Lighthouse to test PWAs. Resources for learning more are listed and contact information for the author is provided at the end.

1. 15th June 2018
Creare PWA con Angular 5
e Visual Studio Code
Emanuele Bartolesi

2. 15th June 2018
Creare PWA con Angular 5 6
e Visual Studio Code
Emanuele Bartolesi

3. What is a PWA?

4. What is a PWA?
“Progressive Web App (PWA) is a term used to denote
a new software development methodology. Unlike
traditional applications, progressive web apps are a
hybrid of regular web pages (or websites) and
a mobile application. This new application model
attempts to combine features offered by most
modern browsers with the benefits
of mobile experience.”
Source: wikipedia

5. What is a PWA?
“Progressive Web Apps, the most exciting thing
that happened to the web since AJAX.”
Source: Maurizio Mangione

6. Reliable

7. Fast

8. Engaging

9. Why build PWA?

11. HTTPS Web App Manifest Service Worker
Minimum Viable – Progressive Web App

12. 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"
}

13. NetworkWeb App
Network request - Typical

14. Network request -
Service Worker in play
Service
Worker
Network Cache
Web App

15. DEMO

16. Add Angular to your application
• ng new ApplicationName
• (new) ng new angular-pwa-app --service-worker
• (update) ng add @angular/pwa
• ng build –prod
• npm install -g http-server
• http-server -c-1

17. DEVELOPMENT ENVIRONMENT
Right tools for the right developers

18. Visual Studio Code

19. Extensions

20. DEMO

21. Lighthouse

22. Lighthouse – Chrome Extension (beta)

23. Lighthouse – Dev Tools

24. Lighthouse CLI

25. Sonarwhal

26. DEMO

27. Resources
• https://www.pwa.rocks
• https://developers.google.com/web/progressive-web-apps
• https://developers.google.com/web/progressive-web-apps/checklist
• https://developers.google.com/web/tools/lighthouse
• https://app-manifest.firebaseapp.com
• https://realfavicongenerator.net

28. Where are the instructions?
https://aka.ms/ms-docs
 Docs.microsoft.com
https://aka.ms/intldocs
Do you like Open Source?
https://aka.ms/msossloc
in your language,
today!
VS Code
SQL on Linux
SQL Ops Studio
Team Explorer Everywhere
… and more!

29. Feedback!!!

30. Senior Full Stack Web Developer
-
Ethical Hacker
-
Blogger
http://www.emanuelebartolesi.com
@kasuken
@kasuken emaueleb@outlook.com
//github.com/kasuken

31. Thank You!