Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

UI5 goes PWA

OR

TAMMEN IT

SOLUTIONS

How to

get rid of

your

native apps

Dokumentation: https://goo.gl/LJ4KVB

Helmut Tammen

22-06-2018

What is a PWA ?

Progressive Web Application

A Web Application that behaves like a Native App -> PWAs will replace native Apps

1

Intro

Intro-duction

Why

native Apps ?

Why

Native Apps ?

  • User retention. There is an icon at the Homepage
  • (Used to) have better user experience than web apps
  • Offline work is possible
  • supports native features of smartphones
  • Push notifications

PWA Features

PWA

Features

  • Reliable
  • Offline
  • Responsive
  • Secure
  • Engaging

Reliable

Reliable

A PWA should launch and give users meaningful content regardless of network conditions. The level of offline functionality will depend on the application – some applications will be able to function completely offline, while others will display meaningful placeholder data informing the user that they are offline. In no case should the application break or become unresponsive.

Offline

Offline data

By using the proxy functionality of the service worker you can intercept every network request and store data for later offline use in the cache.

If the user is not connected to a network later on the application loads data for offline work from the cache.

The cache gets synchronized with online data as soon as network connection has been reestablished.

Responsive

Responsive

Progressive Web Applications should be able to adapt to different screen sizes and orientations, ensuring that the user experience is great for all users. A good responsive design helps to ensure that your application will continue to work with new devices in the future.

Secure

Secure

Progressive Web Apps are secure by default. The technologies powering PWA require apps to be served over HTTPS to work.

Engaging

Engaging

Traditionally, native applications have been much more engaging than web applications. Having an icon on the home screen makes it easy to get into the app and push notifications can help alert the user of important information that requires their attention. With Progressive Web Applications, users can now get the same benefits with web apps.

Additionally you get Fullscreen view.

User Benefits

of PWAs over

native Apps

User Benefits

PWA

  • easy to discover
  • linkable URLs
  • no installation or update
  • secure HTTPS

Developer Benefits

of PWAs over native Apps

Developer

Benefits

PWA

  • single responsive application
  • use any server language
  • easy to deploy and update
  • bypass Appstores
  • SEO? PWAs are WebApps --> no special needs.

Which Browsers support PWA ?

PWAs are not supported globally yet. Best way to explore support

PWA

Browser

Support

Service Worker:

  • Chrome - Desktop (49)
  • Chrome - Android (64)
  • Safari - Desktop (11.1)
  • Safari - iOS (11.3)
  • MS IE11
  • MS Edge (17)
  • Firefox (44)
  • Firefox Android (57)

WhatWeb

CanDo.today

https://whatwebcando.today/

CanIUse.com

https://caniuse.com/#search=service%20workers

https://caniuse.com/#feat=web-app-manifest

Technical Details

Which Techniques are used ?

2

  • meta tags
  • manifest.json
  • Service Worker
  • Push notification

Technical

Details

meta tags

added to

index.html

meta

tags

manifest.json

manifest

The Web App Manifest is a JSON file that describes the application to the browser. It defines the application's

  • name,
  • colors,
  • icons and
  • how it should run if installed to a device.

Service Worker

  • JS file
  • Proxy
  • caches static content
  • delivers offline data

The service worker is a JavaScript worker script that sits between your application and the network.

With it, you are able to intercept and handle any network requests so your application can work reliably even in poor network conditions or offline situations. Common use cases for the ServiceWorker are caching of static assets and providing fallback content for network requests when they fail.

Service

Worker

PUSH Notifications

Push

Notification

Push Notifications build on the Web Push standard and ServiceWorkers. When configured, a ServiceWorker will be activated by an incoming push notification. It can then fetch updated data and display a notification to the user. The notifications are shown as normal system notifications on mobile or desktop.

Demo

3

Dokumentation: https://goo.gl/LJ4KVB

DEMO

Online Demo: https://glitch.com/~ui5con-2018-1

STEP

Are you convinced?

Additional information

4

AWE

Resources

Useful Resources

  • PWA Builder founded by Microsoft: https://www.pwabuilder.com/
  • What Web can do Today: https://whatwebcando.today/
  • Googles Developer Page: https://developers.google.com/web/ilt/pwa/
  • Mozilla Developer Page: https://developer.mozilla.org/en-US/Apps/Progressive
  • PWA checklist: https://developers.google.com/web/progressive-web-apps/checklist
  • Workbox: https://developers.google.com/web/tools/workbox/
  • UI5ers Buzz #19: https://goo.gl/vL5NWg

Who is using PWA ?

Who is already using PWA

  • Twitter: https://mobile.twitter.com
  • Flipboard: https://flipboard.com/
  • Trivago: https://www.trivago.de/
  • Telegram: https://web.telegram.org
  • Financial Times: https://app.ft.com
  • Flipkart: https://www.flipkart.com/
  • Aliexpress: https://m.de.aliexpress.com/
  • PWA Rocks: https://pwa.rocks/
  • htammen: https://htammen.github.io/

Helmut Tammen

Contact me

email: h.tammen@tammen-it-solutions.de

Twitter: @helmuttammen

SAP Community: @helmut.tammen2

Phone: +49 170 8822491

Learn more about creating dynamic, engaging presentations with Prezi