Skip to content

8. Mobile Web Applications

1 2 Mobile App vs. Web App

  • A web app is a website that is designed fluidly, responding to being viewed on a smartphone.
  • Native Mobile Apps:
    • Built for a platform (iOS, Android, etc.).
    • Distributed through an app store, and must be downloaded and installed.
    • They can access device features (camera, GPS, etc.).
    • May run offline.
    • Faster and more efficient but require constant updates and downloads.
    • More expensive to develop, as they require different codebases for each platform and different skillsets, developers, distribution channels, etc.
    • They usually have a better user experience, and have more features and functionality.
    • Built through IDEs (Xcode, Android Studio, etc.) that target specific platforms and have specific languages and frameworks: Swift, Objective-C for iOS, Java, Kotlin for Android.
    • Big IDEs companies have standardized the development process and have made it easier to develop native apps using their tools, frameworks, languages, and development kits.
    • More secure, as they are distributed through app stores and are reviewed by the app store owners.
  • Mobile Web Apps:
    • Accessed through a web browser and require an internet connection.
    • No download or installation required.
    • Run on any device and not just phones or specific platforms.
    • Built using web technologies (HTML, CSS, JavaScript, etc.).
    • No one standard SDK or IDE for the web.
    • Quicker and easier to develop/maintain, and cheaper.
  • Progressive web apps:
    • It lays somewhere in between native and web apps, as it is a web app that can be installed on a device and can access device features.
    • Can be used offline.
    • Have some native app features, such as push notifications, native video/audio capture, native video/audio playback, etc.
    • They are responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engageable, installable, linkable web experiences.

3 Mobile Web

  • The differences between Web Apps and native apps are getting less with native apps have access to the WebView browser component.
  • With modern web features such as Device APIs, push notifications, installable apps, 60 fps animations, discoverability, the mobile web is a platform both capable and formidable.
  • The mobile web has far more users than native apps, and it is easier to reach them.

Browsers and Rendering Engines

  • Geko: used in Firefox.
  • WebKit: used in Safari and Chrome (formally). Built in 2001 by Apple for Safari, and open sourced in 2005.
  • Blink: used in Chrome, Opera, Edge, and all chromium based browsers. Forked from WebKit in 2013 by Google.
  • Presto: used in Opera before 2013. It was replaced by Blink.
  • EdgeHTML: used in Edge. It was replaced by Blink.
  • Trident: used in Internet Explorer. It was replaced by Blink.

HTML5, CSS3, and JavaScript

  • Javascript APIs included in HTML5:
    • Canvas Element.
    • Touch Events.
    • Web Storage.
    • Hardware APIs that are useful for mobile web, where it give the browser access to device hardware like GPS, Camera, and Accelerometer.
  • HTML5 brought Web Apps to the same level as native apps, as your websites can access the device hardware and sensors similar to native apps.
  • Interesting HTML5 APIs:
    • Geolocation API: it uses various device sensors (GPS, A-GPD, Wf-Fi) and exposes lots of data including lat/lng, speed, heading, etc.
    • Orientation API: it uses sensors (accelerometer, gyroscope, compass) to determine the device orientation in space and exposes orientation in 3D space, acceleration, and rotation rate.
    • Service Workers:
      • It allows web pages to run scripts in the background.
      • Those scripts work as proxy servers for their web pages, means they can intercept and modify requests/responses by/to their web pages.
      • Purpose: facilitate offline capabilities, background synchronization, and push notifications.
    • Push API: allow web pages to receive push notifications from a server.
    • Notifications API: allow web pages to display notifications to the user outside the context of the web page (like native apps).
    • Web Payments API: allow web pages to accept payments from the user and removes the need to share payment information with websites with unknown security.
    • Touch Events: allow web pages to respond to touch events.
    • Web RTC and media capture: allow web pages to access the device camera and microphone.
  • Combining Push API, Service Workers, and Notifications API, you can build a web app that can receive push notifications even when the app is closed.

Approaches to Modern Web Development

  • Responsive Web Design: Ship the same page to all devices, once the app is loaded, the view is adjusted to the device using CSS.
  • Progressive Enhancement: Ship a minimal page that works on all devices, and then enhance it with more features for more capable devices using JavaScript.
  • Mobile-First Responsive Design: The same as RWD, but the page is designed for mobile first, and then enhanced for larger screens.
  • Adaptive Web Design (Server-Side): The server detects the device and sends a different page for each device according to its capabilities.
  • RESS: Responsive Design + Server-Side Components: The server detect the device category, then it sends a different page for each category, at the device side, the page is adjusted according to the device.

Hybrid Apps

  • Hybrid apps are web apps that are wrapped in a native app.
  • Hybrid apps are distributed through the app stores, and installed like native apps.
  • They consist of a WebView or thin native app wrapper that loads the web app from the server (as if you are opening a web page in a browser).
  • Cordova, Flutter, and React Native can be used to build hybrid apps.

Progressive Web Apps

  • Started in 2015 by Alex Russell.
  • The characteristics of PWA:
    • Progressive: it works on any device and browser, functionality is enhanced based on the capabilities of the device and browser.
    • Responsive.
    • Connectivity independent: it works offline or on low-quality networks.
    • App-like: SPA without page reloads.
    • Fresh: always fetches latest data in the background.
    • Secure: Https only.
    • Discoverable: can be found by search engines.
    • Re-engageable: push notifications and other features that bring users back to the app.
    • Installable: can be installed on the home screen.
  • PWA can be installed from the browser, or from the app store.

Accelerated Mobile Pages (AMP)

  • Started as news and articles style content, but now it is used for all types of content.
  • Focus on speed and performance, all pages must load in less than 1 second.
  • AMP has three parts:
    • AMP HTML: a subset of HTML with custom tags and properties.
    • AMP JS: a JavaScript library that manages resource loading and rendering.
    • AMP CACHE: supports speedy delivery of AMP pages.
  • All valid AMP pages must include a canonical link tag that points to the non-AMP version of the page or itself if it is the non-AMP version.

Web Performance

  • Performance goals:
    • During planning, set a performance budget for the app.
    • Durning development, measure the performance of the app and adapt by optimizing code/images, and reduce the number of network requests.
    • The budget can put a limit on the number of requests, the size of the page, or the time it takes to load the page, etc.
  • RAIL: Response, Animation, Idle, Load.
    • Response: 100ms, give immediate feedback to the user input.
    • Animation: 10ms, animation should produce frames in less than 10ms to achieve 60fps.
    • Idle: 50ms, non critical work should be done in less than 50ms.
    • Load: 1s, the page should be interactive in less than 1s.

Web Testing

References

  1. Stevens, E. (2021, September 7). What is the difference between a mobile app and a web app? CareerFoundry. https://careerfoundry.com/en/blog/web-development/what-is-the-difference-between-a-mobile-app-and-a-web-app/ ↩

  2. Summerfield, J. (n.d.). Mobile website vs. mobile app – Which is best for your organization? Human Service Solutions. https://www.hswsolutions.com/services/mobile-web-development/mobile-website-vs-apps/ ↩

  3. Tabor, M., & Vrdoljak, M. (Eds.). (2019). Mobile developer’s guide to the galaxy (18th ed.) (pp 91-128). Open-Xchange. https://f.hubspotusercontent40.net/hubfs/9391640/Imported%20files/Mobile_Developers_Guide_18th_edition_web.pdf ↩