1 / 21

Progressive Web Apps

Progressive Web Apps. De app-killer!. Definitie. PWA’s zijn web applicaties, gebouwd met webtechnologie *, die zich gedragen als een Native App. Definitie note 1. Een Native App is de App die na installatie op de SmartPhone werkt. In deze presentatie worden:

lucasj
Download Presentation

Progressive Web Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Progressive Web Apps De app-killer!

  2. Definitie PWA’s zijn web applicaties, gebouwd met webtechnologie*, die zich gedragen als een Native App.

  3. Definitie note 1 Een Native App is de App die na installatie op de SmartPhone werkt. In deze presentatie worden: • App’s op PC’s ‘PC Apps’ genoemd • Webapplicaties ‘WebApps’ genoemd.

  4. Definitie note 2 Een PWA is pas een PWA als hij gebouwd is conform de door Google opgestelde richtlijnen. Microsoft, Mozilla en Opera omarmen de PWA, Apple blijft achter (vanwege commercieel model App Store).

  5. Kenmerken t.o.v. app, verschil web applicatie • Ook offline te gebruiken. • Look and feel gelijk(?) aan App. • Push technologie is ook mogelijk. • Ook openen van camera, gebruik microfoon en gps. • Wel SEO (net als Web appl., i.t.t. (native) App)

  6. Kenmerken, kritische noot Er worden op sites kenmerken genoemd, die helemaal niet verschillen van web applicaties. Terwijl ze dat wel suggereren. Bijv. werkend op elke browser, responsive, https, altijd up-to-date, icoon op startpagina.

  7. Voordelen eigenaar t.o.v. App • Write once, run anywhere: één applicatie bouwen die draait op alle besturingsystemen (PC+SmartPhone!). • Geen verspreiding via Play Store, App Store en/of Microsoft Store, maar via sites.

  8. Voordelen gebruiker t.o.v. App en web appl. • Veel minder (schijf) geheugen nodig dan App. • Geen installatie en updates nodig, zoals bij App. • Prettiger op mobile device dan webapplicatie.

  9. Geschiedenis: sinds 2010, sinds 2015 als PWA • HTML5 • CSS3 • Vernieuwde JavaScript • Betere browsers • Krachtigere processoren

  10. Techniek: de service worker • Maakt o.a. Offline werken en Push mogelijk. • Een Service worker is een stukje Javascript. Of feitelijk stukjes Javascript. Ze werken op de achtergrond. • Te bouwen of kant en klaar te downloaden (Boilerplates).

  11. Maar nog niet alles is klaar Diverse sites geven verschillende info, door veroudering... Een recent artikel (29-05-2019), nog niet gereed: • Gebruik NFC, Bluetooth, Kalender, Contacten, Geofencing, Communicatie tussen verschillende Apps • Apple iOS (wel op Safari op Apple Smart Phone)

  12. Voorbeeld: twitter op Mobile toevoegen Ga op de SmartPhone naar https://mobile.twitter.com en geef akkoord op ‘Toevoegen aan Startscherm?’

  13. Voorbeeld: twitter op Mobile gebruiken Run de PWA en zie/voel hoe hij als een App werkt.

  14. Voorbeeld: twitter op pc toevoegen • Open op PC in Chrome (75 of hoger), kies in menu ‘Twitter installeren’:

  15. Voorbeeld: twitter op pc gebruiken En kijk aan, een heuse Windows App(licatie) erbij: (Let ook op de button op de taakbalk!)

  16. Voorbeeld: Sudoku Idem Twitter, maar bij de Sudoku PWA zie je geen url meer, oogt meer als een (native) App. https://sudoku.jull.dev

  17. Voorbeeld: eigen demo Heel basic PWA. Code is te downloaden. https://www.johnnyhogenbirk.nl/pwa_demo

  18. Voorbeeld: PWA zichtbaar als app Zowel Instagram als het eigen voorbeeld zijn zichtbaar als App in het overzicht met alle Apps. (Native en PWA door elkaar, zie het verschil in opslagruimte!)

  19. Bronnen • https://www.create.nl/blog/progressive-web-apps-de-vervanging-van-native-apps • https://www.strato.nl/sitebuilder/progressive-web-apps-wat-zijn-de-voordelen • https://www.youwe.nl/pwa/wat-zijn-progressive-web-apps • https://www.sdim.nl/blog/wat-zijn-progressive-web-apps • https://github.com/gokulkrishh/demo-progressive-web-app

  20. Leuke voorbeelden, verzamelsites • https://pwa.rocks • http://progressivewebapproom.com • https://www.thewindowsclub.com/top-10-progressive-web-apps-that-you-can-use-right-now • https://mofluid.com/blog/10-best-progressive-web-apps • https://www.simicart.com/blog/progressive-web-apps-examples • https://outweb.io • https://developers.google.com/web/showcase • https://github.com/hemanth/awesome-pwa (incl. links naar code!)

  21. Leuke voorbeelden, bouwers (met info) • https://www.nubium.nl/progressive-web-apps-pwa • https://www.emerce.nl/opinie/progressive-web-apps-wat-houdt-tegen • https://coolminds.nl/online/progressive-web-apps • https://coffeeit.nl/progressive-web-app • https://vendic.nl/progressive-web-apps • https://appartmedia.nl/blogs/web-2-0-de-progressive-web-app-maakt-de-app-store-overbodig • https://www.wphandleiding.nl/progressive-web-apps-pwa (WordPress!) • https://www.reachdigital.nl/blog/magento-pwa-graphql (Magento!) • …

More Related