Using Gulp to Add UTF8 BOM for Windows 10 Javascript Apps

Windows 10 now caches compiled byte code for all js files with a UTF8 BOM

With Windows 10, Microsoft has introduced a number of new technologies to make deploying web apps to the Windows Store easier. They now support the W3C Web Application Manifest to allow you to create hosted web apps from your website through their Project Westminster and even provide Manifold JS to help create these standard-based mainfests as well as creating packages for Windows, Chrome OS, Firefox OS and using Cordova to create packages for iOS and Android. Pretty powerful stuff!

This allows you to have an app in stores for people that like apps and a website for those people that prefer those, both running from the same code base; and increase your general visibility and availability.

While hosted web apps have many advantages over fully packaged applications; most notably the ability to update and fix them without going through the full store approval and certification process; which isn’t instant or particularly rapid in any of the stores; there are also advantages to packaged apps on Windows 10; or a hybrid app with some local and some from the web, either in an iframe or a x-ms-webview.

Unlike many other platforms, since Windows 8, HTML+Javascript applications have been native apps and first class citizens of the app landscape; much like they are on ChromeOS and FirefoxOS.

HTML+JS apps have had their application load times accelerated since Windows 8 with bytecode caching. This has improved for Windows 10 as now all js files will have their compiled byte code cached rather than just the ones referenced from the main html page:

As a performance optimization to accelerate JavaScript execution time, JavaScript files ending in the .js extension generate bytecode when the app is deployed. This significantly improves startup and ongoing execution times for JavaScript operations.

In fact the Windows App Certification Kit won’t pass your HTML+JS app unless you do save as utf-8 and include a byte order mark for encoding.

Test Details

Checks the app deployment to verify that all .js files have been converted to bytecode.

Corrective Action

If this test fails, consider the following when addressing the issue:

• Verify that event logging is enabled.
• Verify that all JavaScript files are syntactically valid.
• Confirm that all previous versions of the app are uninstalled.
• Exclude identified files from the app package.

This is on top of the data being local and not needing any network round trips so it becomes super fast. We still use the ASP.NET website to do most of the work; but have very fast start up and local images, scripts etc for some of it, which gets downloaded as part of the app install – giving the best of both worlds.

The suggested approach to add encoding byte order marks is to just use “Save As…” save with encoding in Visual Studio. But as we share the javascript between our ASP.NET webapp and our UWP Javascript app; we are already using a Gulp task to prepare our stuff for the web; so its not much of a step to extend this to add in the BOMs.

There seem to be a lot of npm, Gulp plugins and Grunt plugins to remove utf-8 byte order marks; but not many to actually add them – so we use the following code in our Gulpfile to do what a plugin would do:

Then you can call it just as you would a regular plugin:

Now all the js files will have a BOM and you should pass the Certification test and get the speed up advantage of byte code caching.

As an aside why would you want to use a x-ms-webview over an iframe? There are a number of reasons including allowing the iframe access to platform items: Windows Runtime objects, responding to permission requests like fullscreen etc.

For me the biggest one is it runs in its own thread separate from the UI thread of its parent container:

I just use a simple replace for iframe in my html Gulp task to handle that; though there are some slight differences in comms between the iframe and x-ms-webview but the path is easily chosen with some feature or path detection.