Skip to content

Latest commit

 

History

History
174 lines (130 loc) · 7.75 KB

content.md

File metadata and controls

174 lines (130 loc) · 7.75 KB
Raw

Building For Mobile 📲

Introduction

Creating a mobile-friendly experience is essential in today’s app development because a significant portion of internet traffic comes from mobile devices. This lesson covers strategies for making Ruby on Rails applications work effectively on mobile platforms.

1. Mobile Responsive Design

Overview

Responsive design ensures your web application adjusts seamlessly to fit the screen size of various devices, providing an optimal viewing experience. This is crucial for accessibility and user satisfaction.

Implementation

To make a Rails application responsive, you start by setting the viewport in the HTML layout. This tells the browser how to control the page's dimensions and scaling.

<meta name="viewport" content="width=device-width, initial-scale=1">

Tips for Responsive UI

  • Use CSS frameworks like Bootstrap or Tailwind CSS that include responsive design by default.
  • Employ CSS media queries to alter styles based on device characteristics.
  • Design mobile-first, which means designing for the smallest screen and scaling up. The majority of web traffic comes from mobile devices.

source

2. Progressive Web Apps (PWAs)

Overview

PWAs use modern web capabilities to deliver an app-like experience to users. They can be designed to work offline and perform fast, mimicking a native app on mobile and desktop environments.

Key Benefits

  • Native-like feel: with capabilities like push notifications, offline work mode, and home screen installation.
  • Broad accessibility: via a standard web browser without the need for app store submission.

Limitations

  • App Store Restrictions: Not allowed in Apple’s iOS App Store, which might limit their visibility on iOS devices.
  • Limited access to native device features: Cannot access certain native components of the device, such as ARKit, Face ID, or Bluetooth.
  • and more...

Despite these limitations, PWAs on iOS have been evolving, and many of these restrictions have been addressed or improved over time. As an aside, Steve Jobs' orginal vision for the iPhone was 100% web apps.

Steps to Convert Your Rails App into a PWA

  1. Add Routes, Controller, and Views
# app/controllers/pwa_controller.rb
class PwaController < ActionController::Base
  def service_worker; end
  def manifest; end
end
# config/routes.rb  
get "/service-worker.js", to: "pwa#service_worker"
get "/manifest.json", to: "pwa#manifest"
  1. Setup the Web App Manifest: Include a manifest file with metadata about the app (e.g., name, icons). This is usually available at /manifest.json.
// app/views/pwa/manifest.json.erb
{
  "short_name": "YourAppName",
  "name": "YourAppName",
  "id": "/",
  "icons": [
    {
      "src": "<%= image_path "your-icon.png" %>",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#000000"
}
  1. Service Workers: Implement service workers for handling offline caching and resource retrieval strategies. Think of this as a "background assistant" for your progressive web app. This should be available at /service-worker.js. You only need to setup the service-worker.js if you plan to add offline caching functionality.
// app/views/pwa/service_worker.js

self.addEventListener('install', event => {
    console.log("Service worker installed");
    // Perform install steps
});

self.addEventListener('activate', event => {
    console.log("Service worker activated");
    // Clear old caches
});

self.addEventListener('fetch', event => {
    console.log("Service worker fetching:", event.request.url);
    // Here you could add code to respond to the request
});

Need to create a bridge to connect your application to the service worker. This script tells your application when and from where to load your service worker.

// app/javascript/pwa/companion.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then((registration) => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch((error) => {
      console.log('Service Worker registration failed:', error);
    });
}
// app/javascript/application.js

import './pwa/companion';
  1. Add to Home Screen: Add <link> to prompt users to install the app on their home screens.
<!-- app/views/layout/application.html.erb -->

<link rel="manifest" href="/manifest.json" />

If setup properly, you should now see an install prompt when opening your application.

Refer to these guides for detailed instructions:

3. Hybrid Mobile Apps

Overview

Hybrid Application frameworks are technologies used to build for multiple platforms using the same codebase. They can be distributed through app stores and take advantage of the device's native features.

Popular Frameworks

  • Turbo Native and Strada: Designed specifically for Rails applications.
  • React Native: Build mobile apps using JavaScript and React.
  • Xamarin: Uses C# and .NET framework for building apps for any mobile platform.
  • Flutter: Google's UI toolkit for crafting natively compiled applications for mobile, web, and desktop from a single codebase.
  • Electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
  • and many more!

4. Full Native Approach

Going fully native means using the platform-specific programming language and tools.

  • iOS: Develop with Swift or Objective-C.
  • Android: Develop with Kotlin or Java.

This approach allows the best performance and access to all device capabilities but requires a separate codebases for each platform.

Conclusion

Building for mobile offers multiple pathways: responsive web design, PWAs, hybrid apps, or full native development. Each has its advantages and trade-offs, and the best choice depends on your specific project needs and audience.