Menu
Menu Sheet Overlay
Search
Search Sheet

Working with The Cookie Manager

    The Cookie Manager is a singleton class that manages cookies. It helps React components to be aware of changes in a cookie’s value.

    Why a Cookie Manager?

    Browser cookies are essentially a key-value store for the browser that is separated from the PWA. The PWA is a reactive application but there is no way to know when a cookie is updated at any given time. We introduced the Cookie Manager to help facilitate that.

    Setup

    import React, {Component} from 'react'
    import cookieManager from 'progressive-web-sdk/dist/utils/cookie-manager'
    
    const MY_COOKIE_NAME = 'my_cookie_name'
    
    class MyComponent extends Component {
        constructor(props) {
            super(props)
    
            this.state = {
                splitValue: cookieManager.get(MY_COOKIE_NAME)
            }
        }
    
        componentDidMount() {
            this.cookieSubscriber = cookieManager.subscribe(
                MY_COOKIE_NAME,
                (splitValue) => {
                    // This gets called when my_cookie_name is updated
                    // splitValue will be the new cookie value
                    // Make sure we don't setState when the new value is the same
                    // as the old value
                    if (this.state.splitValue !== splitValue) {
                        this.setState({splitValue})
                    }
                }
            )
        }
    
        componentWillUnmount() {
            // Stop getting notification when component gets unmount
            this.cookieSubscriber.unsubscribe()
        }
    
        render() {
            return (
                <div>{this.state.splitValue}</div>
            )
        }
    }
    

    The above setup allows a React component to listen for a particular cookie’s value.

    Triggering a cookie update

    Traditionally, browsers get updated cookie settings through a page refresh. However, this update mechanism is no longer available to single-page apps because page refreshes don’t happen. Sometimes you’ll still need to update cookies, usually to integrate with one of the following types of third-party scripts:

    To trigger a cookie update within your PWA, place the following code where appropriate:

    import cookieManager from 'progressive-web-sdk/dist/utils/cookie-manager'
    ...
        cookieManager.pollForAllCookieUpdate()
    ...
    

    An appropriate time to trigger this function would be when:

    Methods

    set(cookieName, cookieValue, domain, lifetime)

    Sets a cookie

    parameter type description
    cookieName String Name of the cookie
    cookieValue String Value of the cookie
    domain String Domain of the cookie
    lifetime Integer Lifetime duration in milliseconds to the future or leave it null for a session cookie

    Returns nothing

    get(cookieName, defaultValue)

    Get the cookie value if exist, otherwise return the default value

    parameter type description
    cookieName String Name of the cookie
    defaultValue String Default value of the cookie

    Returns String

    subscribe(cookieName, updateCallback)

    Subscribe to the specified cookie

    parameter type description
    cookieName String Name of the cookie
    updateCallback Function A callback when Cookie Manager detects an updated value for this cookie

    Returns CookieSubscriber

    Example

    import cookieManager from 'progressive-web-sdk/dist/utils/cookie-manager'
    
    // To listen for cookie value change
    const cookieSubscriber = cookieManager.subscribe(
        'cookie_name',
        (splitValue) => {
            // splitValue will be the new cookie value
        }
    )
    
    // To stop listening for cookie value change
    cookieSubscriber.unsubscribe()
    

    pollForAllCookieUpdate()

    Perform an update check on subscribed cookies. Cookie Manager will call the updateCallback for each cookie subscribers when the cookie in inquiry exists. It is up to each cookie subscriber to determine what to do when the updated cookie value is the same as the last cookie value.