Chrome for Android - add web app to home screen - android

I'm trying to implement an 'add to homescreen' banner using Google Chrome's native banner support, with this demo as reference.
https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html
According to the spec there, the requirements are:
the page uses a service worker (yep, see below)
the site is using HTTPS (yep, the site has a valid SSL certificate and I am loading over HTTPS. chrome shows the site as secure and has a green padlock, no errors or warnings in the certificate)
the app has a manifest declared (yep, see below)
the manifest has a short_name, 144 pixel icon and a type of 'image/png' (yep, see below)
The manifest I am using is below.
{
"name": "Web app test",
"short_name": "Test",
"icons": [
{
"src": "/resources/launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"display": "standalone"
}
Which contains a short_name and a 144 pixel icon of type image/png.
The service worker I am using is a direct copy & paste of this code:
https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js
which was recommended in this article:
https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en
The service worker has been registered, the manifest is being loaded into the page and the image url is correct, but the banner is not showing.
I also have the chrome://flags/#bypass-app-banner-engagement-checks enabled so this isn't a case of me needing to come back tomorrow and check that it works. I have been able to view homescreen banners on all of Chrome's demos that I have checked (which is where I took most of this code from) and my phone has the latest version of Chrome installed.
Is there anything else I am missing that could be blocking the homescreen banner from appearing?
Thanks.

A couple of things to check:
Ensure you have a start_url in your manifest that defines the page to launch.
Ensure that you have a <link rel=manifest> in your page
Ensure the image URL's all resolve correctly based on the manifest location
Preferably have a 192px icon, 144 is the minimum
Mounir Lamouri has created a manifest validator that you can use to check your manifest is correct.
You should also enable chrome://flags/#bypass-app-banner-engagement-checks if you are using Chrome so that you get a quicker warning or visibility of any issues. Finally you can look in the Dev Tools console on any page load and an error will be shown indicating why the banner wasn't shown.
There is also a lot of guidance on developers.google.com
Using App Install Banners
Create a manifest file including a short_name, icons and launch_url
Link to the manifest file from the page
Web App Install Banner
Optionally include extra information such as the background_color and theme_color.
Listening to events on App Install banner
Learn when Chrome thinks it can prompt for install and then offer the ability to defer it until a more appropriate time.
Understand if the user has accepted or rejected the prompt by looking at the response in the onbeforeinstallprompt event.

In general I'd recommend pasting your manifest into this to ensure it doesn't have any errors: http://mounirlamouri.github.io/manifest-validator/
If using Chrome with chrome://flags/#bypass-app-banner-engagement-checks enabled, you can look in the console on any page load and an error will be shown indicating why the banner wasn't shown.

Related

How to configure web app fallback for instant app

I'm having an android app that is having an instant app version. My instant app can be launched & run without installation from deep link. This is how my deep domain assetlinks.json looks like:
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.<app name>",
"sha256_cert_fingerprints":
["<app fingerprint>"]
}
}]
It is working fine, but what I want to achieve is to have "fallback" web application when user would have disabled instant apps or have older device. I've tried to host react.js web application on this domain with assetlinks.json file in public folder(to make it available) and it was not working at all, android phone treated this domain as usual website and instant app was not launching like on previous configuration. Same thing goes for hosting empty index.html file. It is also breaking instant app invocation process. Any ideas this this can be configured ?
this is how instant app invocation screen looks like
Alright, I've managed to find a solution, it is pretty easy one. My deep links most of the time have data passed as path such as /type/value. The solution is to create clear index.html file with javascript attached like this:
<script>
window.location.href = '<FALLBACK WEB APP URL>' +
window.location.pathname;
</script>
This code extracts path from the deep link and adds it to web app link. Next, index.html needs to be served for every folder of deep domain, but domain needs to also allow to read assetlinks.json file if needed. This solution work pretty well with instant apps - it is not breaking invocation process, and is is also compatible with iOS AppClips.

Question about mobile app scheme deep linking

I have the Medium app install on my iPhone.
When doing a search on Google Chrome app, when I clicks on a medium.com link in the search results, it open my Medium app.
How can this happen? How can Google Chrome can interpret https://medium.com to medium://?
So the feature in particular you are referring to is Universal Links and requires both server side and client side modifications.
On the server side / website you need to add an AASA (Apple App Site Association) file. This file is simply a JSON file that contains the specific applinks urls for the corresponding app identifier. A sample is shown below.
{
"applinks": {
"apps": [],
"details": [{
"appID": "ABCDEBBQ.com.medium.ios",
"paths": ["*"]
}]
}
}
If you note the paths key in the JSON above you will see that there is a star or wildcard symbol. This simply means open any URL on my websites’ domain. For example www.medium.com/topposts will open in the medium iOS app. It should be noted that you can explicitly define your paths to either include or exclude.
On the client side (Xcode) you’ve gotta setup the associated domains capability inside of your application and specify the applinks service for your domain in this case www.medium.com
Lastly you’ve gotta add the capability to your application identifier inside of the developer portal.
After all of this configuration is completed you should now have a ‘link’ between your website and application.
Apple handles all of this logic internally in iOS and since it’s closed source I cannot give you the exact implementation details but the just of it is that when you visit the domain (medium.com) on your iOS device it downloads the AASA file from the webserver (the AASA file must be hosted on a secure server and can only be downloaded over HTTPS) and the operating system then checks whether there is a corresponding application on the device that matches the appId specified in the AASA file. If both the paths and appIds match it then launches the medium iOS application on the phone.
That’s how it works. I hope that I’ve articulated it well enough.

Get Google Play Store Apps HTML Dynamic Badge

Suppose I want to write some article on a web-site and publish a link to the discussed Android application (which is available on Google Play).
Is there a standard way to create "badge" for this application, which shows app's name, icon, descriptions, rating, download/install count? Something like this:
or this:
or this:
I found Google Play Badge Generator, but this "Badge Generator" does not do anything special, it is just a dummy static image. Other than that I could not find anything.
I don't think there's an official way to do this (as you have already mentioned the Badge Generator). Anyway you can use one of the many Play Store API wrapper on github to extract the desidered information and build your own fancy badge.
E.g.:
PHP+Curl: https://github.com/thetutlage/Google-Play-Store-API#itemInfo
JS: https://github.com/basiclines/GooglePlay-JSAPI
This one generates simple and clear output like this: http://googleplay-jsapi.herokuapp.com/app/com.meetsapp
many more in various languages..
There´s a fully embedable html widget http://playboard.me/android/widgets/apps you can use out of the box.
You can customize look and feel as they´ve got class per item so you can hide or remove things with css or javascript. Even the "widget by..." has a class pb-wd-footeryou can set to be hidden and leave the widget clean.
You can try this.
https://github.com/facundoolano/google-play-scraper
{
appId: "com.dxco.pandavszombies",
title: "Panda vs Zombie: Elvis rage",
url: "https://play.google.com/store/apps/details?id=com.dxco.pandavszombies&hl=en",
icon: "https://lh6.ggpht.com/5mI27oolnooL__S3ns9qAf_6TsFNExMtUAwTKz6prWCxEmVkmZZZwe3lI-ZLbMawEJh3=w300",
minInstalls: 10000,
maxInstalls: 50000,
score: 4.9,
reviews: 2312,
description: "Everyone in town has gone zombie.",
descriptionHTML: "Everyone in town has gone <b>zombie</b>.",
developer: "DxCo Games",
genre: "Action",
price: "0",
free: true
}
Fetch data using ajax jsonp and create html UI to include in your page. Hope you should be good to go.
I wanted almost the same thing for my project's GitHub page. I wanted the different versions my app has on F-Droid, GitHub release and on Playstore.
I found a cool badge generator http://shields.io/ that can also get data from an endpoint.
I forked google-play-scraper and added the shields.io endpoint requirements. See my
heroku branch for the changes needed.
It's free and a mouse click away to deploy to https://heroku.com from GitHub. After the deploy I have my badge.
Here is how it looks (static image)
You can also check out the google-play-api repo, it's also using google-play-scraper and the RESTful API is already implemented. You would only need to set up how you want to show the information.

Android Play Store market:// link is no longer working?

I've been redirecting my users for the past year from my domain:
http://example.com/get
to: market://details?id=com.example.myapp
Today I've check this on Nexus 5/LG G3/OnePlus One from the chrome browser app and it stopped working!
Now, when my users try to download the app they are redirected to a broken link.
Anyone know anything about this change in the Chrome app in Android?
from reading the chrome's version 40 release, there are some insight i d like to share
http://blog.chromium.org/2014/12/chrome-40-beta-powerful-offline-and.html
they updated to Content Security Policy Level 2, which has a stronger control over redirects.
https://w3c.github.io/webappsec/specs/content-security-policy/#changes-from-level-1
The path component of a source expression is now ignored if the resource being loaded is the result of a redirect, as described in §4.2.2.3 Paths and Redirects.
Redirects are blocked by default, and explicitly allowed with a new unsafe-redirect expression.
So I did some testing. if your initial action started from redirect (no matter window.location or http 302) it will show an error. but once i created a hyperlink to market:// and explicitly clicked it, it worked fine.
for now i ended up creating a webpage in between, where i ask the user to click the link to proceed.
I was testing this url on different devices with different OS/Play Store/ Play Services/ Browsers. looks like it's related to browser but not OS or Play Services.
Initially I updated Play Services and Google Play Store and my old Chrome (v18) was opening market://details?id= url fine.
Afterward I had updated my Chrome (v18) to version 40. And it's not working any more.
Meanwhile, FireFox and default "Browsers" still opens this url and redirects to Google Play Store app.
P.S. I have registered issue in Chromium bug tracker. Let's see if there will be any response:
https://code.google.com/p/chromium/issues/detail?can=2&q=market&colspec=ID%20Pri%20M%20Week%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&id=454396&thanks=454396&ts=1422888121
UPDATE [6.05.15] : Unfortunately, they decided not to fix this issue, saying, that it's planned behaviour. As they said, user should click the link by himself. Only then re-direct to the app on devices is allowed.
So, there is only one "work-around", that I see for now: create a page, that contains text like "Click link below to go to the app", followed by link like:
Load Example App
or
<a href="intent://foo.bar#Intent;scheme=blabla;package=com.example.myapp;end" > Load App/ Activate your Profile </a>
Try the link below, replacing your.app.id with your own identifier:
https://play.app.goo.gl/?link=https://play.google.com/store/apps/details?id=your.app.id&ddl=1&pcampaignid=web_ddl_1

Given URL is not allowed by the Application configuration while login using facebook Jquery mobile [duplicate]

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
I have researched the most popular questions on SO already (Question 1, Question 2, Question 3, Question 4, and Question 5)... None of them help with my situation.
I have the application settings laid out like this...
App Domains: azeverything.com
Sandbox Mode: Disabled
Website with Facebook Login
Site URL: http://azeverything.com
****App Domains*** requires that no protocol be identified and Site URL requires that a protocol be identified.*
I have tried using www.azeverything.com and that didn't work either. Everything seems to match up. By the way, this is a WP site. I'm not developing locally either. It's all live.
Try to check at Settings > Advanced. At Valid OAuth redirect URIs, make sure you have a correct domain.
Hope it works.
You need to add the URL to your app:
Go to the app, you want for user login, on the Facebook Developers page
Click on the settings tab
Click add platform
Select Website
After selection it will ask for some details such as URL for your website which uses login with facebook feature, fill the form and submit it
That's all and you are done. Make sure that the app's URL is the same from where you're logging in.
Under Basic settings:
Add the platform - Mine was web.
Supply the site URL - mind the http or https.
You can also supply the mobile site URL if you have any - remember to mind the http or https here as well.
Save the changes.
Then hit the advanced tab and scroll down to locate Valid OAuth redirect URIs its right below Client Token.
Supply the redirection URL - The URL to redirect to after the login.
Save the changes.
Then get back to your website or web page and refresh.
This is a basic breakdown for slow people like me, and I didn't see this mentioned before.
The "redirect uri" isn't the place where you're redirecting to, but where it's coming from.
Say you have your app at http://myFBapp.com listening to /auth/facebook, and after they log in, redirecting them to /UserLoginHooray. The "Valid OAuth redirect URIs" should read http://myFBapp.com/auth/facebook, not http://myFBapp/UserLoginHooray.
Explanation:
HTTP Requests that have been redirected (302) include the original address in the header, so Facebook is merely putting a very basic layer of security on the request.
I chased my tail on this issue for hours. My coder and I could login with FB without a problem but my wife couldn't. She would get this topic's subject message. I tried every setting and URL that I could think of for my Lavarel app.
My issue was that my wife was signing in from:
http://www and we were using http://
A short trip to CPanel and a redirect fixed that. Hope this helps someone!
For Lavarel these FB app settings worked for me:
Settings/Basic - App Domain: mydomain.com , Site URL: http://mydomain.com/login.
Settings/Advanced - Client OAuth Login: Yes.
Settings/Advanced - OAuth redirect URIs: http://mydomain.com , http://mydomain.com/login.
App Details/App Center listed platforms = No. I'm only using the login for now.
I have a website with facebook login.
It has been stable and working for months.
No code change has happened for weeks.
Then, suddenly, the facebook login gives an error message:
Error
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
After debugging "for awhile", I reset my facebook app secret and it started to work again!
Michael Blackburn's answer helped me resolve my issue, but I want to give more detail on my fix.
I have a php app that posts to a user's FB page.
I own two domains:
http://app.my-web-app.com
http://app.mywebapp.com (no hyphen)
I built my site off the first domain because it read better IMHO (at least it did at the time).
Some users typoed the url so I bought the second one with no dashes for that reason.
So, one of my users was having the "Given URL" error.
Turns out he was going to http://app.mywebapp.com and the rest of them were going to http://app.my-web-app.com
I fixed everyone by adding all possible redirect URIs:
Granted, there are 100 better ways to implement this, but here is the workaround for now.
1.Make Sure Website Url and platform added, if not then visit https://developers.facebook.com/quickstarts/ then Select
Platform -> Setup SDK -> Website Url And so on..
Note: website url can't be like this : https://www.example.com just remove www and make it simple and working ;)
2.Goto App Dashboard -> Setting -> Click on Advanced Tab then go to bottom of the page and enable Embedded Browser OAuth Login
and leave Valid OAuth redirect URIs blank and Save it
I found Valid OAuth Redirect URIs under PRODUCTS then Facebook Login > Settings not as everyone is stating above. I am supposing this is a version issue.
It still didn't work for me. I guess I really have to add Android Platform rather than just the Website. This is annoying because my app is still in development mode :(
UPDATE: I'm using Expo to develop my react-native app and used info provided here: https://developers.facebook.com/apps/131491964294190/settings/basic/ to set up the Android and iOS platforms. This resolved the issue for me.
Sometimes this error occurs for old javascript sdk. If you save locally javascript file. Update it. I prefer to load it form the facebook server all the time.
Go to facebook developer dashboard
Select settings -> select WEB(for website) -> Add platform
Add your site URL.
This should resolve your issue.
So... facebook distinguishes pretty harshly between http and https in your app. This is just another small thing to check if you run into trouble.
I solved this issue by specifying correct site URL in my App Settings.
It works fine now. You have to specify your website Url such as http://www.xyz.com/
Under advanced tab make sure "Valid OAuth redirect URIs" contains valid URI or leave it empty(not recommended)
"http://example.com/"
instead of
"http://www.example.com"
sometimes you need to check your code (the part of redirect)
$helper = new FacebookRedirectLoginHelper('https://apps.facebook.com/xxx');
$auth_url = $helper->getLoginUrl(array('email', 'publish_actions'));
echo "<script>window.top.location.href='".$auth_url."'</script>";
if any changes happens there (for example, the name of your application "https://apps.facebook.com/xxx" in relation the application settings in facebook, you will get the above error
For Android Developers,
Make sure you have enabled Facebook Login inside the Products list inside Dashboard of your Facebook project app and have added all the required details as you go through the whole flow.
The login should work without giving the same error.

Categories

Resources