app.js

const taskInput = document.getElementById('task-input');
const addTaskButton = document.getElementById('add-task');
const pushNotificationButton = document.getElementById('push-notification');
const taskList = document.getElementById('task-list');

// Load tasks from local storage
const loadTasks = () => {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => {
        addTaskToList(task);
    });
};

// Add task to the list
const addTaskToList = (task) => {
    const li = document.createElement('li');
    li.innerHTML = `${task} <button class="delete-task">Delete</button>`;
    taskList.appendChild(li);
    li.querySelector('.delete-task').addEventListener('click', () => {
        li.remove();
        deleteTask(task);
    });
};

// Add task event listener
addTaskButton.addEventListener('click', () => {
    const task = taskInput.value.trim();
    if (task) {
        addTaskToList(task);
        saveTask(task);
        taskInput.value = '';
    }
});

// Save task to local storage
const saveTask = (task) => {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.push(task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
};

// Delete task from local storage
const deleteTask = (task) => {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    const updatedTasks = tasks.filter(t => t !== task);
    localStorage.setItem('tasks', JSON.stringify(updatedTasks));
};

// Initialize application
loadTasks();

// Register service worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('Service Worker Registered'))
        .catch(error => console.error('Service Worker Registration Failed:', error));
}

// Request Notification Permission
if ('Notification' in window && 'serviceWorker' in navigator) {
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            console.log('Notification permission granted.');
        } else {
            console.log('Notification permission denied.');
        }
    });
}

// Send Push Notification
pushNotificationButton.addEventListener('click', () => {
    navigator.serviceWorker.ready.then(registration => {
        registration.showNotification('New Task Added!', {
            body: 'Check out your to-do list!',
            icon: 'icon.png'
        });
    });
});

// Background Sync
if ('serviceWorker' in navigator && 'SyncManager' in window) {
    navigator.serviceWorker.ready.then(registration => {
        document.addEventListener('offline', () => {
            console.log('You are offline. Changes will sync when you are back online.');
        });

        document.addEventListener('online', () => {
            registration.sync.register('sync-tasks')
                .then(() => console.log('Sync registered.'))
                .catch(error => console.error('Sync registration failed:', error));
        });
    });
}

// Lazy Loading of Images
const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.onload = () => img.classList.add('lazy-loaded');
            observer.unobserve(img);
        }
    });
});
lazyImages.forEach(img => observer.observe(img));