Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

There is an app, NO, a web API for that!

There is an app, NO, a web API for that!

"There's an app for that" used to be Apple’s catchphrase. For a really long time, mobile browsers' capabilities were really limited, and native applications were the norm. But times have changed!

There are a lot of features you can now use to enhance users’ experience in mobile browsers. Did you know you could push notifications and provide offline content for responsive websites? That you could access media, camera or voice recorder and could build an online video audio chat directly in the mobile browser, use AR, etc.? And that’s just a small sneak peak at what is possible.

Responsive design, just adapting your layout to make the site fit smaller screens is not enough anymore. Let’s unleash the capabilities of mobile browsers to create a truly mobile optimized experience. Let’s bring your website almost to the level of a native app experience!

Stéphanie Walter

June 30, 2020
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie
  2. WebRTC API + getUserMedia/ MediaStream API Opens a direct real

    time communication channel between two clients. You can share sound, video and any other data.
  3. Custom media notifications with MediaSession API ๏ customise notification artwork

    and data, ๏ seek and change track, ๏ hardware support (keys, headset), ๏ still plays when phone is locked. Specifications
  4. From video games to watching the stars: apps can use

    gyroscope and accelerometer Native
  5. Gyroscope API and Accelerometer API are also available on the

    web + full screen API for the fullscreen in the demo paperplanes.world Web
  6. Dark and Light mode based on user preference @media (prefers-color-scheme:

    light){ // light mode } @media (prefers-color-scheme: dark) { // dark mode }

  7. Switching to “dark mode” when there’s less light in the

    room with light-level @media (light-level: dim | normal | washed) { // adaptation } (CSS level 5 media query no support yet)
  8. Let’s offer less battery consuming resources when the battery is

    low! Adapting the content to battery level with Battery Status API
  9. Badges on app icons for notifications are also coming to

    the web with Badging API (origin trial in Chrome 73+ desktop)
  10. Contact Picker API - Share contact from contact list Stéphanie

    Walter - 2019 Does NOT give access to whole contact book, users have to pick
  11. Yeah, I just met you, And this is crazy, But

    here’s my request for permissions, So let me notify you maybe?
  12. On web you will only get one chance to ask

    for permissions! Asking users to reset permissions is a tedious task
  13. The Payment Request API allows merchants to easily collect payment

    information with minimal integration. paymentrequest.show
  14. Web Authentication API - an API that allows for the

    use of biometric-based authentication, as well as smart cards and USB tokens, for authentication webauthn.guide
  15. Not there’s also WebUSB API This will be more useful

    for tablet than mobile I think (unofficial draft supported on Android Chrome)
  16. W3C Web App Manifest Un fichier manifest.json qui va nous

    permettre de déclarer notre site comme une web app. Stéphanie Walter - 2019 Service Workers Manifest.json
  17. PWAs (Progressive Web Apps) are just websites that are progressively

    enhanced to function like native apps on supporting platforms
  18. Harness to power of web browsers to reduce cost multiplication

    ๏ No more specific development for each operating system ๏ No Maintenance and updates of several apps
  19. Access to Notifications, geolocation, offline support, and all the other

    cool APIs and features I presented you earlier
  20. ๏ They work on Edge (Win 10) desktop ๏ You

    can submit them to Microsoft Store and they will appear alongside native apps. Microsoft PWA
  21. ๏ No Push (yet? Still not yet in ๏ No

    App installation banner or API ๏ PWAs will not be available in the Apple store iOS partially supports PWAs Source
  22. ๏ Apple Pay is now available in the PWAs ๏

    PWAs run in the background iOS partially supports PWAs Source
  23. Performance ๏ Native apps download a lot of assets on

    user’s phone so they feel fast when they load ๏ Native apps can use GPU acceleration (for video games for example) so they still feel a lot faster most of the time than websites
  24. And more ๏ Caching LARGE files is still complicated (because

    the cache size is limited) ๏ Customisation of certain native UI (gallery, HTML5 date picker, etc.) ๏ Specific protocol supports (SSH, FTP, etc.) ๏ SMS, Alarm clock
  25. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie