Implementing Back Navigation Without TAU Library in Tizen Web Application

Original Created Sep 03, 2018 | Regeneration Apr 22, 2026

Question

I'm developing a Tizen web application and need to implement back navigation functionality without using the entire TAU library due to UI compatibility issues. The standard window.history.back() method doesn't seem to work as expected.

I've tried using location.replace() but it's not efficient. Here's my current back.js implementation:

(function() {
    window.addEventListener('tizenhwkey', function(ev) {
        console.log('Back button pressed');
        if(ev.keyName === "back") {
            var activePopup = document.querySelector('.ui-popup-active'),
                page = document.getElementsByClassName('ui-page-active')[0],
                pageid = page ? page.id : "";
            
            screen.lockOrientation("portrait-primary");
            
            if(pageid === "mainpageList" && !activePopup) {
                try {
                    tizen.application.getCurrentApplication().exit();
                } catch (ignore) {
                }
            } else {
                window.history.back();
            }
        }
    });
})();

Is there a better way to implement back navigation without relying on TAU?

Answer

Problem Understanding

The user wants to implement back navigation functionality in a Tizen web application without using the full TAU library due to UI conflicts with other frameworks (like Bootstrap). The current implementation uses hardware key detection but seeks a more robust solution.

Solution Methods

Partial TAU Usage: You can include only the necessary TAU components for back navigation while excluding UI-related parts.
Custom History Management: Implement your own page history tracking system.
Alternative Navigation Approach: Use a different method for page transitions while maintaining back functionality.

Code Examples

Option 1: Minimal TAU Implementation

<!-- Only include the navigation-related parts of TAU -->
<script src="/lib/tau/mobile/js/tau.min.js" data-tau-no-history="true"></script>

Option 2: Custom History Management

let pageHistory = [];

function navigateTo(pageId) {
    const currentPage = document.querySelector('.ui-page-active');
    if(currentPage) {
        pageHistory.push(currentPage.id);
    }
    // Your page transition logic here
}

function goBack() {
    if(pageHistory.length > 0) {
        const previousPageId = pageHistory.pop();
        // Transition to previous page
    } else {
        tizen.application.getCurrentApplication().exit();
    }
}

window.addEventListener('tizenhwkey', function(ev) {
    if(ev.keyName === "back") {
        goBack();
    }
});

Additional Tips

When mixing UI frameworks, be aware of potential CSS conflicts
Test your navigation thoroughly on actual Tizen devices
Consider using the Tizen Web Simulator for debugging navigation issues
For more information on Tizen navigation, refer to the official documentation at Samsung Tizen OS Developer Portal