diyDevApp - alternative to DevApp - add custom plugins


#1

Hi

this is a second try to make a boilerplate for devs to have their own controlled and inspectable DevApp.

Features:

  • discovery using UDP
  • add hosts manually
  • store recently used hosts
  • use Chrome inspector tools to see console logs
  • tested on Android

I haven’t tested this against many cordova plugins, but it should work better compared to my earlier try out as I am using a cordova injection plugin. Also, I haven’t tested it on iOS.

So, if there is someone who wants to give it a try? @jaydz @Sujan12 @TaeKwonJoe?

And apologies if it fails :slight_smile:

Tom


Check if App is Using DevAPP
Ionic DevApp Feedback Mega-thread
altDevApp - experimental customisable alternative to Ionic DevApp
Ionic DevApp Feedback Mega-thread
#2

I’ll definitely give it a try over the next couple days. Will report back with results!

Congratulations on your progress by the way. I like to think I’m pretty good at this stuff and can combineLatest + switchMap like a champ, but what you’re doing is WAY over my head


#3

@Tommertom I’ll have some iOS results early this next week. Anxious to check it out!


#4

Thx all

Btw, I am working on a Demo Client App to demonstrate it works. And indeed it does!!

You don’t even need to add the cordova plugins in the client to use them in DevApp! But that is beside the point.

Many plugins incorporated and they function well.

I will publish the DevAppClient on firebase hosting to demonstrate it can use remote hosts as well, even though that is extremely unsecure thing to do!

Regads

Tom


#5

Tried to add Capacitor support but unfortunately this doesnt fly yet (injection of cordova and capacitor-bridge does not fire)…


#6

@Tommertom sorry about the delay in testing this, but I can confirm it does work on my IPhone 7 running iOS 11.2.7! I deployed it with Ionic Pro Package and it works wonderfully with livereload capabilities while running ionic serve. I’ll be adding some plugins and submitting a PR with README.MD updates including instructions for iOS Remote Debugging setup.

You are my hero.
If you’re ever in the Las Vegas area holler at me so I can buy you a drink or lunch sometime.


#7

Great!

thanks for testing.

Las Vegas… I’ll go when I feel lucky :wink: but thanks

Tom


#8

Can all this be done as a cordova plugin instead of being an ‘app’? So that it can be easily added during development builds, and removed for beta/release builds.

Without having to maintain a separate cordova project that will need to be updated everytime config.xml for one of the live projects changes - new plugins, or preferences, or different app IDs, etc…

Instead of your current ionic app UI for maintaining servers, the plugin can add a native input-alert popup when app is first launched. User can type in the IP or URL for their live-reload server or built www folder on any server. And the plugin loads that in the cordova webview.

For future launches, plugin can remember the URL used last time and developer can just press OK on that popup, or modify the URL if their computer’s local IP has changed, or if a different developer is now using that device etc.

The app will need to be ‘updated’ on test devices only when native code, or plugins change. Otherwise just launch on the test device, update the load URL (if it has changed).

And we can then remove this plugin from the app when its time for release, or even for beta builds etc…


#9

I would be inclined to say yes. Except that I don’t have the skills and appetite to code it (android/xcode). Indeed a natively built UI which uses the injection plugin code and assure the whitelisting works so the webview is allowed to cross origin borders.

Then again, as a second thought, this still does require you to do a build and install of ipa/apk. Especially if you decide to add cordova plugins along the way.

Unless you build a cordova plugin that replaces native code contained in itself. Not sure if that is possible.

The code I gave basically gives you an (almost) empty webapp wrapped in native features allowing you to incrementally update the web along the way. In its own can be usefull I’d say.

So, this will require consideration by native coders more then me.

Thanks


#10

@Tommertom on iOS, plugins that are needed by the injected app are not available even though I added them to package.json and config.xml of diyDevApp:

Native: tried calling Keychain.getJson, but the Keychain plugin is not installed.
Install the Keychain plugin: 'ionic cordova plugin add cordova-plugin-ios-keychain'
Native: tried calling Globalization.getLocaleName, but the Globalization plugin is not installed.
Install the Globalization plugin: 'ionic cordova plugin add cordova-plugin-globalization'

These are indeed installed in the diyDevApp build:
<plugin name="cordova-plugin-globalization" spec="1.11.0" />
<plugin name="cordova-plugin-ios-keychain" spec="3.0.1" />
<plugin name="cordova-plugin-touch-id" spec="3.3.1"> <variable name="FACEID_USAGE_DESCRIPTION" value="Scan your face to login" /> </plugin>

Were you able to get Vibration and the other plugin APIs to work when calling them from an injected app?


#11

Hi

If you have correctly inserted the plugins in diyDevApp - like you mentioned in config.xml - then it should work also in any of the injected apps. If that does not work in the injected app, I suggest trying the plugin in diyDevApp by adding a page or a button to its home page to trigger the plugin. If that does not work either, then there may be an issue with the plugin or a combination of the plugins. Not necessarily the injection stuff that should ensure availability of plugins.

I am not able to test iOS only plugins as I don’t have xcode/mac. But I will look into these plugins, potentially via ionic view?

The injected app strictly spoken does not need proper config in config.xml, btw.

I have tested diyDevApp with diyDevAppClient (https://github.com/Tommertom/diyDevAppClient) with a number of plugins and it works: camera, brightness, battery status, flashlight, vibration, network, device, clipboard (although plugin broken now), contacts, keyboard, social share, printer, screenshot, motion, orientation…

Regards

Tom