Progressive Web Apps: What are they and how to …...Progressive Web App 88 99 Accessibility 79 85 Best Practices 87 89 SEO 100 100 Tasks: Performance use Progressive

Progressive Web Apps:What are they and how to test them

December 2018

Speakers

2

Ruth Zamir

Director of Marketing

Tom Ben Simhon

Americas CTO

Agenda

3

What are PWAs? Why are they trending?01 10 min

PWA architecture 02

Summary & Q&A

0304

Testing PWAs

10 min

10 min

30 min

Demo

4

Why are PWAs a growing trend?

5

of internet time on smartphones is in apps90%

will leave page that loads in over 3 seconds

Average app downloads per month

53%

Native apps currently dominant… But the winds of change are here

of time spent in apps is in 7 apps

90%

Web apps reach X3

0

Web experience closing gap with mobile

6

“Websites that took all the right vitamins*”(not hybrid apps)

Offline / low network mode

Icon & app shell Notifications

* Alex Russell

A growing trend

7

Proven results*

8

40% more time on the site

Ad revenue rates up by 44%

Core engagements up 60%

60% of customers who had uninstalled their native app return to use the Flipkart PWA

84% decrease in time until the page is interactive

17% increase in conversions

53% increase in mobile sessions on iOS

Cut load times from 11.37s to 4.69s

90% smaller than android native app

User engagement up

* Yes, you could argue that you can achieve these results without a PWA

9

Poll

Impact on App Development & Delivery

10

Same app for all platforms *

Instant push to production

* iOS PWA functionality will have different implementation due to limitations

Not only an immersive, app-like experience

11

Linkable

Responsive

Connectivity independent

App-like-interactions

Fresh

Safe

Discoverable

Re-engageable (push)

Installable

*Defined by Alex Russell and Frances Berriman in 2015

Who is pushing for PWA?

12

Agenda

13

What are PWAs? Why are they trending?01 10 min

PWA architecture 02

Summary & Q&A

0304

Testing PWAs

10 min

10 min

30 min

Key building blocks and strategies

14

App Shell Manifest file Service Worker Security Layer

Caching Strategy – what is cached, where, Ensure performance and offline availability

Basic components that provide an app like

experience

is a script that your browser runs in the background,

separate from a web page

Meta information about the web app. e.g. icon,

background color, name short name, etc.

(currently only in Chrome)

Browser support for PWA (Source: caniuse.com)

15

Service Workers

Manifest files

16

• No Push Notifications

• Offline data and file storage 50 Mb limitation

• If the user doesn’t use the app for a few weeks, iOS will free up the app’s files.

• No Siri integration

• No access to some features, such as Bluetooth, serial, Beacons, Touch ID, Face ID, ARKit, altimeter sensor, battery information

• No access to execute code while in the background

• No access to private information (contacts, background location)

• No access to native social apps

• No access to In App Payments

iOS PWA limitations

Agenda

17

What are PWAs? Why are they trending?01 10 min

PWA architecture 02

Summary & Q&A

0304

Testing PWAs

10 min

10 min

30 min

18

Testing strategy

Test for PWA

Progressive web app

Test other functional & non-functional aspects

Functional testing

Test for RWD –visual cross

browser testing

Non-functional Visual cross browser testing

Google checklistTest caching strategy

Test manifest Test service workers

19

Google tools - Help guide you through the PWA testing process

Google Lighthouse

Progressive Web App Checklist

20

21

Testing strategy - process

Initial Grade Sprint 1 Sprint 2 Target score

Performance 69 80

Progressive Web App 88 99

Accessibility 79 85

Best Practices 87 89

SEO 100 100

Tasks:

Performance use <script async>

Progressive Web App

All app URLs load while offline Use a Service Worker.

Best Practices

SEO

22

23

Agenda

24

What are PWAs? Why are they trending?01 10 min

PWA architecture 02

Summary & Q&A

0304

Testing PWAs

10 min

10 min

30 min

Summary

• App usage and customer experience require a rethink of app design

• Web sites gaining back their position with advanced web stack tech

• Move to app-like web sites changes the dev org structure

• PWAs are far easier to provision and deploy

• Testing needs to consider both traditional testing and PWA aspects

25

• https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/

Additional resources

27

Questions?▪Schedule a meeting to see how Experitest can help:

▪[email protected]

28