Pro Yearly is on sale from $80 to $50! »

Progressive Web Apps: Das Ende der App-Stores oder über-hyptes Buzzword-Bingo?

Progressive Web Apps: Das Ende der App-Stores oder über-hyptes Buzzword-Bingo?

Progressive Web Apps (PWA) erfahren derzeit große Beachtung. 2015 von Google in Umlauf gebracht, ist es heute eines der prominentesten Buzzwords im Bereich der Webentwicklung. Sie versprechen Offlinefähigkeit, sollen installierbar sein, können Push-Benachrichtigungen und einiges mehr. Doch was steckt wirklich dahinter? Was gibt es bei der Entwicklung zu beachten und wie sieht die Unterstützung solcher PWAs auf verschiedenen Plattformen & Browsern aus? Sind PWAs wirklich das Ende der App-Stores oder nur ein weiteres Buzzword, das schnell wieder verschwindet? Finden wir es heraus! In diesem Talk möchte Steffen Jahr eine Einführung in die Welt der PWAs geben und zeigen, wie die Zukunft von Apps aussehen könnte. Let’s go!

7e6b46c3ed5205fe1ce4f47425fd267e?s=128

Steffen Jahr

June 20, 2018
Tweet

Transcript

  1. Progressive Web Apps: Das Ende der App- Stores oder über-hyptes

    Buzzword- Bingo? Karlsruher Entwicklertag 2018 Steffen Jahr @steffenjahr steffen.jahr@thinktecture.com
  2. Karlsruher Entwicklertag 2018 Progressive Web Apps Who is speaking? Steffen

    Jahr Software Developer @ Thinktecture AG ! steffen.jahr@thinktecture.com " @steffenjahr # https://steffenjahr.de
  3. • Native development • One programming language per platform •

    Android: Java • iOS: Objective-C • Windows Mobile/Phone: C# Progressive Web Apps Karlsruher Entwicklertag 2018 App development at the beginning (Source: https://www.ifixit.com/Device/iPhone_1st_Generation)
  4. • Cross Platform Development • Cordova, Ionic, … • HTML5,

    JavaScript & CSS3 • Write once, run anywhere! Progressive Web Apps Karlsruher Entwicklertag 2018 App development today (Source: http://view.ionic.io/phones.png)
  5. What’s next? Progressive Web Apps Karlsruher Entwicklertag 2018 App development

    in the future ?
  6. • ~700k Apps in Windows Store (phones and tablets included)

    • ~30k Apps in Mac App Store • Primary: Native development • C# • Swift • Objective-C • Alternative: Electron application • HTML5 • CCS3 • JavaScript Progressive Web Apps Karlsruher Entwicklertag 2018 Wait! What about desktop?
  7. • No difference between website or app • Apps can

    be installed directly from browser • No app stores anymore! • One programming language for all platforms • Access to native device resources Progressive Web Apps Karlsruher Entwicklertag 2018 What about the future?
  8. The answer! • Defined by Google in 2015 • No

    new technology to develop applications • No new programming language needed • Describes a type of applications • Installable • Offline • Push Notifications • And much more… Progressive Web Apps Karlsruher Entwicklertag 2018 Progressive Web Apps
  9. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive “Uber Pattern” Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  10. Progressive Web Apps Karlsruher Entwicklertag 2018 How can this be

    achieved? ?
  11. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch

    API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview Karlsruher Entwicklertag 2018 Progressive Web Apps
  12. • Background tasks • Lives in its own JavaScript file

    • Has its own thread to prevent UI blocking • No DOM manipulation • Can communicate with the application • Proxy between app and network • Have to be installed • Available: https://jakearchibald.github.io/isserviceworkerready/ Progressive Web Apps Karlsruher Entwicklertag 2018 Service Worker
  13. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  14. • One layout for all devices • Phone • Tablet

    • Desktop • Layout reacts on resizing • Implementation with CSS3 Media Queries or CSS frameworks (that use Media Queries) • Media Queries: https://github.com/eduardoboucas/include-media • Bootstrap • Foundation • Material Progressive Web Apps Karlsruher Entwicklertag 2018 Responsive
  15. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  16. • App is linkable because it is a web application

    • State of the application is controlled by URL • https://fancy-pwa-application.com/#/features • Very complex to implement in conventional desktop applications Progressive Web Apps Karlsruher Entwicklertag 2018 Linkable
  17. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  18. • How to differ between a website and a Progressive

    Web App • Idea: Define Metadata for the application • Solution: Manifest.json • Requirement for more Progressive Web App features • Linked in index.html • Search machines can differ between website and app • Microsoft integrates PWAs in their App Store • Auto indexing is in beta state Progressive Web Apps Karlsruher Entwicklertag 2018 Discoverable
  19. manifest.json { "short_name": "PWA Demo", "name": ”Karlsruher Entwicklertag 2018", "icons":

    [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Title Icons Start URL Display Type Splash Screen Additional Config Description Related Apps Karlsruher Entwicklertag 2018 Progressive Web Apps
  20. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  21. • Installable without App Store • Browser shows banner to

    install • Needs information in Manifest.json • Icon (144x144) • Name • User has visited site at least twice, with at least five minutes between visits • Future: Shows only if developer triggers it in BeforeInstallPromptEvent Progressive Web Apps Karlsruher Entwicklertag 2018 Installable
  22. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  23. • Usage of native APIs • Audio • Camera •

    Storage • Location • No reload on site navigation • Single Page Application Frameworks like Angular, React, … • Usage of app shell • Fast loading time • Dynamic content Progressive Web Apps Karlsruher Entwicklertag 2018 App-Like
  24. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  25. • App is available offline • Difference between app and

    data • App can be cached in Cache Storage through Service Worker • Data should be cached in a local storage (LocalStorage, IndexedDB) • Development: Offline first Progressive Web Apps Karlsruher Entwicklertag 2018 Connectivity Independent
  26. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  27. • Service Worker is always up-to-date • Caches will be

    refreshed during update • Respects max-age of the Service Worker script • Service Worker will be reloaded every 24h at least Progressive Web Apps Karlsruher Entwicklertag 2018 Fresh
  28. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  29. Security first! • Progressive Web Apps require HTTPS • Only

    localhost is allowed for development • Security is very important because of Service Worker power • Service Worker can affect the application • Service Worker has access to network traffic Progressive Web Apps Karlsruher Entwicklertag 2018 Safe
  30. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  31. Please come back • Bring back users to the application

    • Progressive Web Apps can use notifications • Look like native app notifications • Also notifications on desktop • App needs authorization for notifications Progressive Web Apps Karlsruher Entwicklertag 2018 Re-engageable
  32. Push API • Service Worker can receive push data from

    the server • Supported by: • Google Chrome • Mozilla Firefox • Microsoft Edge • Every Browser has its own Push Service • Chrome: Firebase Cloud Messaging • Firefox: Mozilla Push Service • Microsoft: Microsoft Push Service • Push messages only can be received from this Push services (yet) • API can use Web Push protocol to send notifications Progressive Web Apps Karlsruher Entwicklertag 2018 Re-engageable
  33. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Karlsruher Entwicklertag 2018 Progressive Web Apps https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
  34. • Developing gradually • Features depending on browser support •

    Check for feature support: https://caniuse.com • Browser with the best support: Google Chrome • Restricted Service Worker support (yet): Edge, Safari Progressive Web Apps Karlsruher Entwicklertag 2018 Progressive
  35. • Web Share API • Share data with other applications

    • Only available in Chrome Beta for Android • Web Share Target API • Make your application a share target • Payment Request API • Start payment request • Only available in Edge and Chrome for Android • Web Bluetooth API • Interact with bluetooth devices • Only available in Chrome Progressive Web Apps Karlsruher Entwicklertag 2018 The Power of the Modern Web
  36. Workbox § Tool to create Service Worker § Provides common

    caching strategies for Service Worker § Also provides offline analytics (based on Google Analytics) § Available for different build tools § https://workboxjs.org/ Progressive Web Apps Karlsruher Entwicklertag 2018 Tools
  37. Lighthouse • Tool from Google • Chrome-Extension or Node module

    • Checks different indicators if your app works like a Progressive Web App • Service Worker • Performance • App-Like • HTTPS Progressive Web Apps Karlsruher Entwicklertag 2018 Tools
  38. • Progressive Web Apps can be the future • Depends

    on support of browser companies • Apple has just started to implement the Service Worker • Payment has to be solved • No App Stores === No payment • Payment Request API can be the right way • Google and Microsoft are pushing hard! • New APIs are coming Progressive Web Apps Karlsruher Entwicklertag 2018 A glance across the border
  39. Demo Progressive Web Apps Karlsruher Entwicklertag 2018

  40. A real world application • Twitter Lite (introduced April 2017)

    • Push Notifications • Responsive • Offline • Safe • Automatic Updates • https://lite.twitter.com/ Progressive Web Apps Karlsruher Entwicklertag 2018 Progressive Web Apps (Source: https://lite.twitter.com/)
  41. • Livin’ On The Edge • Browser support is not

    optimal • But it is growing fast!!! • PWA may be the future of applications • Great way to extend current web applications • Progressive Web Apps can be built for Android devices • Apple is forced to act because of Androids overwhelming market share Progressive Web Apps Karlsruher Entwicklertag 2018 Summary
  42. Thank you! Questions? Contact @steffenjahr steffen.jahr@thinktecture.com https://steffenjahr.de