diagram - 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

Retweet of GundersenMarius

2016 Jan 19, 10:49
I love this diagram in the WHATWG spec. It explains it much better than words could pic.twitter.com/RflCT5JIGu
PermalinkComments

Retweet of jvaleski

2015 Nov 9, 2:38
Just had "the talk" w/ my daughter; complete w/ diagram. Everyone needs to know how this all works. #thenetwork pic.twitter.com/4vOV4d6XfY
PermalinkComments

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

Diagramly

2012 Apr 20, 3:38

Web app for making diagrams like Visio.  Export your results as SVG, PNG, PDF and others.

PermalinkCommentstechnical diagram web-app javascript web visio svg

tenso GRAPHICS

2010 Jun 19, 3:54
PermalinkCommentskeytar humor math diagram keyboard duck

Social Media Venn Diagram Tee

2009 Jun 2, 11:18"Social Media. Unlocking the awesome potential of behavioral disorders." Can't go wrong with a venn diagram shirt.PermalinkCommentssocial humor shirt facebook twitter via:ericlaw

Senseless Venn Diagrams

2008 Oct 14, 12:54Jason Eppink has some creative and sometimes funny projects in the form of videos, photos, streetart, and more.PermalinkCommentsjason-eppink art video image photo homepage

ANTLRWorks: The ANTLR GUI Development Environment

2008 Oct 2, 9:37Cool graphical ANTLR IDE! They didn't have this the last time I used ANTLR. "ANTLRWorks is a novel grammar development environment for ANTLR v3 grammars written by Jean Bovet (with suggested use cases from Terence Parr). It combines an excellent grammar-aware editor with an interpreter for rapid prototyping and a language-agnostic debugger for isolating grammar errors. ANTLRWorks helps eliminate grammar nondeterminisms, one of the most difficult problems for beginners and experts alike, by highlighting nondeterministic paths in the syntax diagram associated with a grammar."PermalinkCommentsantlr ide graph grammar tool free download development opensource java

Dr. Horrible Link Roundup

2008 Aug 10, 3:33

Doctor Horrible's Sing Along Blog is an Internet only show you may have already watched and heard everything about. If you missed this somehow, its a musical by Joss Whedon (Buffy the Vampire Slayer, Firefly) staring Neil Patrick Harris as an aspiring super villian who can't get up the courage to talk to his laundromat crush. Its very funny, fairly geeky, and on the Internet so of course I've enjoyed it thoroughly and have some links to share. It surprised me how many blogs that I don't usually see posting the same things telling me about it: first on Eric's blog, then The Old New Thing, and even Penny-Arcade.

Dr. Horrible's again available online via Hulu with commercial interruption.

Check out the official fan site. They link to such things as the owner of Dr. Horrible's house. He had appeared on Monster House, a reality show about remaking people's homes like Monster Car or Pimp My Ride is about remaking folk's cars, and had his house turned into a evil scientist's lab. Consequently its a perfect fit for Dr. Horrible and in return the owner appears in one of the final scenes and in the credits as the 'Purple Pimp'. Apparently the purple suit is his. Also on his blog you can find out what's happened on that big chair that appears in the show. All I'll say about that is, good thing Neil Patrick Harris wears a lab coat while sitting on it.

At the recent Comic Con some attendees took video of the Dr. Horrible Comic Con panel (video clips contain spoilers) some of which I've grouped together. Besides the videos containing the creators and stars of the musical who are all hilarious (see Felicia Day's comment on twittering) there's also some excellent bits about a possible second installment and information on the impending DVD. To finish off this series of Dr. Horrible links check out this Venn Diagram of Felicia Day's work.

PermalinkCommentsdr. horrible doctor horrible humor link roundup

How to Clean Old Markings off a Whiteboard (super secret method)

2008 Aug 8, 2:51

Photo of Whiteboard, by Richard HoldenI've got a new office and I must clean off my inherited whiteboard. The previous owner left various diagrams, code snippets, etc. on for such a time that they can no longer be erased by conventional means: the whiteboard eraser is useless! I couldn't find any whiteboard cleaner either, but Ali told me the following secret. You can write over the dried on text with a normal dry erase marker. When you erase the new markings the old are erased as well. It sounds too fantastic, but believe me, its true! I don't know the brand or material of the whiteboard but the whiteboard markers are 'Expo, Bold Color Dry Erase'.

PermalinkCommentserase howto whiteboard office secret nontechnical

How Windows PowerShell Works

2008 Jun 8, 10:48Lots of diagrams and things about the PowerShell.PermalinkCommentsmsdn powershell shell microsoft windows reference
Older Entries Creative Commons License Some rights reserved.