Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Applications

Progressive Web Applications

Aleš Roubíček
PRO

April 27, 2019
Tweet

More Decks by Aleš Roubíček

Other Decks in Technology

Transcript

  1. PROGRESSIVE WEB APPLICATIONS @alesroubicek #devfestpce

  2. None
  3. None
  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
  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.
  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
  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
  8. Lighthouse • Nástroj pro auditování webů • Performance • Accessibility

    • PWA • Best practices • Používejte v Chrome DevTools a ve vašich CI pipeline
  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/