Integrating mobile app and mobile web - mobile

Currently I am developing an app in corona sdk. It is still very early in the development stage so I can change the IDE or SDK if needed to achieve my goal.
I wish to create an app that can be played on multiple platforms(mainly ios and android) and I eventually want the users to be able to use the browser to continue playing at home with their progress saved. It is a simple app and could probably be recreated in html. They will have to login their accounts in order to play
How do i go about to achieve this? Should I complete my app in corona first, and then recreate the app in html and php and link the database to it separately or is there a specific development kit I could use that has this ability. Also, I am new to the development scene, how do I detect if the user is logged in a particular platform as I realize if they are logged in, in multiple places and give multiple entries it may cause problems.

If you are new to the development scene then you should continue developing with Corona.
Corona doesn't povide any web port but I know Unity does.
I think first you should complete your game for mobile platforms and if it will have success you can port it to web.
You can read this:
http://www.graphic-buffet.com/2012/06/indie-game-development-where-start/

You might want to try phonegap (http://phonegap.com/). I have never used it, I just know that it exists, so do some research to see if it would be a good fit. This might allow you to create the app once for both browsers and mobile.

Related

Cross platform SDK

I am new to React Native. So here goes my scenario:
We need to create a new SDK that would be embedded into multiple technologies: React Web (JS), React Native APPs, iOS Apps (Swift and Obj-c), and Android Apps (Kotlin and Java). This SDK will offer:
APIs to get access tokens (issued by our corporate authenticator) so that the APP can talk to our API Gateway; something on the lines of getCurrentAccessToken();
Standard screens for login, Change Password, Forgot Password, OTP, etc; The UI should look and feel NATIVE to each target platform that it will be running on (Web, iOS, Android). Transitioning from a Native Screen to SDK's Screen should be smooth.
Be small (package size) and have OK/Hermes performance on both API Calls and Screen loading times (it doesn't need to be as fast as Native, as this SDK will be used once or twice every time the user starts the main APP);
I have checked boden.io (C++) but it would not work on WEB. It might still be an option (having 2 SDKs, one for WEB one for Mobile) so I didn't rule it out yet.
Is such a thing feasible in React Native? If feasible, is it a good idea?
PS: I know I would still need native binds/wrappers for each technology so that the SDK looks NATIVE to the caller, but that would be a minor issue.
Thanks
You can use go lang and gomobile to build the sdk for iOS, Android and Web.

Advantages and disadvantages of PWA only greenfield project?

Our team is starting new project with initial consideration of react-native as a framework to build on top of (Majority of us have been within React ecosystem for a while now).
We are also discussing PWA only based approach since support is coming to Safari soon and Chrome already has good one with a lot of apis available and Desktop PWA's coming soon.
I wanted to ask community about possible complications related to PWA only approach, here are drawbacks we thought of:
1) No presence / discoverability in App / Play stores
2) No access to certain api's like NFC... (but by the looks of https://whatwebcando.today in chrome, we will have access to all we need)
3) Smooth UX will be hard to achieve (although very possible to do 60fps)
4) Users are not too familiar with PWA installation / usage process, might find it alienating
5) A lot of knowledge required to get good caching / networking and performance experience (Most of this we do know from web app development already however)
Some advantages
1) No cuts taken by app stores for in app digital content purchases
2) Truly one codebase for all platforms Mobile and Desktop
3) Lighter in terms of weight on user's device
4) Full control of release process
5) Easy and fast updates
6) Our team will develop higher quality code with tooling they are already familiar with as opposed to learning native bits of react native.
Assuming go live for the project after 7 - 9 months, is PWA a viable way to go forward with?
Like most of us here, we are getting started with PWA as well and had some similar questions. Trying to answer yours with our PWA startup experience.
Spoiler alert : Its is possible to create Production ready, high performing, write once run anywhere apps in PWA today. Learn from people who have done it- Ali express and Twitter. Here is one best article on comparisons of different options that we have today.
Question : 1) No presence / discoverability in App / Play stores
Answer: PWA Apps can be packed as an app(like .apk for Android) and published in app stores. This is possible for all platforms(iOS, Android, UWP). Here is a handy tool to pack (https://www.pwabuilder.com/).
What it does is packs your site(URL) into a hosted web app if supported(UWP) or use Cordova as polyfil by creating a webview and wrap your app(iOS, Android). Hoping Android will soon give option to avoid this polyfil. Until then, we can wrap in Cordova, and still take advantage of PWA features(like service worker-offline caching. iOS supports service worker only from 10.3).
Off-course, putting in app store comes with the cost of app store revenue sharing. Still with the PWA "Add to home option", you can slowly get new user base bypassing app store. One good back door for increased revenue if you are in paid app space.
Question : 2) No access to certain api's like NFC... (but by the looks of https://whatwebcando.today in chrome, we will have access to all we need)
Answer: If you are wrapping your app in cordova (as in above solution- PWA builder), you can use cordova plugins for things that are not supported..say NFC. This closes all hardware access limitations. we can keep replacing with PWA way as the support starts to come in feature. That's essentially what "Progressive" in PWA :)
Question :3) Smooth UX will be hard to achieve (although very possible to do 60fps)
Answer: Yes, you can't beat the FPS of a native app. But with PWA, it doesn't matter for the majority of the app out there(exclude apps like games, heavily animated apps), considering service workers- caching and other PWA features, apps can load fast and smooth enough to not have any frame drops that a human eye can detect. You wouldn't need more than 60fps to achieve that. Here is some good explanation and you can find so many such articles if you google for why 60fps.
If you are targeting any specific hardware in a enterprise environment, you can test the device's FPS here in the latest version of browser that supports PWA (chrome is a good one for now).
Question 4) Users are not too familiar with PWA installation / usage process, might find it alienating.
Answer: As mentioned in the first answer, you can continue to have your PWA site as an app (hosted app) in app stores and extend the PWA benefits to the in a web browser as well. PWA app benefits for the in browser user as well(like offline capability) and the option of asking the user to "Add to Home screen" is an another level of benefit you get with PWA (to increase the user engagement).
Question 5) A lot of knowledge required to get good caching / networking and performance experience (Most of this we do know from web app development already however)
Answer: PWA builder link above also helps you generate "Service worker" which solves your caching with not much complexity. Yes, there will be a lot of best practices out there and things will be keep coming as PWA evolves. You don't have to have everything in place to start with though. You can start with a basic service worker and manifest file to add to home screen/pack it as an app for app store and you can keep adding more PWA stuff on top of it as you progress.
All of the above work is going to give the benefits that you have mentioned and its worth the errfort

How to share App Deep Link vs. Regular link on Facebook accounting for mobile and desktop

I am working on a facebook sharing functionality for a site that is used on both mobile and desktop. We have a deep link we can use to link to the apps and will take the user to the app store if the app is not installed, when on mobile.
This is perfect but in the case that the share is opened on a desktop machine the experience is less than desirable.
Ideally, we would like to find a way for if they share is opened on desktop that the call to action / button goes to the website.
Worst case I would think that we put a redirect to the website when the App Deep Link is clicked on a desktop machine.
Thoughts?
Branch has a free solution for this. Their links are smart enough to direct desktop users to the website and mobile users to the store if that's what you want to do. They also have an SDK for routing and attribution.

Locomotive CMS Detect and Display Views for Mobile

I have a LocomotiveCMS site up and running on Heroku. I can edit my templates locally and push using Wagon. It works great!
However, I'd like to be able to serve a separate set of views for mobile devices (phones really) vs desktop/tablet. Can it be done easily? Will it require large modifications to the engine?
EDIT: I should add that I have done this before for a basic Rails app with no issues. I know how to detect a mobile device by examining the user agent and creating a separate folder (such as views_mobile) to store the mobile views. Would like to be able to do the same for LocomotiveCMS
That's a tough question. For the next version of LocomotiveCMS (v3), we'll use a full stack of middleware so that it will be easy to add your own custom behaviors.
But, for the current version of the engine, it's not that easy. However, I'm thinking about something. Perhaps you could create a Route constraint for the mobile detection (http://guides.rubyonrails.org/routing.html#advanced-constraints).
Then, you would modify your routes.rb by adding this:
match '*path' => 'locomotive/public/pages#show', page_path: 'mobile-index', constraint: MobileContraint.new
Never tested so it might not work :-) Happy patching!
Didier

Prompt user to install/view app on mobile site

Does there exist some kind of plugin or lightweight method of determining whether
A. A user is using a mobile device
B. The user has a particular app
C. The user does not have a particular app.
And depending on what criteria the user satisfies, display a prompt (modal, overlay, pop-up) that allows the user to view the app (if installed) or to install it (if they do not have it installed).
I realize "A" can be achieved by using media queries but I am not sure how to configure the others.
I've seen this done on many many sites so I know that it is not uncommon (view screenshot). Ideally I just want to implement some quick solution. I'm looking for something similar to "Hello Bar" for mobile only, I suppose.
Any help will be appreciated.
Example: http://i.imgur.com/VkWKu.png (the prompt at the top of the browser)
I ended up finding this:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
Which is exactly what I was looking for and will work in tandem with the other solutions.
I would try this approach if you really need to know if a user has your app installed.
When your app is installed and first run have it create a cookie. The only thing you have to remember to use is the CookieSyncManager because the set Cookies are stored in RAM and not storage, CookieSyncManager will sync these two.
CookieSyncManager.createInstance(context)
CookieSyncManager.getInstance().sync()
Once you've set the cookie you can then read the Cookie with the website, if its there show popup etc. Oh and only show this popup only if its a mobile device: http://www.quirksmode.org/js/detect.html
Android Developer On CookieSyncManager: http://developer.android.com/reference/android/webkit/CookieSyncManager.html
Bolg Post Explaining the Usage of the CookieSyncManager:
http://blog.tacticalnuclearstrike.com/2010/05/using-cookiesyncmanager/
I know how to do this with android not iOS or Windows...
There's no standard way to do this.
See the end of this post: http://blogs.msdn.com/b/ieinternals/archive/2011/07/14/url-protocols-application-protocols-and-asynchronous-pluggable-protocols-oh-my.aspx for one mechanism available to JavaScript in IE10.
IE10's Metro environment offers this: http://blogs.msdn.com/b/ie/archive/2011/10/20/connect-your-web-site-to-your-windows-8-app.aspx but I don't think that exists for the mobile browser.

Resources