All the meta information have been added according to the doc's given in chrome-developers site.
But the Add to homescreen is not working on chrome mobile browser -- The ICON given is not getting saved on the phone. The app's icon is taking some random screenshot of the page.
The site that I'm working on - here
Here's the code -->
// for chrome
<meta content="yes" name="mobile-web-app-capable" />
<link href="/images/inkl-196.png" rel="shortcut icon" sizes="196x196" />
<link href="/images/inkl-128.png" rel="shortcut icon" sizes="128x128" />
// for safari
<link href="/images/touch-icon-iphone-default.png" rel="apple-touch-icon" />
<link href="/images/touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76" />
<link href="/images/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120" />
<link href="/images/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152" />
Please comments on where I might have gone wrong.
Not sure why, tried other solutions online - dint help.
Firstly, we had an issue with our docs where we recommended 196px and in fact it should have been 192px - this might explain the issue.
Secondly, now (Dec 2015) the recommended solution is to use the web app manifest. The Web App manifest describes what the browser should launch and how it should launch it from the homescreen. You will need to create a manifest file (see below) and link to it from your pages with <link rel="manifest" href="{url to your manifest}"> in the head of your html page.
Example (launches the index page fullscreen):
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}
Related
I'm trying to add google analytics in a chrome extension and I'm not succeeding.
Most of the guides are for the v2 manifest and the extension I'm working on is v3.
I've already tried copying and pasting the scripts that analytics recommends to me.
I've tried to put the CSP in the manifest but it crashes when using the url in the script-src, I get an unsafe url error.
https://i.stack.imgur.com/NDvi5.png
I've tried copying the entire gtag.js code into a fullScript.js file and calling it through the analytics.js file but it didn't work either.
https://i.stack.imgur.com/ZrlOY.png
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script',chrome.runtime.getURL('fullScript.js'),'ga');
ga('create', 'G-XXXXXXXX', 'auto');
ga('send', 'pageview');
I've already tried using tb button click event script which tb didn't have any reaction.
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
I tried to load the scripts from both the manifest and the popup.html and none of them worked:
popup.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TESTE</title>
<script src='analytics.js'></script>
</head>
<body>
<h1>TESTE</h1>
<button id="my-button">TESTE</button>
</body>
</html>
Manifest V3:
{
"manifest_version": 3,
"name": "Hello World",
"description": "Teste",
"version": "1.0",
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["/analytics.js"]
}
],
"web_accessible_resources": [
{
"resources": ["analytics.js"],
"matches": ["<all_urls>"]
},
{
"resources": ["fullScript.js"],
"matches": ["<all_urls>"]
}
],
"content_security_policy": {
"extension_pages": "script-src 'self' https://www.googletagmanager.com/gtag/js; object-src 'self'; script-src-elem 'self'"
},
"permissions":["tabs", "scripting"]
}
I built a simple chrome extension. It loaded correctly before, but now Chrome can't open it. I may have misnamed a file.
html:
<!DOCTYPE html>
<html>
<head>
<title>Kalki </title>
</head>
<body>
<!-- LINK THROUGH TO THE CODEPEN SITE -->
<iframe src="https://codepen.io/Teeke/live/yLezNrE" width="1000" height="1000" frameborder="0" id="frame1" name="frame1"></iframe>
</body>
</html>
I've validated the JSON in the manifest file and it passes:
{
"manifest_version": 2,
"version": "1.0",
"name": "Kalki Chrome",
"description": "Window to the world 2",
"icons":
{
"16": "images/kalki16.png",
"48": "images/kalki48.png",
"128": "images/kalki128.png"
},
"browser_action":
{
"default_icon": "images/kalki48.png",
"default_popup": "kalki.html"
}
}
The plugin wouldn't load because I had an extra folder level when I downloaded and zipped the project. I removed this extra folder, and put the three files at root level, and the plugin loaded correctly.
Normally we are link the css with like
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/IndexCss.css" />
</environment>
But can i just link the folder ? Cus have too many css need to link ...
Or any suggustion
ASP.NET Core MVC comes with a built in bundler and minifier so that many CSS files can become one, also does the same for JavaScript files.
Just create a file called bundleconfig.json at the root of the project with content like this:
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"~/lib/bootstrap/dist/css/bootstrap.css",
"~/css/*.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"~/js/*.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
More info here:
https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-2.2&tabs=visual-studio
I had generated a manifest file with icons, later i decided to just change the icons folder with different icons(by copying & paste and overriding) when i did that I get the following error in chrome devtools as i click add to home screen in the application tab:
Error while trying to use the following icon from the Manifest:
https://x.firebaseapp.com/icons/icon-144x144.png (Resource size is not
correct - typo in the Manifest?) x.firebaseapp.com/:1 App banner not
shown: no icon available to display
However, on chrome mobile the icon is updated(confirmed using add to homescreen)
{
"name": "Duckr",
"short_name": "Duckr",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"orientation": "portrait",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
icons/icon-144x144.png image should have width 144px and height 144px
You can check your manifest in your application tab in chrome inspect
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#add-to-homescreen
Is the icon actually 144px by 144px? That's what the error suggests to me.
Error-"Error while trying to use the following icon from the Manifest:"
When I modifed the manifest.json with following change , it worked for me .
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
This might help someone who is facing a similar issue.
I do not see any response that resolves your comment, and I was also playing with the Manifest of my PWA and got this problem in my response headers of the element inspector.
GET http://localhost/android-icon-144x144.png 404 (Not Found)
(index):1 Error while trying to use the following icon from the Manifest: http://localhost/android-icon-144x144.png (Download error or resource isn't a valid image)
And it's just that you need to point your image where your favicon is and change in ** manifest.json ** the key:
"icons": [
{
"src": "/favicon/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
]
And in your application place the following path.
<link rel="icons" type="image/png" sizes="144x144" href="/favicon/android-icon-144x144.png">
If you do with a favicon generator you will get the different rel like this:
<link rel="icon" type="image/png" sizes="144x144" href="/favicon/android-icon-144x144.png">
Don't know if it's a good solution or not but commenting following lines worked for me :
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
As, I checked into images folder image of mentioned size were not present either
avail image of that size or comment that size in manifest.
if you don't want to see this error go to your public folder and then to your index.html and delete this links if you have accidentally removed the icon image logo192.png or this link manifest.json or try changing the sizes in your manifest.json file
Image size needs to fit size written in manifest.json
If you know the size is right, try renaming both the icon file and the icon name inside manifest.json to something else. There's some "black magic" caching going on (and CTRL-F5 won't work). This way you force it to think it's changed.
I have just met this error when I change my --script-version 1.1.5 to 1.0.13. I resolve it by changing my manifest.json like:
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
]
This happened because u changed the picture:
So u need to update the old name of that picture in manifest json with the new one Example In manifest json my image source was logo192.png ,size 192*192
i downloaded an image named android.png of same size
so I replaced the name of source-SRC from logo192.png to android.png.
IT WORKED
How can we add an Icon for Home Screen in HTML5 when we browse a webpage in chrome app and in option we choose Add To Home Screen. then theres an Icon Shortcut placed on your Home Screen.
I used:
<link rel="apple-touch-icon-precomposed" href="...\icon.png">
<link rel="apple-touch-icon" href="...\icon.png">
nothing happens it display again a default icon.! Just Like the AmStalker Home Screen Icon
What is the best way to do it?
First of all I want to show project structure in image below .
I have made a public folder and all the file is inside the folder .
And the manifest file is out of public folder .this is image
After That we will create Manifest file code of file is given below.
Manifest.json
{
"short_name": "BetaPage",
"name": "BetaPage",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
{
"src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"start_url": "/index.html"
}
// After that we will add service worker
service-worker.js
self.addEventListener("fetch", function(event){
});
// Now go to index.html and put the following code in head section
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
// After that you need to put following code before body closing
<script type="text/javascript">
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>
Now Run your project and wait for few minute and reload your page and ENJOY !
In your href you have an extra dot i think, and it should be a forward slash not a backslash. try "../icon.png"
Also Android using apple icon references have been depreciated so these would not work - FOR ANDROID. Please look at https://developer.chrome.com/multidevice/android/installtohomescreen for more information.
The cited source recommends you do this:
<link rel="icon" sizes="192x192" href="../icon.png">
Of course with this method I advise that your image is 192x192 in size.
The modern way is to make it a Progressive Web App and the browser will offer this on its behalf.
Here - https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/ - you can see the criteria and check for yourself if you've met them.