pwa-helpers
Version:
Small helper methods or mixins to help you build web apps.
126 lines (116 loc) • 4.94 kB
HTML
<!--
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>PWA helpers demo</title>
<style>
body {
margin: 20px;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
max-width: 800px;
padding: 24px;
}
h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
}
code {
padding: 3px 5px;
margin: 0 2px;
white-space: nowrap;
background-color: #f8f8f8;
color: #E91E63;
border-radius: 3px;
font-size: 16px;
}
a:link, a:visited {
color: #3F51B5;
}
section {
margin-bottom: 44px;
}
redux-example {
border: 1px solid #ccc;
display: block;
padding: 20px;
}
</style>
<script>
// Redux assumes `process.env.NODE_ENV` exists in the ES module build.
// https://github.com/reactjs/redux/issues/2907
window.process = { env: { NODE_ENV: 'production' } };
</script>
</head>
<body>
<h1>PWA helpers: demos</h1>
<p>Small helper methods or mixins to help you build web apps.</p>
<section>
<h2>Router</h2>
<p>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. </p>
<p>
You're currently on <code id="pageSpan"></code></p>
<a href="/demo/">home</a> | <a href="/demo/page1">page1</a> | <a href="/demo/page2">page2</a> |
<a href="/demo/page3">page3</a>
</section>
<section>
<h2>Network state</h2>
You can get notified any time the network connectivity changes.
You are currently <code id="offlineSpan"></code>. If you turn off your
wifi (or change your status to "offline" in the Chrome DevTools), this value
will update.
</section>
<section>
<h2>SEO metadata</h2>
You can easily update your page's Open Graph and Twitter metadata. Click on this
<a href="/demo/update-meta">update metadata</a> link to update it; the page title
will change, and if you inspect the <code><head></code> node of this page,
a set of new meta entries have been added.
</section>
<section>
<h2>Media query watcher</h2>
You can get notified any time a specified media query matches.
You are currently in a <code id="screenSpan"></code> layout. If you
resize the window to have a width smaller than 600px, this value will update.
</section>
<section>
<h2>Test helpers</h2>
<h3>Axe-reporter</h3>
This is an <a href="https://github.com/dequelabs/axe-core">axe-core</a>
reporter that returns an <code>Error</code> containing every a11y
violation for an element. For example,
<button id="testButton">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>
</svg>
</button> is an icon button without a title, and here are the violations it has:
<pre id="axeReportOutput"></pre>
</section>
<section>
<h2>Redux helpers</h2>
<h3>Connect mixin & lazy reducers</h3>
<p>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.<p>
<redux-example></redux-example>
</section>
</body>
<script type="module" src="./index.js"></script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="./components/redux-example.js"></script>
<script src="https://unpkg.com/axe-core/axe.min.js"></script>
</html>