Hi Gwangtae Kim,

Thank you for reaching out.

This component was created for reactive applications, which don't have Local Storage capabilities.

We understand your use case is different. You have a mobile application distributed as a PWA. Your end-users access the PWA by typing the app's URL directly into the device's browser, which could lead to human error.

Instead of using this component, we suggest you create a custom error screen and make some configurations in Factory Configuration.

Here is a step-by-step guide with the implementation details:
1. In Service Studio, add a new screen called NotFound to your application. This page will be displayed when the user tries to access a page that does not exist.
2. Publish the app.
3. In a browser, access the Factory Configuration app, and go to Shared Configurations.
4. Create a new Shared Configuration with the following content. This sets the page you want to display when a 404 error is triggered.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" indent="yes" encoding="UTF-8"/>
    <!-- Define new Error page redirect string -->
    <xsl:param name="new404" select="'MyStore/NotFound'"/>
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="/configuration/system.webServer">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
            <httpErrors>
                <!-- Define new Error page -->
                <error statusCode="404" path="/MyStore/NotFound" subStatusCode="0" responseMode="Redirect"/>
            </httpErrors>
        </xsl:copy>
    </xsl:template>
    <!-- Change 404 redirect -->
    <xsl:template match="/configuration/system.web/customErrors/error/@redirect">
        <xsl:attribute name="redirect">
            <xsl:value-of select="$new404"/>
        </xsl:attribute>
    </xsl:template>
</xsl:stylesheet>
Note: please replace MyStore with your application's name.
5. In Factory Configuration, go to eSpaces.
6. Search and select your application from the list. In the dropdown box, select the shared configuration you've just created. Click on the “Associate Shared Configuration” button.
7. Republish your application in Service Studio or Service Center.
8. Test your application.

With this in place, end-users will be redirected to the NotFound screen when typing in the wrong URL, improving their user experience.

Please note that an HTTP 404 response status will not be returned, which could be a factor for SEO.

Please let us know if you have any question.

Hi Aravind. Thanks for your feedback. Would you please check the demo file now? Thanks.


Update: Aravind confirmed the demo file is working now.