• Version 0.9.1
  • Published
  • 150 kB
  • No dependencies
  • BSD-3-Clause license


npm i pwa-helpers
yarn add pwa-helpers
pnpm add pwa-helpers


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



function connect

connect: <S>(store: Store<S>) => <T extends Constructor<CustomElement>>(baseElement: T) => { new (...args: any[]): (Anonymous class); prototype: connect<any>.(Anonymous function)<any>.(Anonymous class); } & T
  • 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.


    import { connect } from 'pwa-helpers/connect-mixin.js';

    class MyElement extends connect(store)(HTMLElement) { stateChanged(state) { this.textContent =; } }

function installMediaQueryWatcher

installMediaQueryWatcher: (
mediaQuery: string,
layoutChangedCallback: (mediaQueryMatches: boolean) => void
) => void;
  • 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).


    import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';

    installMediaQueryWatcher((min-width: 600px), (matches) => { console.log(matches ? 'wide screen' : 'narrow sreen'); });

function installOfflineWatcher

installOfflineWatcher: (
offlineUpdatedCallback: (isOffline: boolean) => void
) => void;
  • 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)


    import { installOfflineWatcher } from 'pwa-helpers/network.js';

    installOfflineWatcher((offline) => { console.log('You are ' + offline ? ' offline' : 'online'); });

function installRouter

installRouter: (
locationUpdatedCallback: (location: Location, event: Event | null) => void
) => void;
  • Basic router that calls a callback whenever the location is updated.


    import { installRouter } from 'pwa-helpers/router.js';

    installRouter((location) => handleNavigation(location));

    For example, if you're using this router in a Redux-connected component, you could dispatch an action in the callback:

    import { installRouter } from 'pwa-helpers/router.js'; import { navigate } from '../actions/app.js';

    installRouter((location) => store.dispatch(navigate(location)))

    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:

    window.history.pushState({}, '', '/new-route'); handleNavigation(window.location);

    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.

    installRouter((location, event) => { // Only scroll to top on link clicks, not popstate events. if (event && event.type === 'click') { window.scrollTo(0, 0); } handleNavigation(location); });

function lazyReducerEnhancer

lazyReducerEnhancer: (combineReducers: any) => StoreEnhancer<LazyStore>;
  • 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.


    import { combineReducers } from 'redux'; import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js'; import someReducer from './reducers/someReducer.js';

    export const store = createStore( (state, action) => state, compose(lazyReducerEnhancer(combineReducers)) );

    Then, in your page/element, you can lazy load a specific reducer with:

    store.addReducers({ someReducer });

function setMetaTag

setMetaTag: (attrName: string, attrValue: string, content: string) => void;
  • Utility method to create or update the content of a meta tag based on an attribute name/value pair.

    Example (in your top level element or document, or in the router callback):

    import { setMetaTag } from 'pwa-helpers/metadata.js';

    setMetaTag('name', 'twitter:card', 'summary');

    This would create the following meta tag in the head of the document (or update the content attribute if a meta tag with name="twitter:card" exists):

function updateMetadata

updateMetadata: ({
}: {
title?: string;
description?: string;
url?: string;
image?: string;
imageAlt?: string;
}) => void;
  • 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):

    import { updateMetadata } from 'pwa-helpers/metadata.js';

    updateMetadata({ title: 'My App - view 1', description: 'This is my sample app', url: window.location.href, image: '/assets/view1-hero.png' });

Package Files (7)

Dependencies (0)

No dependencies.

Dev Dependencies (9)

Peer Dependencies (0)

No peer dependencies.


To add a badge like this badgeto your package's README, use the codes available below.

You may also use to create a custom badge linking to

  • Markdown
  • HTML
    <a href=""><img src="" alt=""></a>