Progressive Web Applications

Odkazy

https://developers.google.com/web/progressive-web-apps/
https://developers.google.com/web/tools/workbox/
https://developers.google.com/web/tools/lighthouse/
https://material.io/develop/web/
http://jankfree.org/
https://developers.google.com/web/fundamentals/performance/

Transcript

1. PROGRESSIVE
   WEB
   APPLICATIONS
   @alesroubicek
   #devfestpce
   

   View Slide

2. View Slide

3. View Slide

4. Progressive Web Applications
   • Framework s best practices pro webové aplikace
   • Aplikace pro web, mobily i desktop
   • Rapidní vývoj a deployment
   • Ideální na prototypy a interní aplikace
   • Možnost nasazení do Play Store a Microsoft Store
   

   View Slide

5. Progressive Web Applications
   • Spolehlivé - Načítají se okamžitě a nikdy
   nezobrazují downasaura, ani v polních podmínkách
   nekvalitních sítí.
   • Rychlé - Odpovídají rychle na uživatelské interakce
   s plynulými animacemi a bez sekajícího se scrollu.
   • Zábavné - Chovají se jako nativní aplikace na
   daném zařízení, s plnohodnotným uživatelským
   prožitkem.
   

   View Slide

6. Workbox
   • Nástroj, který zjednodušuje práci se ServiceWorkers
   • Zajišťuje Pre-caching a Runtime caching → Offline
   • Různé strategie jak k datům přistupovat
   • Request routing
   • Background sync
   • Usnadňuje debuggování
   • Flexibilní konfigurace a modularita
   

   View Slide

7. Material Design Components
   • Solidní implementace komponent podle Material Design
   Guidelines
   • Nezávislé na frameworcích a adpatéry pro nejpopulárnější
   • Podpora témat a obecně velká přizpůsobitelnost
   • Vyřešená přístupnost
   • Nativní look&feel na Androidu a Chrome OS
   • Jenda z nejlepších implemantací Gridu ve frameworcích
   

   View Slide

8. Lighthouse
   • Nástroj pro auditování webů
   • Performance
   • Accessibility
   • PWA
   • Best practices
   • Používejte v Chrome DevTools a ve vašich CI pipeline
   

   View Slide

9. Links
   • https://developers.google.com/web/progressive-web-apps/
   • https://developers.google.com/web/tools/workbox/
   • https://developers.google.com/web/tools/lighthouse/
   • https://material.io/develop/web/
   • http://jankfree.org/
   • https://developers.google.com/web/fundamentals/
   performance/
   

   View Slide