When creating ScandiPWA compatibility for extensions it is best to reuse as much of the original code as possible. For example, you can call the original Magento module’s controllers in your FE. Sometimes controllers contain messages intended to be displayed to the user and it is often necessary to expose these messages to the FE in order to display them on the ScandiPWA theme.

These are the steps to access non-sensitive information from the BE that is not returned normally.

In ScandiPWA each row stored in the local storage contains data, createdAt, and expiration properties. The code below shows the structure of data saved to local storage for each entry and is taken from Util/BrowserDatabase/BrowserDatabase.ts (ScandiPWA core code):

/**
 * Save data to local storage
 * @param {Any} data The value to save to local storage
 * @param {String} location Name of the local storage
 * @param {Number} expiration Time to store entry (in seconds)
 * @return {Void}
 * @memberof BrowserDatabase
 */
setItem<T>(data: T, location: string, expiration?: number): void {
    localStorage.setItem(location, JSON.stringify({
        data,
        expiration,
        createdAt: Date.now(),
    }));
}

How an entry appears in Local Storage with ScandiPWA:

Controller PHP file

The first step is to create and encode a JSON object that satisfies the ScandiPWA BrowserDatabase format and contains the information we need to expose:

// Convert error message to ScandiPWA BrowserDatabase format
$localStorageResult = json_encode([
        'data' => [
            'error' => $error
        ],
        'createdAt' => time()
    ]);

Then set the body of the request that will be sent, to a script containing JS code used to add an entry in window.localStorage and redirect to the final URL:

/**
 * Local storage key
 */
const STORAGE_KEY = 'myExtensionError';

... 

// Set the error in the local storage and redirect to the final URL
$this
  ->getResponse()
  ->setBody(
    '<script>window.top.localStorage.setItem("' . SELF::STORAGE_KEY . '", JSON.stringify(' . $localStorageResult . '));
    window.top.location.href = "'. $finalUrl . '";</script>'
  );

FE Component Plugin

To access LocalStorage from ScandiPWA we use the BrowserDatabase component and its functions: getItem, deleteItem.

We can retrieve the stored information by plugging it into ScandiPWA’s Cart.dispatcher.js file and adding the following code to its updateInitialCartData function.

Note: You might wish to delete the data from local storage after using it. For example if it is an error message, you might want to delete that row in the local storage after displaying the error message especially if you have not specified an expiration timestamp on the data.

export const LOCAL_STORAGE_ERROR = 'myExtensionError';

...

const data = BrowserDatabase.getItem(LOCAL_STORAGE_ERROR);

if (data) {
		const { error } = data;

    dispatch(showNotification(NotificationType.ERROR, error));
    BrowserDatabase.deleteItem(LOCAL_STORAGE_ERROR);
}