We’ve heard of several folk having issues getting their Ionic powered mobile applications working offline correctly when using the Ionicons. We’ll show you 2 quick ways that should help you out if you’re having the same issue. Offline ionicons are possible, and not difficult to implement.
The Issue
When using the HTML application cache you define a list of assets to be cached locally, allowing for local serving of them. This gives you performance increases and also offline capabilities. These assets are listed under the CACHE MANIFEST header. This is the section where, if using Ionicons in your Ionic application, you could be tempted to list the following;
|
1 2 3 4 5 6 7 |
CACHE MANIFEST /fonts/ionicons.eot /fonts/ionicons.svg /fonts/ionicons.ttf /fonts/ionicons.woff |
You’d then potentially use Sass to process the SCSS files supplied with Ionic and you’d soon see that your icons weren’t displaying offline.
This occurs due to the Ionic SCSS supplying a version number into a query param for the Ionicon font files.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Ionicons Font Path // -------------------------- @font-face { font-family: $ionicons-font-family; src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}"); src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"), url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"), url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"), url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg"); font-weight: normal; font-style: normal; } ... ... |
What this means is that the URLs for the font files in the outputted CSS are actually like this;
|
1 2 3 |
@font-face { font-family: "Ionicons"; src: url("../fonts/ionicons.eot?v=1.5.2"); src: url("../fonts/ionicons.eot?v=1.5.2#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=1.5.2") format("truetype"), url("../fonts/ionicons.woff?v=1.5.2") format("woff"), url("../fonts/ionicons.svg?v=1.5.2#Ionicons") format("svg"); font-weight: normal; font-style: normal; } |
What has happened here is that the the URLs now have ?v=1.5.2 appended to them… and this means that our CACHE MANIFEST entries will not match and our app cache will not cache them, and so our offline ionicons won’t be there. Sadly this quirk of app cache isn’t mentioned in either the pages over at w3schools.com or HTML5 Rocks, and is therefore quite commonly missed.
Solution 1 : Correct your CACHE MANIFEST
Update your CACHE MANIFEST to include the query parameters that are associated with the version of Ionicons that is being used.
|
1 2 3 4 5 6 7 |
CACHE MANIFEST /fonts/ionicons.eot?v=1.5.2 /fonts/ionicons.svg?v=1.5.2 /fonts/ionicons.ttf?v=1.5.2 /fonts/ionicons.woff?v=1.5.2 |
Solution 2 : Modify the Ionicons SCSS
An alternative is to modify the ionicons-font.scss file to remove the code that inserts the query parameter. There can be several reasons to take this approach and for one of the Salesforce projects here at MobileCaddy this was just what we decided to do.
If you want to take this approach then your SCSS should be modified to look like this;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Ionicons Font Path // -------------------------- @font-face { font-family: $ionicons-font-family; src:url("#{$ionicons-font-path}/ionicons.eot"); src:url("#{$ionicons-font-path}/ionicons.eot#iefix") format("embedded-opentype"), url("#{$ionicons-font-path}/ionicons.ttf") format("truetype"), url("#{$ionicons-font-path}/ionicons.woff") format("woff"), url("#{$ionicons-font-path}/ionicons.svg#Ionicons") format("svg"); font-weight: normal; font-style: normal; } ... ... |
Due to us using bower to bring in Ionic as part of our development setup we also decided that instead of manually having to modify the SCSS (which wasn’t stored in out git repositories) we created a simple Grunt task to do this for us. Then we added this Grunt task into our standard workflow which meant our developers didn’t need to think about this at all. Our Grunt task looks something like this;
|
1 2 3 4 5 6 7 8 9 10 11 12 |
replace: { ioniconsVsnRm: { src: ['scss/ionic/ionicons/_ionicons-font.scss'], dest: 'scss/ionic/ionicons/_ionicons-font.scss', replacements: [{ from: '?v=#{$ionicons-version}', to: '' }] } } |
Using either of these approaches should help you to get offline ionicons working and hopefully assist you with creating more robust mobile applications.