Prompt user to install/view app on mobile site - mobile

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.

Related

What is the best option to create share button? (react)

I saw a lot of option in order to create share interaction with users:
Web share API: https://www.w3.org/TR/web-share/#sharedata-dictionary
It seems compatible with Progressive-Web-App, but it's not well supported by firefox (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#browser_compatibility)
Simple Sharer: https://reactjsexample.com/a-javascript-framework-to-share-url-to-social-media-sites-like-facebook-twitter-reddit-whastapp/
If I understood well, it doesn't work for mobile, am I right?
react-share: https://reactjsexample.com/social-media-share-buttons-and-share-counts-for-react/
Seems to work on every browser, but I don't know if it's PWA-friendly. Seems to be the best option, but I'm not sure... The last update was 1 year ago (https://www.npmjs.com/package/react-share) so maybe it will not be maintained through times...
What do you use for your app? What do you recommand?
Do you know better alternatives?
My need for the App is to share URL through social media or mail/text or ??? etc. No file in theory. And I'd like to have adapted preview on social media when the user share something.
I have used react-share personally and it was unable to open some of the apps in mobile like whatsapp, etc.
The workaround is deep-links.
if user is using a smartphone or a tablet (we can easily get this using navigator.userAgent) then you can use the app based deep-links otherwise the traditional way in which you can redirect user to a new web page.
Some of the examples:
Whatsapp: https://faq.whatsapp.com/563219570998715/?locale=en_US
Instagram: Answer is already given here
NOTE: deep-link works if the user has installed the application on desktop as well (never tried for macOS but for windows and ubuntu it works)
After edit:
You can use emailto: in href while writing <a .../>.
example:
Share this link
For more reference about mailto please visit this MDN doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href

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

Integrating mobile app and mobile web

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.

Setting up a multilingual wordpress site

I am trying to set up a multilingual site using wordpress. I went through http://codex.wordpress.org/Multilingual_WordPress#Plugins_that_direct_you_to_external_translation_services and decided to use this option Plugins like Multisite Language Switcher and the newcomer Multilingual Press link together separate WordPress network (multisite) installations for each language by pinging back and forth..
Now i installed the Multilingual press and set up a network. The url of my site was wordpress.private.net and next on is it.wordpress.private.net. Both the domains are served from same folder. But still when i visit the it.__ site it shows in english language and that too without all the posts.
I get this error on network dashboard
You didn't setup any blog relationships! You have to setup them first to use Multilingual Press. For this, go to Network » Sites » and choose a blog to edit. Then go to the tab "Multilingiual Press" and set up the relationships.
But there is no option to set up the relationships in the tab "Multilingiual Press. Please guide me where am i going wrong?
Any other way to set up is also welcome.
My main moto is to run my wordpress site in two languages
I'm also developing a website in two languages.
I haven't used what you are using, so I cannot help you in that regard.
For my project I installed qTranslate plugin and I haven't had any problems with it so far.
In the plugin settings you specify language you want to use and other settings like how the language will appear in URL (?lang=en , /en/ in front of URL , http://en.yoursite.com)
When you edit post or page, you will have additional tab in the editor, one for each language, so it is really easy to use it.
It also supports qTranslate Services, that ables you to use professional human translation services with a few clicks, but I haven't used that yet.
A general note:
Do NOT auto translate your pages with Google Translate. This is basically spamming the google index.
If you want to autotranslate your page, use the google translate widget.
You can read that somewhere in the google guidelines too.
About your plugins:
qTranslate is fine and simple. But it does store all translations into one post. So if you later decide to change to a different plugin, you are toast.
I've heard about Multilingual, but I think it might still be a bit unstable.
The most commonly used is WPML. Might not be the best and it's not free. But it works and I have many clients that use it happily.
But again, DON'T auto translate your page. It's useless and will get you down ranked.

Facebook and share buttons on a mobile-enabled website that open the mobile app instead of a browser window?

One of the big flaws in Android webphones (and probably other Operating Systems for phones): You are surfing some website, and want to use the site's embedded share button for say Twitter. You want to use the embedded Twitter share because it pre-populates the tweet based on how the site designed it: namely, it has the title of the page and the link and maybe a relevant Twitter hashtag. If you were to use your mobile browser's share feature, you only get the link, and have to attempt to type in the title and guess relevant hashtags--not ideal. The same is the case with other social media shares, like facebook.
So, from the above, you understand why users would prefer to use a given website's own embedded share features, rather than that built into the mobile browser.
However, if a user clicks the site's embedded social media share button, it opens a new browser window for that social media. Ideally, this would not happen, as typical users do not log into these social tools using the mobile browser, and the resulting pop-up share is clunky to use on a small mobile screen. Instead, ideally, you would click on the site's embedded share button and it would attempt to open at least the official twitter (or whatever) app on your phone instead. This is ideal because users tend to use the apps to use their social media, and so would already be logged in. Moreover, such an app is obviously optimized for mobile use, and thus not as clunky.
And yet, this apparently does not exist... am I right?
That is, as a web designer, there is nothing I can do on my embedded Twitter and Facebook share buttons to prompt mobile phone users to use the official app to share (rather than through the mobile browser). Is that right?
Thanks,
Derek
At least on my iPhone the twitter url-scheme does work.
the following opens the twitter app:
twitter://post?message=hello%20world
And facebook is fb://
Haven't tested it on android.
(via: http://wiki.akosma.com/IPhone_URL_Schemes )
What about open a pop up box (not window)- when we click a link to share the URL site/page we are in, without have to go through the mobile browser ?
just a pop up box.
do you think it is possible? or any social media link would automatically opened in a browser?

Resources