The perspective of creating a mobile app that doesn’t need to be downloaded and reviewed in the App Store is very attractive, especially when there is more than one analogue for installable apps: Progressive Web Apps (PWA), Android Instant Apps (AIA) and Accelerated Mobile Pages (AMP). But here there is no silver bullet: each of the mentioned technologies has its own peculiarities of development, support and testing. In the lecture, we’ll explore each of the platforms in detail and compare them with “usual” mobile apps, so to be ready for quality assurance even in such new and unusual projects.

1. THE FUTURE OF MOBILE
t WITH PASSION TO QUALITY
Diana Pinchuk, QA @ GetSocial.im
QA CONFERENCE #1 IN UKRAINE, KYIV 2018

2. Simplify development and publishing process
Increase adoption rates => $ and ❤
Remove friction to the users
Deal with bad network and budget devices
Why are we talking about it?

3. - Benedict Evans
“We should stop talking about ‘mobile’ internet
and ‘desktop’ internet. It’s like talking about
‘colour’ TV and black and white TV.
Mobile is the internet.”

4. Why Q&ATesting
AIA
PWA
AMP
Agenda

5. @diana_pinchuk
@pinchuk.diana
Work at Getsocial.im
Write on Medium
Organize GDG Lviv and
DevFest Ukraine

6. Mobile web
AIA AMP
Native apps

7. AIA
Android Instant Apps

8. Native Android apps, without the
installation
Use your app with just a tap
AIA only loads only needed portions of
the app
Source: https://goo.gl/sudKTi

9. ANDROID STUDIO PROJECT
feature
module 1
feature
module 2
feature
module 3
base feature module
AfterBefore
modularization
ANDROID STUDIO PROJECT
feature 1
feature 2
feature 3
Installable APK Installable APK
Instant App APKs
Source: https://www.youtube.com/watch?v=9Jg1D07NgeI
Project Structure difference

10. Location Camera In-app
purchases
Permissions Contacts
Native features that could be used

11. Push
Notifications
Background
Services
External
Storage
Device
Settings
Not available features

12. Play Install API Smart Lock
Specific AIA features

13. Size reduction of installable app (4Mb)
Modularization
Code cleanup + tackle technical debt
AIA is not a trial app version, it should show full UX
Development challenges

14. Source: https://goo.gl/Vhv92c
What can help devs
Use APK Analyzer and Proguard
Specify manually version name in the base module and
feature modules
Specify full id of the resource
Use ‘mobile holdback’

15. Vimeo approach
Delete everything that isn’t the player
Trim down the AIA to 4MB
Fix the bugs created in previous steps
Modify UI to adhere to AIA UX best
practices

16. ...launch AIA and make it work
¯_(ツ)_/¯
Testing challenges...

17. Test AIA as Native Apps

18. Test Android App Links
AIA won’t be launched after URL
copy-paste
Make sure that URL mapping is correct
between multiple modules
Check that https is set up everywhere

19. UX
AIA and installable app are consistent
Transition is as smooth as possible
Keep user state after the installation
AIA UX best practices: https://goo.gl/y7z6Uu

20. UX
Allow users to finish their task without
installing the app
Don’t overuse installation prompts
INSTALL
Explicit
Implicit
AIA UX best practices: https://goo.gl/y7z6Uu

21. One more thing...
The process is killed when the AIA is idle
Don’t forget about the cache
For better debugging unzip AIA archive
Feature
A.apk
Feature
B.apk
Base.apk
Instant.zip

22. Progressive Web Apps

23. Progressive Web App
Created with Web standards
Works offline
Can optionally be installed
Looks and acts like any other app

24. Even more!
Push notifications
Keep local cache
Support for media capture
Location features

25. Service Worker
Source: http://bit.ly/2Osdd3g and http://bit.ly/2LGCQ1H

26. Service Worker Support

27. Add to home
screen
Service workers
Web push &
notifications
Credential
Management API
Payment Request
API
Meta theme color

28. Twitter Lite
65% increase in pages per session
75% increase in Tweets sent
20% decrease in bounce rate
Source: http://bit.ly/2mOJOn7 and http://bit.ly/2vh729d
23 MB 600 Kb

29. PWAs are designed to replace
websites, not native apps
...and Chrome apps...
…and desktop apps...

30. Let’s test!
github.com/gdg-x/hoverboard
Live usage (the best and the newest)
devfest.gdg.org.ua

31. Tools
Lighthouse (Audits tab in Chrome Dev tools)
developers.google.com/web/tools/lighthouse
PWA Checklist
developers.google.com/web/progressive-web-apps/checklist

33. Android iOS

34. Feature iOS Android
Store offline data < 50 Mb > 50 Mb
Delete files if not used Yes No
Can install > 1 instance of PWA Yes No
Web push No Yes
Screen orientation No Yes
Background Sync No Yes
Speech recognition No Yes
Track installations No Yes

35. iOS - what to have in mind
Might be several PWA instances on the same device
Get out of the PWA and go back => it will load from scratch
Pseudo-browsers (e.g., Chrome) won’t be able to install a
PWA or use Service Workers
Source: http://bit.ly/2LZ9EQl and http://bit.ly/2AhBOVp

36. iOS - what to have in mind
For iPhone X notch area need to update
HTML and CSS
Some web apps have the App Store link
Sometimes just a shortcut is installed

37. WebView Custom Tabs
Build-in PWA into a native app

38. Testing tips
Dive into the PWA standards (Service Worker lifecycle,
PRPL pattern, etc)
Remember about https
Lighthouse is your best friend
Test like web... and like a native app
PRPL Pattern: https://goo.gl/osVZnw

39. AMP
Accelerated Mobile Pages

40. AMP
Lightweight experiences for mobile by
simplifying the HTML and following
streamlined CSS rules
Could be added AMP to web standards

41. AMP structure

42. AMP speed
AMP itself contains a lot of optimizations
Caching by the AMP caches
Pre-rendering the assets in the first viewport
Source: https://bit.ly/2wwiGOY

43. Google ranking

45. AMP Previewer
It’s possible via Web Packaging Format
(Safari supports it as well)
It makes possible offline support

46. AMP pros
It speeds up website load time
It increases mobile ranking
It improves server performance
Source: https://bit.ly/2MJjv1b

47. AMP cons
Ad revenue is reduced
Analytics are a bit stripped
Amazing speed is achieved, thanks to cache
Source: https://bit.ly/2MJjv1b

48. AMP is important if you don’t
have a mobile website

49. AMP testing
AMP test:
search.google.com/test/amp
AMP Validation:
ampproject.org/docs/fundamentals/validate

50. AMP testing
Regularly check Google Search Console > Search
Appearance > Accelerated Mobile Pages
AMP browser extension: goo.gl/Ra8RSP

53. Final Part

54. Do you need them?
Depends on the business needs!
Mobile web
AIA AMP
Native apps

55. Mobile web
AIA
Native apps
You already have a native Android app
(or plan to create one)
One of your core features could be used in AIA
You are able to measure AIA value

56. Mobile webNative apps
You don’t have a mobile app and see a perspective
of having it. Or even a desktop app!
You have resources for learning PWA specifics
Your TA uses a lot of Android and the latest iOS

57. Mobile web
AMP
Native apps
Ranking and site speed is critical for your business
Mobile users are critical
You are able to measure the website speed and
service part is already improved

58. Conclusions
All these technologies have different purposes and
bring different values
You still need to know how to test mobile native and web
Everything depends on CONTEXT

59. Тема доклада
Тема доклада
KYIV 2018
THANKS!
QA CONFERENCE #1 IN UKRAINE