feat(test-app): add notification delivery indicator
- Add visual indicator when notification is received (shows for 30s) - Poll notification status every 5 seconds to detect recent deliveries - Add helpful message in test notification success about checking top of screen - Improve user feedback for notification testing workflow
This commit is contained in:
@@ -62,6 +62,11 @@
|
|||||||
<div id="pluginStatusContent" style="margin-top: 8px;">
|
<div id="pluginStatusContent" style="margin-top: 8px;">
|
||||||
Loading plugin status...
|
Loading plugin status...
|
||||||
</div>
|
</div>
|
||||||
|
<div id="notificationReceivedIndicator" style="margin-top: 8px; padding: 8px; background: rgba(0, 255, 0, 0.2); border-radius: 5px; display: none;">
|
||||||
|
<strong>🔔 Notification Received!</strong><br>
|
||||||
|
<span id="notificationReceivedTime"></span><br>
|
||||||
|
<small>Check the top of your screen for the notification banner</small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -232,7 +237,8 @@
|
|||||||
const notificationTimeReadable = notificationTime.toLocaleTimeString();
|
const notificationTimeReadable = notificationTime.toLocaleTimeString();
|
||||||
status.innerHTML = '✅ Notification scheduled!<br>' +
|
status.innerHTML = '✅ Notification scheduled!<br>' +
|
||||||
'📥 Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')<br>' +
|
'📥 Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')<br>' +
|
||||||
'🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')';
|
'🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')<br><br>' +
|
||||||
|
'<small>💡 When the notification fires, look for a banner at the <strong>top of your screen</strong>.</small>';
|
||||||
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
|
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
|
||||||
// Refresh plugin status display
|
// Refresh plugin status display
|
||||||
setTimeout(() => loadPluginStatus(), 500);
|
setTimeout(() => loadPluginStatus(), 500);
|
||||||
@@ -411,6 +417,39 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check for notification delivery periodically
|
||||||
|
function checkNotificationDelivery() {
|
||||||
|
if (!window.DailyNotification) return;
|
||||||
|
|
||||||
|
window.DailyNotification.getNotificationStatus()
|
||||||
|
.then(result => {
|
||||||
|
if (result.lastNotificationTime) {
|
||||||
|
const lastTime = new Date(result.lastNotificationTime);
|
||||||
|
const now = new Date();
|
||||||
|
const timeDiff = now - lastTime;
|
||||||
|
|
||||||
|
// If notification was received in the last 2 minutes, show indicator
|
||||||
|
if (timeDiff > 0 && timeDiff < 120000) {
|
||||||
|
const indicator = document.getElementById('notificationReceivedIndicator');
|
||||||
|
const timeSpan = document.getElementById('notificationReceivedTime');
|
||||||
|
|
||||||
|
if (indicator && timeSpan) {
|
||||||
|
indicator.style.display = 'block';
|
||||||
|
timeSpan.textContent = `Received at ${lastTime.toLocaleTimeString()}`;
|
||||||
|
|
||||||
|
// Hide after 30 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
indicator.style.display = 'none';
|
||||||
|
}, 30000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// Silently fail - this is just for visual feedback
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Load plugin status automatically on page load
|
// Load plugin status automatically on page load
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
console.log('Page loaded, loading plugin status...');
|
console.log('Page loaded, loading plugin status...');
|
||||||
@@ -419,6 +458,9 @@
|
|||||||
loadPluginStatus();
|
loadPluginStatus();
|
||||||
loadPermissionStatus();
|
loadPermissionStatus();
|
||||||
loadChannelStatus();
|
loadChannelStatus();
|
||||||
|
|
||||||
|
// Check for notification delivery every 5 seconds
|
||||||
|
setInterval(checkNotificationDelivery, 5000);
|
||||||
}, 500);
|
}, 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user