w3c - Dave's Blog

Search

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

A Complete Guide to Flexbox | CSS-Tricks

2014 May 22, 1:02

"The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and…"

Great diagrams showing the use of the various flex css properties. I can never keep them straight so this is perfect for me.

PermalinkCommentstechnical css flex

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

CSS Fonts Module Level 3

2011 May 10, 10:49Interesting standards disagreements showing up in specs: "Some implementers feel a same-origin restriction should be the default for all new resource types while others feel strongly that an opt-in strategy usuable for all resource types would be a better mechanism and that the default should always be to allow cross-origin linking for consistency with existing resource types (e.g. script, images). As such, this section should be considered at risk for removal if the consensus is to use an alternative mechanism."PermalinkCommentsreference web development font specification w3c css3

Re: [FileAPI] File.slice spec bug from Jonas Sicking on 2011-04-12 (public-webapps@w3.org from April to June 2011)

2011 Apr 14, 11:27If only all web compat issues were so easily fixed: "If someone knows about any websites I can personally take care of contacting them and trying to get them fixed."PermalinkCommentsw3c reference file api standard

IE9 Document Mode in WebOC

2011 Apr 4, 10:00

Working on GeolocMock it took me a bit to realize why my HTML could use the W3C Geolocation API in IE9 but not in my WebBrowser control in my .NET application. Eventually I realized that I was getting the wrong IE doc mode. Reading this old More IE8 Extensibility Improvements IE blog post from the IE blog I found the issue is that for app compat the WebOC picks older doc modes but an app hosting the WebOC can set a regkey to get different doc modes. The IE9 mode isn't listed in that article but I took a guess based on the values there and the decimal value 9999 gets my app IE9 mode. The following is the code I run in my application to set its regkey so that my app can get the IE9 doc mode and use the geolocation API.



        static private void UseIE9DocMode()
{
RegistryKey key = null;
try
{
key = Registry.CurrentUser.OpenSubKey("Software\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_BROWSER_EMULATION", true);
}
catch (Exception)
{
key = Registry.CurrentUser.CreateSubKey("Software\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_BROWSER_EMULATION");
}
key.SetValue(System.Diagnostics.Process.GetCurrentProcess().MainModule.ModuleName, 9999, RegistryValueKind.DWord);
key.Close();
}
PermalinkCommentsweboc fck ie document mode technical ie9

GeolocMock Tool - Tell IE9 Where You Are

2011 Apr 3, 12:00

I've made GeolocMock. If your PC has no geolocation devices, IE9 uses a webservice to determine your location. GeolocMock uses FiddlerCore to intercept the response from the webservice and allows the user to replace the location in the response with another. This was a fun weekend project in order to play with FiddlerCore, the W3C Geoloc APIs in IE9, hosting the IE9 WebOC in a .NET app, and the Bing Maps APIs.

PermalinkCommentsfiddler technical geoloc ie9 fiddlercore

Comparison of CORS and UMP - Web Security

2010 May 7, 6:29UMP instead of CORS for cross-domain access control: "...a developer can read only UMP and ignore CORS, yet still create safe code. This code can successfully message with CORS resources that do not require credentials. UMP is therefore a way of messaging with the credential-free subset of CORS resources."PermalinkCommentsw3c security web browser technical

5 Loading Web pages — HTML 5

2010 Apr 22, 10:26HTML5 has some notion of a 'null' origin. Not sure how this actually plays out though.PermalinkCommentsw3c site-of-origin null web browser application html html5 technical

Widget Packaging and Configuration

2010 Mar 26, 2:28"Widgets are client-side applications that are authored using Web standards, but whose content can also be embedded into Web documents."PermalinkCommentsw3c spec widget web application technical

Database - WEBAPPS

2010 Mar 5, 10:21Document explaining the relationship between the various web storage APIs coming out of HTML 5. To summarize:
Web Storage (aka DOM Storage) - simple key/value pairs API.
WebSimple DB API - now called Indexed Database API.
Indexed Database API and Web SQL Database - competing database APIs.
Application Cache - Storage of HTTP resources for offline apps.
DataCache API - A programmatically modifiable Application Cache.PermalinkCommentshtml html5 standard programming technical wiki w3c database storage web

Indexed Database API

2010 Mar 5, 9:32PermalinkCommentsapi database html html5 specification w3c web programming technical

The Contacts API

2010 Mar 2, 5:25HTML5 Contacts API allows HTML pages access to a user's contacts info.PermalinkCommentscontact business-card html html5 api javascript technical w3c reference

HTML5: HTML elements

2010 Feb 28, 2:41"The complete set of HTML elements is the set of elements described in the following sections."PermalinkCommentstechnical reference html html5 w3c web

Sense and Reference on the Web

2009 Oct 30, 10:33"What does a Uniform Resource Identifier (URI) mean? Does it have a sense, and can it refer to things?" I hope it will cover some of the new scheme vs always HTTP scheme and distinct vs not distinct URLs for a real world object and its web page perma-arguments.PermalinkCommentsvia:connolly url uri w3c semanticweb http todo technical

ginger's thoughts » URI fragments vs URI queries for media fragment addressing

2009 Sep 11, 8:39"In the W3C Media Fragment Working Group (MFWG) we have had long discussions about the use of the URI query (”?”) or the URI fragment (”#”) addressing approach for addressing directly into media fragments, and the diverse new HTTP headers required to serve such URI requests, considering such side conditions as the stripping-off of fragment parameters from a URI by Web browsers, or the existence of caching Web proxies."PermalinkCommentsfragment uri via:connolly media url query http http-header

HTML5 differences from HTML4

2009 Sep 10, 6:50"describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes"PermalinkCommentshtml html5 reference w3c technical

Scalable Vector Graphics (SVG) 1.1 (Second Edition)

2009 Aug 24, 4:57"This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 1.1, a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML."PermalinkCommentssvg graphic web xml reference w3c technical

Ajaxian » W3C publish first working draft of File API

2009 Aug 12, 5:02W3C File API makes it to first published working draft. Like the use of data URLs, don't like the new filedata URLs.PermalinkCommentshtml5 w3c file upload script url data-scheme technical

W3C File Upload API

2009 Jul 27, 5:34"This specification provides an API used to prompt the user with a file selection dialogue and obtain the data contained in files on the user's file system."PermalinkCommentsweb w3c api upload script dom technical
Older Entries Creative Commons License Some rights reserved.