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:33PermalinkCommentsdr. 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.