Progressive Web Apps: Das Ende der App- Stores oder ber-hyptes - - PowerPoint PPT Presentation

progressive web apps das ende der app stores oder ber
SMART_READER_LITE
LIVE PREVIEW

Progressive Web Apps: Das Ende der App- Stores oder ber-hyptes - - PowerPoint PPT Presentation

Progressive Web Apps: Das Ende der App- Stores oder ber-hyptes Buzzword- Bingo? Karlsruher Entwicklertag 2018 Steffen Jahr @steffenjahr steffen.jahr@thinktecture.com Progressive Web Apps Karlsruher Entwicklertag 2018 Steffen Jahr Who is


slide-1
SLIDE 1

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

Steffen Jahr @steffenjahr steffen.jahr@thinktecture.com

slide-2
SLIDE 2

Karlsruher Entwicklertag 2018 Progressive Web Apps

Who is speaking? Steffen Jahr

Software Developer @ Thinktecture AG ! steffen.jahr@thinktecture.com " @steffenjahr # https://steffenjahr.de

slide-3
SLIDE 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)

slide-4
SLIDE 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)

slide-5
SLIDE 5

What’s next?

Progressive Web Apps Karlsruher Entwicklertag 2018

App development in the future

?

slide-6
SLIDE 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?

slide-7
SLIDE 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?

slide-8
SLIDE 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

slide-9
SLIDE 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/

slide-10
SLIDE 10

Progressive Web Apps Karlsruher Entwicklertag 2018

How can this be achieved?

?

slide-11
SLIDE 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

slide-12
SLIDE 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

slide-13
SLIDE 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/

slide-14
SLIDE 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

slide-15
SLIDE 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/

slide-16
SLIDE 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

slide-17
SLIDE 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/

slide-18
SLIDE 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

slide-19
SLIDE 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

slide-20
SLIDE 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/

slide-21
SLIDE 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

slide-22
SLIDE 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/

slide-23
SLIDE 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

slide-24
SLIDE 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/

slide-25
SLIDE 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

slide-26
SLIDE 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/

slide-27
SLIDE 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

slide-28
SLIDE 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/

slide-29
SLIDE 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

slide-30
SLIDE 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/

slide-31
SLIDE 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

slide-32
SLIDE 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

slide-33
SLIDE 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/

slide-34
SLIDE 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

slide-35
SLIDE 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

slide-36
SLIDE 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

slide-37
SLIDE 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

slide-38
SLIDE 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

slide-39
SLIDE 39

Demo

Progressive Web Apps Karlsruher Entwicklertag 2018

slide-40
SLIDE 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/)

slide-41
SLIDE 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

slide-42
SLIDE 42

Thank you! Questions? Contact

@steffenjahr steffen.jahr@thinktecture.com https://steffenjahr.de