Now I'm testing PWA on iOS 11.3 and I use the manifest.json file below:
{
"name": "Maplat PWA Sample",
"short_name": "Maplat PWA",
"background_color": "#fc980c",
"icons": [{
"src": "/Maplat/pwa/icon-96.png",
"sizes": "96x96",
"type": "image/png"
},{
"src": "/Maplat/pwa/icon-144.png",
"sizes": "144x144",
"type": "image/png"
},{
"src": "/Maplat/pwa/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},{
"src": "/Maplat/pwa/icon-256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/Maplat/debug.html?overlay=true",
"display": "standalone"
}
This works well except icon setting.
In my iOS 11.3 on iPhoneX, icon files are not shown on home screen but screen capture is used as launcher button.
I compared my manifest with other sites, like https://www.ft.com/ or https://r.nikkei.com/, but I couldn't find any differences in icon settings.
Icons of these sites work well with PWA on iOS 11.3.
What is wrong in my manifest.json?
P.S. My manifest.json works well with Android Chrome.
While iOS 11.3 does support web app manifests, it does not yet support specifying icons this way. You'll want to include it in your manifest for other devices, but at least for now you'll have to use the following for iOS:
<link rel="apple-touch-icon" sizes="180x180" href="icon.png">
Specify the icon size, and include a URL.
Learn more at Apple's documentation here
There is also a website to automate the process linked here
TerPro's answer is correct but as a fallback you can put a file named "/apple-touch-icon.png" in the root directory.
2022 Update:
Declaring icons in a web app manifest file is now supported.
However purpose value should contain any (e.g. "any maskable") or omitted completely. Otherwise it won't work.
SVG format is still not supported, but PNG or WebP could be used instead.
Related
I have looked at several stackoverflow posts and github issues, but can't find something that is working for me.
I have a custom font that I'm using for icons that I'm installing via npm. These are the files in my folder a-icons in node_modules:
a-icon.css
a-icon.eot,
a-icon.ttf,
a-icon.woff,
a-icon.svg
In my main stylesheet I've added:
#import '~a-icons/a-icon';
#font-face {
font-family: 'a-icon';
src: url('../../../node_modules/a-icons/a-icon.eot');
src:
url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
url('../../../node_modules/a-icons/a-icon.svg') format('svg');
}
#import '~a-icons/a-icon' is specifically giving me an error saying that it can't find the .eot, .ttf, .woff, .svg
This is one of the errors:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss
Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
as directory
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss 6:76081-76109
# ./src/assets/stylesheets/global-styles.scss
# multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css
I'm using scss, but the font is in vanilla css.
I've also tried #import '../../../node_modules/a-icons/a-icon.css'; The icons show up as a square and I think that's because the font-family isn't recognized. So I added #font-face, but that it doesn't do anything.
I also tried changing angular-cli.json to include it in the assets and style:
"assets": [
"assets",
"assets/languages",
"assets/stylesheets",
"favicon.ico",
"environments/environment.values.js",
{
"glob": "a-icon.*",
"input": "../node_modules/a-icons",
"output": "./assets/a-icons"
}
"styles": [
"assets/stylesheets/global-styles.scss",
"../node_modules/normalize.css/normalize.css",
"../node_modules/a-icons/a-icon.css"
]
This doesn't do anything.
First, I advise you to create a single css file "fonts.css" in your node module, it will be simple to include a css file in your application rather than redefine the fonts and refer to N files (woff2, eot...ect), for example:
Your fonts.css:
#font-face {
font-family: 'a-icon';
src: url('a-icon.eot');
src:
url('a-icon.ttf') format('truetype'),
url('a-icon.woff') format('woff'),
url('a-icon.svg') format('svg');
}
Second, include the file "fonts.css" in your styles.css of your angular application as follows:
#import "~a-icons/fonts.css";
I have a similar solution that works fine, my node module contains a theme with fonts.
Why did you refer To a node module to get icons? The font is related to the theme of your application so it should be within your assets folder and then simply add: import the-name-font in your main stylesheet.
If you need to import external css files from node_modules, add their links in angular cli config file To import them in the assets folder and then import them in your main stylesheet from assets folder
Hope my response can help you
I have a ngBoilerplate project, I would like to add Font Awesome to it.
I have installed Font Awesome with:
bower install font-awesome --save-dev
I then added the following to the build.config.js file:
css: [
'vendor/font-awesome/css/font-awesome.min.css'
],
assets: [
'vendor/font-awesome/fonts/*'
]
And I added the following to my src/less/variables.less file:
#fa-font-path: "../assets";
Now I would like to add a simple home icon to my site with:
<i class="fa fa-home"></i>
Instead now I get a ␦ (ascii, blank square) where the icon should be.
The Font Awesome CDN works fine but cant get it to work with bower.
So for some reason I get an intermittent error that the font files cant be found.
I amended the build.config.js and removed 'vendor/font-awesome/fonts/*'.
Then I configured Gruntfile.js to copy the fonts to the folder that error was looking for. I did this by adding the following to the copy section:
font_awesome_fonts: {
files:{
expand: true,
flatten: true,
src: 'vendor/font-awesome/fonts/*',
dest: '<%= build_dir %>/vendor/fonts'
}
}
And added the following to the delta.assets section:
'copy:font_awesome_fonts'
This seemed to work but now I get the following warning messages in console, no idea why, at least it works now:
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff2?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.ttf?v=4.3.0
Thanks for your question; it got me on the path to this answer.
What worked for me was using the Font Awesome LESS file instead of the CSS. In src/less/main.less I added the following:
#import '../../vendor/font-awesome/less/font-awesome.less';
I made this declaration in my src/less/variables.less:
#fa-font-path: ".";
I also removed any mention of the font awesome from the vendor css section of build.config.js. My font declaration looks a bit different, but should be effectively the same:
vendor_files: [
js: ...,
css: [
],
assets: [
'vendor/font-awesome/fonts/*.otf',
'vendor/font-awesome/fonts/*.eot',
'vendor/font-awesome/fonts/*.svg',
'vendor/font-awesome/fonts/*.ttf',
'vendor/font-awesome/fonts/*.woff'
]
]
I haven't noticed your issue with the fonts not copying, nor have I seen the messages in the console, but the icons show up correctly when hosting the files in a webserver and browsing to my app.
I created a mobile application with the yeoman mobile-generator.
Now I want to add font awesome. I tried this, but not really works in the compiling process. A small advice or experience would be great
Okay, it's really a bit unclear. Sorry.
The compiling process works, but console says 404 not founds for the fonts.
It's not really clear to me how is a good way to do this. Creating the CSS from the scss files, implemeted the .min.css in the index.html with "<-- build: ... -->" or something else?!
When I add this in my main .scss file the the fonts would not be found.
$fontAwesomePath: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome.scss';
Grunt copies and renames the font files f.e. to:
5a6b8fb8.FontAwesome
Sounds like grunt rev https://github.com/cbas/grunt-rev is renaming your font file. Just look for something like this in your Gruntfile:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/styles/fonts/*'
...
remove the fonts line and you should be okay.
Ok,
seems I could fixed this with the help of this answer.
Installed font awesome with bower:
bower install --save font-awesome
Then simply this line in the index.html fixed my problem.
<!-- build:css styles/vendor/fontawesome.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- endbuild -->
Thanks #OddEssay and #bpaul for our help!!
#importing the scss takes care of the CSS side of things, but I think you also need to move the assests to a location the browser can access them, so grunt-contrib-copy would do the job perfectly. So if your webroot is public Something like:
copy: {
main: {
files: [
{expand: true, cwd: '../bower_components/font-awesome/fonts', src: ['*.*'], dest: 'public/fonts'}
]
}
I am creating a Google Chrome extension.
And I want to use background-image attribute for some of the elements that I define through CSS. But I am not sure how the url() should be given. I tried relative URL, but it tries to fetch the image relative to the site's domain! Not relative to the extension's source directory.
The stylesheet is included to my extension via the manifest file as follows:
...
"content_scripts": [
{
"matches": ["http://www.myblahblahsite.com/"],
"js": ["core.js"],
"css":["styles.css"]
}
],
...
Also, I like to do the same with custom fonts too using the #font-face
For example:
#font-face {
font-family: 'abcCustom';
src: url("fonts/abcCustom.ttf") format('ttf');
}
This won't properly consider the font's path relative to the extension!
Any ideas or suggestions?
Thanks.
You need to make it an absolute url for your extension, the best way to do this would be like this:
#font-face{
font-family: 'abcCustom';
src: url('chrome-extension://__MSG_##extension_id__/fonts/abcCustom.ttf') format('ttf');
}
This is part of the i18n api.
Have you thought about encoding your images and fonts as Base64.
I am working on a chrome extension and I recently moved all of the css from inside of the popup.html file to a new .css file to try and clean up the code some.
Well when we were testing we started seeing some funny behavior on some web pages that we visited a lot and it took a bit to connect it with the extension. Once we did I did some digging and realized that there were css tags inside of my css that were the same as the ones on the pages being affected and that my css was overriding the css on the page.
I have looked around on google and on stack and it seems as though I am the only one with this problem. Anyone got any ideas why this would be happening.
---Edit---
Sorry I should of been more specific, I did use programmatic injection as described on the chrome documentation site here is my manifest and part of the head of my popup.html file:
Manifest.json file
{
"background_page": "background.html",
"browser_action": {
"default_icon": "loggedout.png",
"popup": "popup.html"
},
"content_scripts": [ {
"js": [ "content/overlay.js",
"content/jquery.js","content/jquery.watermark.min.js"],
"css": ["popup.css"],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_start"
} ],
Popup.html file
<html>
<head>
<link rel="stylesheet" href="popup.css" type="text/css">
....... other includes
</head>
Just remove "css": ["popup.css"], line from your manifest, it is not needed. You can include any local css into your popup without describing it in the manifest (css in manifest is for content scripts only).
Unless you want your css injected into every page your extension targets, you have to use programmatic injection as described here:
http://code.google.com/chrome/extensions/content_scripts.html