I can't get any web fonts to work in my Windows Phone 8 HTML5 Application.
I do the following:
Create a new Windows Phone HTML5 App Project
Copy my WOFF font (though I've also tried eot and ttf) to the project root, and add it to the project as an existing item
Add in this CSS to the index.html file
If anyone could create a template Windows Phone 8 project with simple working local web fonts, I'd be super appreciative. This has got me really stuck.
Windows phone supports web fonts. However, if they are embedded on the XAP they will not work.
Engineering response:
This is a known issue, the only workaround we know is to host the fonts on a remote server (making sure to bypass the single origin policy issue) and perhaps use AppCache to keep the font files locally on the device.
Thanks,
Apparently this is a known issue, and as a workaround, you need to host the fonts in a remote server until this issue is resolved by Microsoft.
I have been able to use local truetype web fonts in Windows Phone 8 HTML apps with no problems. You must ensure that the embeddable flag within the the font is set to 0 using software such as TTFEdit.
Check out the full answer I gave to a similar stackoverflow question here.
I think this might be better than the accepted answer but I'm a n00b so I can't add a comment to that yet.
I have searched and found the following post. May be it is related.
Phonegap Windows Phone 7 Dynamic HTML loading and cross-domain calls using jQuery
"If Cordova is not initialized (i.e the device ready has not fired), the browser control treats it like a remote get and lands you in to the usual Cross-Origin issue and rejects" This is probably the case for CSS. May be you can try loading CSS dynamically after deviceready event and see what happen.
NB: Same answer I posted there Phonegap/Cordova web-fonts with Windows Phone 8
I have just noticed in this video. http://channel9.msdn.com/Blogs/Interoperability/Getting-started-with-Windows-Phone-8-and-Cordova At around 4:12, it mentions the build action has to be set to "content" in order for the file to be seen. Not sure if that helps anything, since we already have a report about a bug. :p But I hope it worth sharing anyway. :)
I solved this problem using Cufon http://cufon.shoqolate.com/.
Cufon renders images instead of text, so that is the reason why this works on Windows Phone.
Here is documentation and usage: https://github.com/sorccu/cufon/wiki.
I hope this helps.
It looks like if you encode the font in base64 and put it directly in the css file, than it works in WP8 app as well.
With web apps like Icomoon or Fontsquirrel you can easily generate the css containing the base64 string.
Related
Final Update
For most practical purposes, this question is obsolete as both firefox and chrome have native support for avif through the standard picture html tag with a source marked as type="image/avif". See https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/ . Fire fox still likes to hang and often forces a control F5 to bypass caches and requires sending the correct content type from the server. Hopefully will be fixed soon.
Here is the commit where I got avif support working: https://github.com/quackack/quackack-comics/commit/f1a98ed1f40b6a22584d61bc338bd91df3232fa5#diff-e25b0950ce48f4e928f98e0a6fbb694c . Note that it contains many unrelated changes and in fact avif is barely mentioned, only as a content type and a file extension.
Original Question
I am trying to change a website where I host web comics from using jpegs to the newer avif image format. It is much smaller and seems to be the new image format with the most widespread support. Unfortunately, web browsers don't properly support the new format yet. So I was planning to use this package: https://github.com/Kagami/avif.js to allow my comics to be rendered. Some basic tests showed that AVIF would give the same quality as jpeg for less than half the space.
Unfortunately, after more than 5 hours of time spent on this, I am unable to get this to work with my react framework. You can see my website at the time of writing at 'https://github.com/quackack/quackack-comics/tree/cda4c3893d8477192c4ff3aa78d00096b7621ff7'.
I tried using npm install to install avif.js and then added
require("avif.js").register("/avif-sw.js");
to index.js . But I get error
Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/avif-sw.js’. Must be a JavaScript MIME type
And avif files are still not able to load. I think the requests are getting rerouted to index.html instead of the javascript package. It seems like the appropriate thing to do is something like
import * as avif from 'avif.js';
avif.register('avif.js/avif-sw.js');
But this fails too with the same error, as do many other similar variations.
At this point I am inclined to wait for proper browser support for avif, as I don't get enough traffic to worry about data costs anyway. If this could easily be fixed, then I would love to have the improvements from avif. I just want smaller file sizes and widespread browser support.
Update
Okay, I found that I could get this to work if I changed from the default react bundler (which I believe to be webpack) to Parcel. Then it does work exactly as you expect... until I try to deploy the project.
There is an issue where I cannot load the service worker when i try to deploy my single page webapp to AWS as a single page web app. There it makes a request to my url with avif-sw.js where there is not actually a js file. I believe the issue is closely related to https://github.com/parcel-bundler/parcel/issues/670
So the first key is to use Parcel to build your web app. But Parcel still does something wrong with deployment it seems. I will continue to investigate this in a few days.
Here is the almost working version using parcel: https://github.com/quackack/quackack-comics/tree/parcel
Update 2
My earlier update was incorrect. I only thought it was working because of a cached service worker. My final solution is in the answer below.
It doesn't seem to be a problem now. Simply convert your images to avif with tools like https://avif.io/ and use them as the image source or background source via typical CSS. As Chrome and Firefox now support it (even though users still have to enable it on Firefox), everything goes well. Even works on mobile now! :)
Okay, I finally got it working. Unfortunately, mobile devices don't seem to be able to handle the large file sizes so I had to keep using jpeg anyway. It worked on my laptop though.
Here is the commit that got everything to work: https://github.com/quackack/quackack-comics/commit/75e75307e688f0e515b4bbc9eb22eef290d2c209
What I had to do:
Switch to Parcel.
Copy the contents of the avif.js library into source before building. I used the command:
copyfiles -f node_modules/avif.js/*.js .
Put this specifically into reg.js:
require("avif.js").register("./avif-sw.js");
navigator.serviceWorker.register("./avif-sw.js", undefined);
What the last two steps do is trick parcel into actually keeping a copy of "avif-sw.js" around that can actually be loaded as a service worker. Probably with a bit more tinkering you can get this to work without using parcel at all, just by copying local and then registering. No requires required. But I stopped investigating after I found this solution can't work on mobile.
This was exceptionally hard to debug because service workers are cached by the browser and I had to clear broswer data after every edit. It was also hard to debug because the source files are cached to so I had to delete my projects cache and build frequently too.
You might also want to use npm module "http-server-spa", or similar, to test how your built SPA will act when deployed.
We have embed using an iframe PDF.js using the latest version downloaded from their site.
The problem we are having is that for some users the document is not being rendered on windows 7 with IE 11. Instead of the content of the document they get a blank page.
We narrow it to that configuration, but what is more confusing to us is that if we log with another user to the same machine (using remote desktop), the other user can see the document without any troubles.
I can post the pdf document since it contains sensitive data from our customers/clients. How ever the pdf contains some text and images.
We check the settings and found nothing different, except the fact of an intel graphics driver that may be old.
Do someone know if there is an specific setting on IE or something related to PDF.js that needs like webgl or similar to work?
sorry for being vague but i have no clue and i'm a little bit lost trying to figure out this issue.
thanks in advance
Using the latest version of the PDF Js library and updating the drivers for the intel 4000 graphic card solved the problem. It was only happening in machines with that configuration.
I have a simple script from AccuWeather to display a weather button on my website:
I love the simple way this button displays. It's perfect for what I want.
However, the button generated is in Adobe Flash format (swf) and doesn't display on most mobile devices since iOS and Windows Phone have no support and Flash Player for Android is no longer available for download from the Google Play app store.
I thought I found a solution in an Open Source project called Smokescreen that has its development area at Github.
I don't need this to reproduce flash movies. All I need is a simple javascript-based conversion of the flash button to a flat image that can be displayed in any browser that can execute javascript, which includes mobile devices.
But the documentation and description of how to use Smokescreen at their GitHub site is minimal at best, and I'm not a javascript expert and cannot get it working.
The call I am making that obtains the Flash image from AccuWeather is:
<script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp
?partner=netweather&tStyle=whteYell&logo=0&zipcode=NAM|CA|MB|WINNIPEG|
&lang=eng&size=7&theme=blue&metric=1&target=_self'>
</script>
Can anyone tell me what the javascript would be to use Smokescreen to display the flash image produced by the above code as an image.
If Smokescreen can't do it, is there any other method that can do this live on a webpage?
Just tested smokescreen with the SWF of the page you posted, and it doesn't work, you will need to parse the SWF at server side if you still want to use that site.
I opened the dev console and tracked down the SWF from the iframe
copied the file into my computer, then
cloned the github repo and
edited the player.html (from the github repo), line 13 to point to the file I downloaded.
This is the SWF I downloaded: http://netwx.accuweather.com/netWx-V212.swf?zipcode=46958
Edit: this is the error message I got from the dev console:
TypeError: this.defineEditText is not a function [loader.js:136](https://github.com/cesmoak/smokescreen/blob/master/src/player/loader.js#L136)
My system asks for permission to allow the SWF to connect to netwx.accuweather.com.
A quick search on github reveals some nice pure javascript alternatives.
https://github.com/search?l=JavaScript&q=weather&ref=searchresults&type=Repositories
I think this one looks the most promising: http://simpleweatherjs.com/
This simpleweatherjs demo shows a nice icon as well: http://codepen.io/fleeting/pen/wHism
unfortunately there is no way your javascript can handle swf, espacially on mobile devices like whith ios or windows phone since the javascript is running on your device itself.
all you could try is to use swfobject which is described as a workaround for javascript
here is the documentation of swfobject
Have you considered using a headless browser like phantomjs? You could use something like Selenium instead for out-of-the-box plugin support, but there are headless options for Flash.
The beauty of such software is that it can automate any user task (that's why it's used for testing). Like logging onto a site and performing a search that would normally not be available externally because of antiforgery tokens. Or checking if a product's price has changed by seeing if its DOM element value's has changed. Or accessing your online banking to see if your balance is a prime number and rendering your credit card bill in fractal form.
I mean, if you want to go this far for a weather widget, you probably have power user needs :)
...also Accuweather seems to do a fairly similar mobile-friendly version. And if it's not 100% the same, you could always ask.
Edit: check their T&C, the mobile-friendly snippet might actually be the only option for legal reasons.
When designing Metro apps for Windows 8 with JavaScript, are all features available such as full AJAX support? And what about CSS?
What is supported, and what is not? I haven't been able to find a comprehensive command-reference list yet.
You are asking it wrong ;) Windows 8 WinJS API has much more features than in-browser JavaScript in Windows 8 / IE10.
Update: thanx to Jeremy Poster, for pointing out, there are some security limitation in Windows Store Apps (because it has more privileges, compared to browser). Most visible are: mandatory utf8, absence of window.alert and its friends, url links open in browser by default, .js file caching, and filtration for .innerHTML and company. See all differences.
According to the JavaScript Getting Started page, you can create apps with HTML (so I assume full DOM access), as well as network requests using XMLHttpRequest.
Check out the blog reader demo app.
Since Javascript in Metro runs on IE10 browser, you can check http://caniuse.com/ for information about which browser supports what. In addition, there are additional APIS you can use from "WinRT".
Will it be possible to use the Google Analytics JavaScript library (https://developers.google.com/analytics/devguides/collection/gajs/) for the Windows Metro JavaScript based application to trace views accessed by user?
In general, if a JavaScript library you want to use is on a CDN or a server external to your app, the answer is no, as Windows apps written with HTML/JavaScript cannot load external JavaScript libraries...if you try, a security exception will occur.
Many libraries will work fine if you copy the JS file into your project and run it locally. For example, jQuery works just fine this way. I have not tried the Google Analytics library, so you might just want to test it out and see if it will work with a local copy.
Something else to consider, however, is that unlike a web site, a Windows app written in HTML/JavaScript may occasionally be offline, in which case, a library written with the assumption of network connectivity would likely not work. So in this particular case, you might not get the data that you're hoping for.
Hope that helps.
we tried http://w8ga.codeplex.com/ (w8ga) to work with GA in our win8 js app.
Currently W8GA seems doesn't support html/js. Also I have no idea why developer didn't mension it( it's supports only c#/xaml metro app )
So, we found another way to do it; Look for cobra Tab 's answer at the bottom of this page: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/f81ebbb9-d711-40f1-8a82-9aed44e2d8fe/
And finally, we are waiting Adobe's Omniture sdk:
http://microsite.omniture.com/t2/help/en_US/sc/appmeasurement/winrt/index.html#Developer_Quick_Start
Hope these answers helps...
We're using the free version of markedup in our applications with great success. In addition to simple page views it shows you some app specific numbers like number of installs, exception details, etc.
I'd recommend using the Google Analytics SDK for Windows 8 and Windows Phone. It is built as a WinRT component and therefore supports both JS & Xaml Win8 apps.
Full disclosure: I am the author of this SDK; I built it for my own app and decided to open source it. There are other frameworks out there but AFAIK, none of them support the new GA universal analytics protocol so they only work with older GA properties and don't support all the cool new features GA recently added just for apps.