worker - Dave's Blog

Search
My timeline on Mastodon

Win10 PWA Terminology

2018 May 31, 8:26

Folks familiar with JavaScript UWP apps in Win10 have often been confused by what PWAs in Win10 actually are. TLDR: PWAs in Win10 are simply JavaScript UWP apps. The main difference between these JS UWP Apps and our non-PWA JS UWP apps are our target end developer audience, and how we get Win10 PWAs into the Microsoft Store. See this Win10 blog post on PWAs on Win10 for related info.

Web App

On the web a subset of web sites are web apps. These are web sites that have app like behavior - that is a user might call it an app like Outlook, Maps or Gmail. And they may also have a W3C app manifest.

A subset of web apps are progressive web apps. Progressive web apps are web apps that have a W3C app manifest and a service worker. Various OSes are beginning to support PWAs as first class apps on their platform. This is true for Win10 as well in which PWAs are run as a WWA.

Windows Web App

In Win10 a WWA (Windows Web App) is an unofficial term for a JavaScript UWP app. These are UWP apps so they have an AppxManifest.xml, they are packaged in an Appx package, they run in an App Container, they use WinRT APIs, and are installed via the Microsoft Store. Specific to WWAs though, is that the AppxManifest.xml specifies a StartPage attribute identifying some HTML content to be used as the app. When the app is activated the OS will create a WWAHost.exe process that hosts the HTML content using the EdgeHtml rendering engine.

Packaged vs Hosted Web App

Within that we have a notion of a packaged web app and an HWA (hosted web app). There's no real technical distinction for the end developer between these two. The only real difference is whether the StartPage identifies remote HTML content on the web (HWA), or packaged HTML content from the app's appx package (packaged web app). An end developer may create an app that is a mix of these as well, with HTML content in the package and HTML content from the web. These terms are more like ends on a continuum and identifying two different developer scenarios since the underlying technical aspect is pretty much identical.

Win10 PWA

Win10 PWAs are simply HWAs that specify a StartPage of a URI for a PWA on the web. These are still JavaScript UWP apps with all the same behavior and abilities as other UWP apps. We have two ways of getting PWAs into the Microsoft Store as Win10 PWAs. The first is PWA Builder which is a tool that helps PWA end developers create and submit to the Microsoft Store a Win10 PWA appx package. The second is a crawler that runs over the web looking for PWAs which we convert and submit to the Store using an automated PWA Builder-like tool to create a Win10 PWA from PWAs on the web (see Welcoming PWAs to Win10 for more info). In both cases the conversion involves examining the PWAs W3C app manifest and producing a corresponding AppxManifest.xml. Not all features supported by AppxManifest.xml are also available in the W3c app manifest. But the result of PWA Builder can be a working starting point for end developers who can then update the AppxManifest.xml as they like to support features like share targets or others not available in W3C app manifests.

PermalinkCommentsJS pwa uwp web

Tweet from David_Risney

2015 Mar 11, 9:57
Chrome moving Service Worker's fetch() API to the window. Like XHR but with promises http://updates.html5rocks.com/2015/03/introduction-to-fetch … via @ChromiumDev
PermalinkComments

Retweet of matthew_d_green

2015 Feb 18, 10:07
If you're a technology worker who has any access to sensitive keys or secrets, read all the way through this piece. https://firstlook.org/theintercept/2015/02/19/great-sim-heist/ …
PermalinkComments

Subtleties of postMessage

2013 Jul 15, 1:00

In IE10 and other new browsers one may create MessageChannel objects that have two MessagePorts each connected (w3c spec calls it entangled) to one another such that postMessage on one port results in the message event firing on the other. You can pass an array of ports as the last parameter to postMessage and they show up in the ports property of the message event arg.

Origin

The postMessage here is like the worker postMessage and unlike the window and iframe postMessage in that it applies no origin checking:

  1. No origin postMessage in workers and MessagePorts: postMessage(messageData, ports)
  2. Origin postMessage in windows and iframes: postMessage(messageData, targetOrigin, ports)

Unfortunately the origin isn't an optional parameter at the end to make the two postMessages have the same signature.

On the event handler side, the event arg always has an origin property. But in the no origin case it is always the empty string.

Source

There is also a source property on the message event arg which if set is an object that has a postMessage property allowing you to post back to your caller. It is set for the origin case, however, in the no origin case this property is null. This is somewhat reasonable because in the case of MessagePort and Workers there are only two endpoints so you always know the source of a message implicitly. Unlike the origin case in which any iframe or window can be calling postMessage on any other iframe or window and the caller is unknown. So not unreasonable but it would be nice if the source property was always set for consistency.

MessageChannel start

When a MessageChannel is created it has two MessagePorts, but until those ports are started they will queue up any messages they receive. Once started they will dispatch all queued messages. Ports don't have to be started to send messages.

A port may be started in two ways, either by explicitly calling the start method on the port, or by setting the onmessage callback property on the port. However, adding an event listener via addEventListener("message", does not start the port. It works this way in IE and Chrome and the spec states this as well.

The justification is that since you can have only one callback via onmessage that once set you must implicitly be ready to receive messages and its fine to start the port. As opposed to the addEventListener in which case the user agent cannot start implicitly because it doesn't know how many event listeners will be added.  I found Hixie stating this justification in geoloc meeting notes.

Links

W3C Spec

Opera introduction

PermalinkCommentsDOM html javascript postMessage technical web-worker worker

Words with Hints Windows 8 App Development Notes

2013 Jul 4, 1:00

My second completed app for the Windows Store was Words with Hints a companion to Words with Friends or other Scrabble like games that gives you *ahem* hints. You provide your tiles and optionally letters placed in a line on the board and Words with Hints gives you word options.

I wrote this the first time by building a regular expression to check against my dictionary of words which made for a slow app on the Surface. In subsequent release of the app I now spawn four web workers (one for each of the Surface's cores) each with its own fourth of my dictionary. Each fourth of the dictionary is a trie which makes it easy for me to discard whole chunks of possible combinations of Scrabble letters as I walk the tree of possibilities.

The dictionaries are large and takes a noticeable amount of time to load on the Surface. The best performing mechanism I found to load them is as JavaScript source files that simply define their portion of the dictionary on the global object and synchronously (only on the worker so not blocking the UI thread). Putting them into .js files means they take advantage of bytecode caching making them load faster. However because the data is mostly strings and not code there is a dramatic size increase when the app is installed. The total size of the four dictionary .js files is about 44Mb. The bytecode cache for the dictionary files is about double that 88Mb meaning the dictionary plus the bytecode cache is 132Mb.

To handle the bother of postMessage communication and web workers this was the first app in which I used my promise MessagePort project which I'll discuss more in the future.

This is the first app in which I used the Microsoft Ad SDK. It was difficult to find the install for the SDK and difficult to use their website, but once setup, the Ad SDK was easy to import into VS and easy to use in my app.

PermalinkCommentsdevelopment technical windows windows-store words-with-hints

Changing Windows Live IDs

2012 Jun 6, 2:54

Use of my old Hotmail account has really snuck up on me as I end up caring more and more about all of the services with which it is associated. The last straw is Windows 8 login, but previous straws include Xbox, Zune, SkyDrive, and my Windows 7 Phone. I like the features and sync'ing associated with the Windows Live ID, but I don't like my old, spam filled, hotmail email address on the Live ID account.

A coworker told me about creating a Live ID from a custom domain, which sounded like just the ticket for me. Following the instructions above I was able to create a new deletethis.net Live ID but the next step of actually using this new Live ID was much more difficult. My first hope was there would be some way to link my new and old Live IDs so as to make them interchangeable. As it turns out there is a way to link Live IDs but all that does is make it easy to switch between accounts on Live Mail, SkyDrive and some other webpages.

Instead one must change over each service or start over depending on the service:

Xbox
In the Xbox 360 system menu you can change the Live ID associated with your gamertag. This worked fine for me and I got an email telling me about the transfer of my Microsoft Points.
Zune
There's no way to do this for the Zune specifically, however changing over your Xbox account also transfers over all your Zune purchased content. I don't have a Zune Pass so I can't confirm that, but all of my previously purchased television shows transferred over successfully.
Windows 7 Phone
To change the main Live ID associated with your phone, reset your phone to factory default and start over. All purchased applications are lost. Had I purchased any applications I would have been pissed, but instead I was just irritated that I had to reset my phone.
Mail
I don't use my Hotmail account for anything and it only sits and collects spam. Accordingly I didn't attempt switching this over.
SkyDrive
I didn't have much in my SkyDrive account. I downloaded all files as a zip and then manually uploaded them to the new account.
PermalinkCommentshotmail domain win8 skydrive technical windows live-id

Code: Flickr Developer Blog » Parsing Exif client-side using JavaScript

2012 Jun 1, 2:51

Flickr parses the exif out of images using Web Workers, and Blob (File API)!

PermalinkCommentsjavascript blob exif image technical programming dom webworker web-browser

I’m distressed when my coworkers don’t know their...

2012 May 6, 3:44


I’m distressed when my coworkers don’t know their backslash from their forward slash so I draw this to help them remember which is which.

PermalinkCommentstechnical slash backslash mnemonic

Web Worker Initialization Race

2012 Feb 24, 1:44

Elaborating on a previous brief post on the topic of Web Worker initialization race conditions, there's two important points to avoid a race condition when setting up a Worker:

  1. The parent starts the communication posting to the worker.
  2. The worker sets up its message handler in its first synchronous block of execution.

For example the following has no race becaues the spec guarentees that messages posted to a worker during its first synchronous block of execution will be queued and handled after that block. So the worker gets a chance to setup its onmessage handler. No race:

'parent.js':
var worker = new Worker();
worker.postMessage("initialize");

'worker.js':
onmessage = function(e) {
// ...
}

The following has a race because there's no guarentee that the parent's onmessage handler is setup before the worker executes postMessage. Race (violates 1):

'parent.js':
var worker = new Worker();
worker.onmessage = function(e) {
// ...
};

'worker.js':
postMessage("initialize");

The following has a race because the worker has no onmessage handler set in its first synchronous execution block and so the parent's postMessage may be sent before the worker sets its onmessage handler. Race (violates 2):

'parent.js':
var worker = new Worker();
worker.postMessage("initialize");

'worker.js':
setTimeout(
function() {
onmessage = function(e) {
// ...
}
},
0);
PermalinkCommentstechnical programming worker web-worker html script

[html5] Web Workers: Race-Condition setting onmessage handler?

2011 Sep 20, 7:17There's no race between posting to a web worker and the web worker setting up its message handler as long as the web worker sets its message handler in the first sync. block of code that runs in the web worker: "Basically, once the initial worker script returns, the worker's port is enabled and the normal message port event delivery mechanism kicks in (including dropping unhandled messages on the floor)."PermalinkCommentstechnical web-worker webbrowser programming postMessage

C-SPAN Video Player - House Judiciary Subcmte. Hearing on Immigration and Farm Labor

2010 Sep 24, 8:38"Comedian Stephen Colbert joined the panel of witnesses at a House hearing on immigrant farm workers. Mr. Colbert has partnered with United Farm Workers and their campaign calling on unemployed Americans to take jobs in the agriculture sector. The organization's president, Arturo Rodriguez, also testified at the Judiciary Subcommittee on Immigration and Border Security hearing chaired by Rep. Zoe Lofgren (D-CA).
Washington, DC : 2 hr. 10 min."PermalinkCommentshumor video stephen-colbert politics immigration farm labor house

Microsoft Email - Orange

2008 Jun 18, 4:39A former coworker tried to cut an orange with a plastic knife from the cafe and the knife melted. This is the resulting email thread.PermalinkCommentsjeff-davis orange microsoft humor email

China, China's Boomtowns - National Geographic Magazine

2008 Apr 3, 2:19"How one supercharged province cranks out lightbulbs, buttons, and bra rings, as well as instant cities for the factory workers. "PermalinkCommentsvia:boingboing china economics environment politics video

Excercise Bike and Tacoma Screw Products

2008 Jan 13, 11:07

Sarah and I got an exercise bike on sale and when attempting to put it together found that it was missing a bag of about ten different screws. The manufacturer website said we could order a replacement bag for thirty dollars (!!) but since the instructions listed the various kinds of screws we needed I figured we could just go to a hardware store and buy them.

We started at Home Depot because I didn't know better. The screws are all listed in metric sizes which is apparently uncommon and a helpful senior worker forwarded us to McLendons whose stock was better but we were again redirected this time to Tacoma Screw Products.

Tacoma Screw Products is great! See them for your hardware needs first! The store has a back area with every kind of screw ever. I felt a little out of place as as all the customers looked like contractors. The employee who helped me explained the various options I had in screws as the bike instructions weren't as explicit as they could have been. In the end I bought all my screws for only one dollar (much better than $30!) and they all fit correctly.

PermalinkCommentsscrew bike personal tacoma screw products nontechnical

Office Remodel

2007 Jun 11, 4:20Venkat NameplateMy manager has come back this week from a 10 week vacation and paternity leave. In response and similar to other office hacks some dedicated coworkers and I decided to do something to my manager's office.

Venkat's New Office SpecWhile gone we knew my manager, Venkat, was getting into meditation. My coworker Vishu had the excellent idea of easing Venkat back into work by making his office better suited for meditation. To start with, we updated his nameplate with an Om.

Venkat's New and Improved OfficeNext we emptied his office of anything that could distract him from meditation and replaced it with a yoga mat. Of course I left a copy of the specification for the remodel in his office.PermalinkCommentsmicrosoft personal office humor nontechnical

Seattle's Sauve

2007 Jun 4, 10:40Coworker's blog.PermalinkCommentsaaron-sauve blog microsoft ie

Tariq and Maryem's Wedding (The Choudhry Family MSN Group)

2007 May 1, 3:10My friend and coworkers wedding photos. Woo!PermalinkCommentsphoto photos tariq friend wedding microsoft

Dilbert.com - The Official Dilbert Website by Scott Adams - Dilbert, Dogbert and Coworkers!

2005 Apr 3, 4:32PermalinkCommentscomic humor dilbert
Older Entries Creative Commons License Some rights reserved.