{"id":13527638,"url":"https://github.com/Polymer/pwa-helpers","last_synced_at":"2025-04-01T09:31:56.147Z","repository":{"id":28245713,"uuid":"117755205","full_name":"Polymer/pwa-helpers","owner":"Polymer","description":"Small helper methods or mixins to help you build web apps. ","archived":true,"fork":false,"pushed_at":"2022-02-11T00:45:11.000Z","size":523,"stargazers_count":438,"open_issues_count":7,"forks_count":48,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-05-19T03:09:53.828Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Polymer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2018-01-16T23:23:50.000Z","updated_at":"2024-05-16T22:17:35.000Z","dependencies_parsed_at":"2022-09-16T01:35:41.611Z","dependency_job_id":null,"html_url":"https://github.com/Polymer/pwa-helpers","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Fpwa-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Fpwa-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Fpwa-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Fpwa-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polymer","download_url":"https://codeload.github.com/Polymer/pwa-helpers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246126382,"owners_count":20727590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:01:55.050Z","updated_at":"2025-04-01T09:31:55.606Z","avatar_url":"https://github.com/Polymer.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","others"],"sub_categories":[],"readme":"# pwa-helpers\n\n[![Build Status](https://travis-ci.org/Polymer/pwa-helpers.svg?branch=master)](https://travis-ci.org/Polymer/pwa-helpers)\n[![Published on npm](https://img.shields.io/npm/v/pwa-helpers.svg)](https://www.npmjs.com/package/pwa-helpers)\n\nSmall helper methods or mixins to help build a PWA,\nand reduce the boilerplate you might have to write. There are many different\nways in which you could write these helpers; use these if you want a simple\nstarting point.\n\n## Basic helpers\nThese are vanilla JavaScript methods that can be used regardless of which\nframeworks or libraries your application is written in.\n\n### `router.js`\nBasic router that calls a callback whenever the location is updated.\n\nExample:\n\n```js\nimport { installRouter } from 'pwa-helpers/router.js';\n\ninstallRouter((location) =\u003e handleNavigation(location));\n```\n\nFor example, if you're using this router in a Redux-connected component,\nyou could dispatch an action in the callback:\n\n```js\nimport { installRouter } from 'pwa-helpers/router.js';\nimport { navigate } from '../actions/app.js';\n\ninstallRouter((location) =\u003e store.dispatch(navigate(location)));\n```\n\nIf you need to force a navigation to a new location programmatically, you can\ndo so by pushing a new state using the History API, and then manually\ncalling the callback with the new location:\n\n```js\nwindow.history.pushState({}, '', '/new-route');\nhandleNavigation(window.location);\n```\n\nOptionally, you can use the second argument to read the event that caused the\nnavigation. For example, you may want to scroll to top only after a link click.\n\n```js\ninstallRouter((location, event) =\u003e {\n  // Only scroll to top on link clicks, not popstate events.\n  if (event \u0026\u0026 event.type === 'click') {\n    window.scrollTo(0, 0);\n  }\n  handleNavigation(location);\n});\n```\n\n### `network.js`\nUtility method that calls a callback whenever the network connectivity of the app changes.\nThe callback should take a boolean parameter (with `true` meaning\nthe network is offline, and `false` meaning online)\n\nExample:\n\n```js\nimport { installOfflineWatcher } from 'pwa-helpers/network.js';\n\ninstallOfflineWatcher((offline) =\u003e {\n  console.log('You are ' + offline ? ' offline' : 'online');\n});\n```\n\n### `metadata.js`\nUtility method that updates the page's open graph and Twitter card metadata.\nIt takes an object as a parameter with the following properties:\ntitle | description | url | image.\n\nIf the `url` is not specified, `window.location.href` will be used; for\nall other properties, if they aren't specified, then that metadata field will not\nbe set.\n\nExample (in your top level element or document, or in the router callback):\n\n```js\nimport { updateMetadata } from 'pwa-helpers/metadata.js';\n\nupdateMetadata({\n  title: 'My App - view 1',\n  description: 'This is my sample app',\n  url: window.location.href,\n  image: '/assets/view1-hero.png'\n});\n```\n\n### `media-query.js`\nUtility method that calls a callback whenever a media-query matches in response\nto the viewport size changing. The callback should take a boolean parameter\n(with `true` meaning the media query is matched).\n\nExample:\n\n```js\nimport { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';\n\ninstallMediaQueryWatcher(`(min-width: 600px)`, (matches) =\u003e {\n  console.log(matches ? 'wide screen' : 'narrow sreen');\n});\n```\n\n## Test helpers\nUtility methods to be used inside of testing frameworks, to reduce some testing boilerplate.\n\n### `axe-report.js`\nThis is an [axe-core](https://github.com/dequelabs/axe-core) reporter that returns an\nError containing every a11y violation for an element. Use this if you want to\ninclude `axe-core` in automated Mocha tests, etc.\n\nExample (in a Mocha test):\n\n```js\nimport 'axe-core/axe.min.js';\nimport { axeReport } from 'pwa-helpers/axe-report.js';\n\ndescribe('button', function() {\n  it('is accessible', function() {\n    const button = document.createElement('button');\n    button.textContent = 'click this';  // Test should fail without this line.\n    return axeReport(button);\n  });\n});\n```\n\n## Redux helpers\nThese utility methods are useful if your application is using Redux for state management.\n\n### `connect-mixin.js`\nThis is a JavaScript mixin that you can use to connect a Custom Element base\nclass to a Redux store. The `stateChanged(state)` method will be called when\nthe state is updated.\n\nExample:\n\n```js\nimport { connect } from 'pwa-helpers/connect-mixin.js';\n\nclass MyElement extends connect(store)(HTMLElement) {\n  stateChanged(state) {\n    this.textContent = state.data.count.toString();\n  }\n}\n```\n\n### `lazy-reducer-enhancer.js`\nA Redux store enhancer that lets you lazy-install reducers after the store\nhas booted up. Use this if your application lazy-loads routes that are connected\nto a Redux store.\n\nExample:\n\n```js\nimport { combineReducers } from 'redux';\nimport { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';\nimport someReducer from './reducers/someReducer.js';\n\nexport const store = createStore(\n  (state, action) =\u003e state,\n  compose(lazyReducerEnhancer(combineReducers))\n);\n```\n\nThen, in your page/element, you can lazy load a specific reducer with:\n\n```js\nstore.addReducers({\n  someReducer\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPolymer%2Fpwa-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPolymer%2Fpwa-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPolymer%2Fpwa-helpers/lists"}