ДІАНА ПІНЧУК «Testing installable mobile apps analogues: Android Instant Apps, Progressive Web Apps & Accelerated Mobile Pages» Lviv QA Day 2018
Download as PPTX, PDF0 likes464 views
The document discusses the evolution of mobile and web technologies, emphasizing the importance of mobile as the primary internet platform. Key topics include the use of Android Instant Apps (AIA), Progressive Web Apps (PWAs), and Accelerated Mobile Pages (AMP) to enhance user experience and development efficiency. It also addresses challenges in testing, user experience, and the strategic value of implementing these technologies based on business needs.
ДІАНА ПІНЧУК «Testing installable mobile apps analogues: Android Instant Apps, Progressive Web Apps & Accelerated Mobile Pages» Lviv QA Day 2018
- 1. THE FUTURE OF MOBILE Diana Pinchuk, QA @ GetSocial.im
- 2. - 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.”
- 3. @diana_pinchuk @pinchuk.diana Work at Getsocial.im Write on Medium Organize GDG Lviv and DevFest Ukraine
- 5. 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?
- 6. Mobile web AIA AMP Native apps
- 7. - Benedict Evans 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
- 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 Make sure to 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. - Benedict Evans Test AIA as Native Apps
- 18. Test Android App Links AIA won’t be launched after copy-paste URL 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. - Benedict Evans 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
- 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. - Benedict Evans 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 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. - Benedict Evans AMP Accelerated Mobile Pages
- 40. AMP Lightweight experiences for mobile by simplifying the HTML and following streamlined CSS rules Could be added 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. - Benedict Evans 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. - Benedict Evans Final Part
- 54. Do you need them? Depends on the business needs! Mobile web AIA AMP Native apps
- 55. 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 Mobile web AIA Native apps
- 56. 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 Mobile webNative apps
- 57. 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 Mobile web AMP Native apps
- 58. - Benedict Evans 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 Conclusions