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

WordPress als Progressive Web App

WordPress als Progressive Web App

Am 31.05.2018 habe ich beim WordPress Meetup Berlin einen Vortrag über „WordPress als Progressive Web App“ gehalten. Der Vortrag wird demnächst auch bei WordPress TV zu sehen sein.

Oliver Pohl

June 02, 2018
Tweet

More Decks by Oliver Pohl

Other Decks in Education

Transcript

  1. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Die unterschiedlichen Apps
  2. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Native Apps werden individuell für Platt- formen wie iOS, Android und Windows programmiert. • Java für Google Android • Objective-C / Swift für Apple iOS • C#, C und C++ für Microsoft Windows
  3. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Merkmale Zugriff auf Hardwarefunktionen • , wie GPS, Mikrofon, Kamera, etc. Push-Benachrichtigungen • bei geschlos- sener App Offlinefähigkeit • Herunterladen • über den App Store des jeweiligen Betriebssystemanbieters
  4. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Web Apps werden über den Webbrowser des Mobilgerätes abgerufen und bedürfen keiner Installation. Programmiert mit • HTML5, CSS3 und JavaScript für alle Plattformen
  5. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Merkmale Preisewerte • und plattformübergreifende Entwicklung Kann als • Lesezeichen auf dem Homescreen abgespeichert werden Keinen • oder nur eingeschränkten Zugriff auf Hardwarefunktionen Keine Offlinefähigkeit •
  6. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Hybride Apps bestehen aus einem kleinen nativen Rahmen und einer lokal gespei- cherten Web App. Die • Kernanwendung wird als Weban- wendung mit HTML5, CSS3 und JavaScript programmiert Die • native Funtionalität wird mit Hilfe eines Frameworks wie z.B. Apache Cordova / Adobe PhoneGap realisiert
  7. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Merkmale Ein Code • für alle Plattformen. Zugriff auf Hardwarefunktionen • durch verschiedene APIs des Frameworks Offlinefähigkeit • Vertrieb • über den App Store des jeweili- gen Betriebssystemanbieters Hybride Apps • sind unter Umständen langsamer als native Apps mit gleicharti- ger Funktionalität.
  8. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Native Web Hybride Progressive Web Apps Progressive Web Apps sind die erwei- terten Hybrid Apps auf Basis einer Technologie-Erweiterung der Browser. Die • Kernanwendung wird als Weban- wendung mit HTML5, CSS3 und JavaScript programmiert Die • native Funtionalität wird mit Hilfe eines Service Worker im Browser realisiert
  9. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Progressive Web Apps (PWA) Service Worker Ist das Herzstück einer PWA. Es ist ein Javascript, dass der App die Möglichkeit gibt, auch im Hintergrund ausgeführt zu werden. Also auch dann, wenn die App nicht geöffnet ist. Zudem stellt er die Caching-Funktionalität für den Offline-Betrieb zur Verfügung und dient als Controller der verschiedenen APIs (z.B. Web Bluetooth API, Payment Request API, etc.) Web App Manifest Ist eine JSON-Datei, die Informationen über die PWA enthält, die einerseits zur Iden- tifikation der App dient, als auch das Aussehen der Anwendung z.B. auf dem Home- screen oder im App-Switcher definiert.
  10. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Es gilt das Prinzip „Progressive Enhancement“ Auf Plattformen, die bestimmte PWA-Features noch nicht un- terstützen, soll die Anwendung dennoch so gut wie möglich ausgeführt werden. PWAs sind dadurch abwärtskompatibel und bieten auf moderneren Plattformen mehr Features.
  11. WordPress als Progressive Web App WordPress Meetup Berlin — 31.

    Mai 2018 Live-Demo: Progressive WordPress (PWA) Plugin von Nico Martin Webseite App