page-metadata.md

page-metadata

Provide a way to change page metadata. like title, description.

How to use

Installation

npm install --save @dreamworld/pwa-helpers

Usage

Apply Mixin to your view-element Class.

//Import button-focus mixin
import pageMetadata from '@dreamworld/pwa-helpers/page-metadata.js'

//Import lit-element class
import { LitElement } from '@dreamworld/pwa-helpers/lit-element.js'

//Apply page-metadata mixin to lit-element class
class Dwpage extends pageMetadata(LitElement) {}

You must have to override _getPageMetadata method to return your page metadata.

//Import page-metadata mixin
import pageMetadata from '@dreamworld/pwa-helpers/page-metadata.js'

//Import lit-element class
import { LitElement } from '@dreamworld/pwa-helpers/lit-element.js'

//Apply focus-within mixin to lit-element class
class DwPage extends pageMetadata(LitElement) {

  /**
   * Override this method to return your page metadata.
   * If not overriden, this behavior doesn't work, silently. And won't log any error either.
   */
  _getPageMetadata () {
    return {
      title: 'My App - view 1',
      description: 'This is my sample app',
      url: window.location.href,
      image: '/assets/view1-hero.png'
    }
  }
}

How it works

This mixin will work on updated life-cycle methods of LitElement.

When current page metadata is defined in _getPageMetadata and previous and new page metadata is not same and page is active then change page metadata change using updateMetadata method of lit-element pwa-helapers.

When page is in-active then reset private instance property __pageMetaData is reset, because next time page is active then set page metadata.