Getting iOS device "technical name"/"official model"

[KevinKelchen]

Hi All, 👋

This topic was touched upon here and here but neither quite addressed my questions, so I'm posting a new discussion. 🙂

Background

We are attempting to migrate from the cordova-plugin-device plugin to the Capacitor Device plugin.

We use cordova-plugin-device for one thing, and that is to access three pieces of device information:

1. OS version
2. Manufacturer
3. Model

In my limited testing so far on hybrid iOS and hybrid Android, it appears that Capacitor Device produces consistently detailed results for the OS version and Manufacturer which is awesome. However, at least on iOS, Model seems to have taken a step "backward" as far as information fidelity goes.

cordova-plugin-device provides a model value that looks something like iPhone9,1 while Capacitor Device provides a value that looks something like iPhone. The value from cordova-plugin-device allows us to know what specific model of iPhone is actually being used (for example, an iPhone 6s, iPhone 12, etc.) while the Capacitor Device plugin does not. I'm referring to the more specific model value as the "technical name" or "official model" given that they've been cited as such in the linked issue/discussion mentioned at the beginning of this post.

It appears that Capacitor Device uses UIDevice.model which might not produce the more detailed model value given that Apple says, Possible examples of model strings are @”iPhone” and @”iPod touch”.

Looking at cordova-plugin-device, it appears to use UIDevice.modelVersion. However, this is not a standard property from Apple's docs. I found the implementation of it here though.

On Stack Overflow I found a question about implementing what appears to be virtually the same solution as cordova-plugin-device uses but in Swift. An answer to the question contains a Swift version of the implementation that may prove useful.

Use Case

We really value having this more accurate/detailed model information because we collect analytics from our users and use the device model data to inform product and support decisions.

Questions

Is there a way to get this more detailed iOS model information from Capacitor Device?

If that is not configurable, is it worth submitting as a feature request?

Workarounds

I was able to work around it by adding a custom Capacitor plugin that is local to our app and within it use the same native code as in the Stack Overflow answer which, again, is modeled off of the same solution as cordova-plugin-device uses:

DeviceModelPlugin.swift

// The Capacitor Device plugin does not provide detailed iOS device
// model information.
// To work around this we've created a local, custom plugin that
// retrieves it.
// The implementation is from a Stack Overflow answer
// (https://stackoverflow.com/a/25467259/12493735 ) that provides a
// Swift version of the same solution that `cordova-plugin-device`
// uses (see
// https://github.com/apache/cordova-plugin-device/blob/2fc1d3cac0ed37a37de6a6aa18e7955342037a1d/src/ios/CDVDevice.m#L29 ).
// For more info see https://github.com/ionic-team/capacitor/discussions/4353

import Capacitor

@objc(DeviceModelPlugin)
public class DeviceModelPlugin: CAPPlugin {
    
  @objc func getModelInfo(_ call: CAPPluginCall) {
    var size = 0
    sysctlbyname("hw.machine", nil, &size, nil, 0)
    var machine = [CChar](repeating: 0, count: size)
    sysctlbyname("hw.machine", &machine, &size, nil, 0)
    let model = String(cString: machine)
    
    call.success([
        "model": model
    ])
  }
}

device-model.plugin.ts

import { Plugins } from "@capacitor/core";

export interface DeviceModelPlugin {
  getModelInfo(): Promise<{ model: string }>;
}

export const { DeviceModel }: { DeviceModel: DeviceModelPlugin } = Plugins as any;

(Ionic Angular TypeScript client code excerpt which invokes the plugin)

let nativeProperties: NativeProperties = {};

if (this.platform.is("hybrid")) {
  const deviceInfo = await Device.getInfo();
  let model = deviceInfo.model;

  if (this.platform.is("ios")) {
    const modelInfo = await DeviceModel.getModelInfo();
    model = modelInfo.model;
  }

  nativeProperties = {
    "Manufacturer": deviceInfo.manufacturer,
    "Model": model,
    "OS Version": deviceInfo.osVersion,
  };
}

It might still be preferable if this was included out-of-the box. Again, if we think a feature request is appropriate or perhaps even a PR using the same solution as my workaround, please let me know.

Thanks so much for your help! 😀

Kevin

[finnmerlett]

I found this post because I was looking for a way to get the proper full name of the iOS model, like iPhone XR. I tried your workaround, but it only gave me the model identifier (eg. iPhone11,8). I did a bit of digging online, and dove into hacking together a Swift script for the first time ever (great language, worked quickly and gave clear errors when there was a bug).

Anyway, here is the patch file for modifying @capacitor/device to include the full correct model name on iOS, all the way up to late 2021 - use the npm package patch-package to apply it manually, or programmatically eg. in a postinstall. Capacitor maintainers, it should be fairly easy to implement a PR from the applied patch file, if you wish.

I pulled most of the code from this SO answer, no doubt as more iOS devices are added this answer will be updated.

This is absolutely not exhaustively tested and may contain bugs anywhere and everywhere. I am an absolute novice with swift (as in I started this evening), so no guarantees of any kind with this patch. Cheers :)

Patch file (unzip and place at <project-root>/patches): @capacitor+device+1.0.3.patch.zip

[KevinKelchen]

Thanks, @finnmerlett! 😀

If you’re looking for the friendly name of the model, that solve is definitely an option!

For us, we were already used to consuming the non-friendly/technical name from the cordova-plugin-device plugin and were happy to continue doing that. In fact, in our situation the non-friendly name was actually preferable because of reasons.

(We originally used the mixpanel Cordova plugin which captured the non-friendly name for us. We later migrated to the mixpanel JS library which allowed us to also support Web. However, we wanted to retain the same detailed model info and have it be consistent with what the mixpanel Cordova plugin previously recorded in our analytics data, so we used cordova-plugin-device to get the same non-friendly model. When migrating to Capacitor we wanted to drop the Cordova plugin and use a Capacitor plugin.)

Regardless of the form of the more detailed model info, it’d be nice to have the higher fidelity info provided by stock Capacitor. ✌️