Progressive Web Apps: What are they and how to …...Progressive Web App 88 99 Accessibility 79 85...
Transcript of Progressive Web Apps: What are they and how to …...Progressive Web App 88 99 Accessibility 79 85...
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