PWA helpers: demos

Small helper methods or mixins to help you build web apps.

Router

Here are some links, to demostrate the basic router. Clicking on the link will not do a page refresh, and will update the displayed page in the store.

You're currently on

home | page1 | page2 | page3

Network state

You can get notified any time the network connectivity changes. You are currently . If you turn off your wifi (or change your status to "offline" in the Chrome DevTools), this value will update.

SEO metadata

You can easily update your page's Open Graph and Twitter metadata. Click on this update metadata link to update it; the page title will change, and if you inspect the <head> node of this page, a set of new meta entries have been added.

Media query watcher

You can get notified any time a specified media query matches. You are currently in a layout. If you resize the window to have a width smaller than 600px, this value will update.

Test helpers

Axe-reporter

This is an axe-core reporter that returns an Error containing every a11y violation for an element. For example, is an icon button without a title, and here are the violations it has:

Redux helpers

Connect mixin & lazy reducers

This is a demo of a Redux connected custom element, that contains another non-connected element. The parent, connected element is responsible for updating the state in the store, and syncing it back to the non-connected element.