pwa-helpers
Small helper methods or mixins to help build a PWA, and reduce the boilerplate you might have to write. There are many different ways in which you could write these helpers; use these if you want a simple starting point.
Basic helpers
These are vanilla JavaScript methods that can be used regardless of which frameworks or libraries your application is written in.
router.js
Basic router that calls a callback whenever the location is updated.
Example:
; ;
For example, if you're using this router in a Redux-connected component, you could dispatch an action in the callback:
;; ;
If you need to force a navigation to a new location programmatically, you can do so by pushing a new state using the History API, and then manually calling the callback with the new location:
windowhistory;;
Optionally, you can use the second argument to read the event that caused the navigation. For example, you may want to scroll to top only after a link click.
;
network.js
Utility method that calls a callback whenever the network connectivity of the app changes.
The callback should take a boolean parameter (with true
meaning
the network is offline, and false
meaning online)
Example:
; ;
metadata.js
Utility method that updates the page's open graph and Twitter card metadata. It takes an object as a parameter with the following properties: title | description | url | image.
If the url
is not specified, window.location.href
will be used; for
all other properties, if they aren't specified, then that metadata field will not
be set.
Example (in your top level element or document, or in the router callback):
; ;
media-query.js
Utility method that calls a callback whenever a media-query matches in response
to the viewport size changing. The callback should take a boolean parameter
(with true
meaning the media query is matched).
Example:
; ;
Test helpers
Utility methods to be used inside of testing frameworks, to reduce some testing boilerplate.
axe-report.js
This is an axe-core reporter that returns an
Error containing every a11y violation for an element. Use this if you want to
include axe-core
in automated Mocha tests, etc.
Example (in a Mocha test):
;; ;
Redux helpers
These utility methods are useful if your application is using Redux for state management.
connect-mixin.js
This is a JavaScript mixin that you can use to connect a Custom Element base
class to a Redux store. The stateChanged(state)
method will be called when
the state is updated.
Example:
; storeHTMLElement { thistextContent = statedatacount; }
lazy-reducer-enhancer.js
A Redux store enhancer that lets you lazy-install reducers after the store has booted up. Use this if your application lazy-loads routes that are connected to a Redux store.
Example:
;;; const store = ;
Then, in your page/element, you can lazy load a specific reducer with:
store;