Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testing installable mobile apps analogues

Df45970eb8f0e9c2a2570ecd9c5d3237?s=47 Diana Pinchuk
September 22, 2018

Testing installable mobile apps analogues

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 analog 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.

Df45970eb8f0e9c2a2570ecd9c5d3237?s=128

Diana Pinchuk

September 22, 2018
Tweet

More Decks by Diana Pinchuk

Other Decks in Technology

Transcript

  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&A Testing 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 After Before 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
  32. None
  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

  44. None
  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
  51. None
  52. None
  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 web Native 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