I have a fully developed web app from meteor and I am trying to get it to run on an android device. I am working on windows and using a android device. Whenever I run the meteor run android-device call it just launches a white screen on the phone. I get this and others similar when I run it I20190708-10:19:15.780(-5)? W/MeteorWebApp(13593): I am not sure what call I am missing to get the web app to run on mobile. Any ideas?
More than likely you have an error which causes rendering to fail. There’s a very good chance the console will tell you the error if you inspect the webview with chrome devtools.
It will load in the web browser but not in the mobile app. It only fails when I try to run it on android. Any ideas?
Unless you have a really amazing reason to build it as a cordova app - dont. Make your app into a progressive web app and prompt the user to add it to their home screen. Meteor’s cordova support is patchy at best for all but the simplest of apps. Particularly when dealing with updates to cordova, and required updates to Android’s and IOS’s minimum versions. The meteor mobile documentation is also out of date, making it extremely difficult to implement.
3 Likes
I need to make a mobile app from the website built in meteor. Do you have any suggestions on where to find not out of date information. Or do you have any information on how to do what you suggest?
I guess my question is why? Do you need to access the core functionality of the device which you can’t from a web API? A good place to start is looking at the PWA specification
Check the logs …you can use chrome or adb logs to debug - or if you want better visuals Android Studio. Even if the documentation is patchy it has good information about debugging – Document is meant to be pointer and can get out of date quickly. You can also do google. I personally do not use windows to build the mobile app for my meteor project. On Mac and Ubuntu, it works seamlessly once configured well.
The necessity is irrelevant. They would like to create a Cordova app and not a PWA. Suggesting that they use something completely different isn’t helpful and detracts from their original question.
2 Likes
I disagree - if someone hasn’t considered the use of PWA, pointing them to that is useful. For example, building a cordova app is a means, not an end - there are often other ways to achieve that end. If someone asked how to do something with multiple independent mongo queries, and I pointed them to mongo aggregate - that would be entirely relevant, despite not being mentioned in the original question.
What detracts from the original question is starting a debate about the validity of a comment. Did you have any input on building for cordova? Because, while meteor is amazing at many things, I have not found building for cordova to be one of them - I’ve just spent 3 days trying to get a build out of our app, because Android and IOS recently updated their required minimum SDK versions to things which meteor does not support. This is what drove me to my suggestion of avoiding meteor + cordova and instead use pure cordova, or meteor + PWA.
My question of “why” directly related to the OPs question of:
I can’t answer that without knowing what the purpose is, offline support, push notifications, cleaner UI, native functionality will require different answers
I need a mobile app that someone could like download from the app store. I need it work offline and many show a bunch of different graphs on a phone screen nicely which the website on the phone is not doing right now.
If you need it to be downloadable from the app store, then you will need to build it as a cordova app unfortunately, but simply doing this will not enable full offline support - this is a fairly large challenge, I posted here (as did others) with a skeleton of my current solution, Solution for Offline data auto sync in Meteor app. Similarly, you can attain full offline support for MOST scenarios, without cordova, even on iOS now they’ve enabled limited use of service workers.
Regarding the graphs on a phone screen, this is also probably nothing to do with cordova, do you have something similar to this in your <head>?
<meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Yes something similar to that.
can you screenshot an example of what you mean:
I believe that I may have replied incorrectly. I don’t need an app with offline features I just need an app that makes the website look nice on a phone is easier to manage on a phone than through the web browser.
Ok, can you send a screenshot of the UI problem, building it for Cordova probably won’t fix that, you’ll still have to change your css/html
So I have figured out how to word what I want. I want to take my fully developed website and make it into a mobile app. So something similar to Instagram where it has a website and a mobile app. Any thoughts on how I can do this?
I have quite some experience with Meteor based mobile apps (my first published one was guzz.io), and I have to agree with @znewsham: the mobile part of Meteor is quite neglected. Be prepared to encounter a lot of pitfalls, especially when Cordova versions change.
That being said: it is doable, and I still use this feature a lot and successfully, especially in hackathon projects. I’ve done quite a lot of these, and am also a mentor for kids’ hackathons. The kids are always blown-away once we just “convert” their web page into a full-blown app.
The first thing you should learn is the debugging tools you need for this. On Android, you can debug the mobile app using the desktop Chrome browser. To do this, you roughly have to follow these steps:
- Put your device into developer mode
-
Enable USB debugging in the developer settings on the device
-
Install the Android developer tools (Android Studio)
-
Make sure the developer tools can access your device (execute
adb deviceson the console) -
Open Google Chrome and navigate to chrome://inspect
Your Android device should show up as a remote target. If you click on it, you can debug the Android web view inside the Meteor app on your phone exactly as you would debug a web page opened locally in Chrome.
Safari on macOS offers a similar debugger for iOS apps. It can be found in the “Developer” menu of the browser. IIRC, you need to enable developer mode for the device first, which can be done by connecting it to Xcode.
(One thing to mention: You said you want to turn your “website” into a mobile app. If you really meant “website” (instead of web app), be aware that Apple will most likely reject these types of apps when you try to get them into the app store. They even explicitly state in their selection criteria that they don’t want to have “websites that have been converted into apps”. If you meant a web app with mobile-app-like functionality, this is a different story, of course.)
5 Likes
Just to emphasize the point that @waldgeist made, I would be sure that you can justify getting your app into the stores.
Apple can be especially difficult to convince if you don’t have any native-specific needs that are addressed by your mobile app. Because things like “add to home screen” for PWAs are gaining traction, it’s harder to convince stores that your website wrapped as a native app is worth carrying.
If it’s really something you think you need to pursue, I’d encourage you to think outside the box when it comes to native and find some value adds that rely on native features.