-
π DailyNotification Plugin Test
-
Test the DailyNotification plugin functionality
-
Build: 2025-10-14 05:00:00 UTC
+
+
Plugin Status
+
+ βοΈ Plugin Settings:
Not configured
+ π Native Fetcher:
Not configured
+ π Notifications:
Checking...
+ β° Exact Alarms:
Checking...
+ π’ Channel:
Checking...
+
+ Loading plugin status...
+
+
+
-
-
-
-
π Notification Tests
-
-
-
-
-
π Permission Management
-
-
-
-
π’ Channel Management
-
-
-
+
+
Ready to test...
@@ -88,37 +84,26 @@
window.DailyNotification = window.Capacitor.Plugins.DailyNotification;
// Define functions immediately and attach to window
- function testPlugin() {
- console.log('testPlugin called');
- const status = document.getElementById('status');
- status.innerHTML = 'Testing plugin...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
-
- try {
- if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- return;
- }
- // Plugin is loaded and ready
- status.innerHTML = 'Plugin is loaded and ready!';
- status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
- } catch (error) {
- status.innerHTML = `Plugin test failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- }
- }
function configurePlugin() {
console.log('configurePlugin called');
const status = document.getElementById('status');
+ const configStatus = document.getElementById('configStatus');
+ const fetcherStatus = document.getElementById('fetcherStatus');
+
status.innerHTML = 'Configuring plugin...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
+ // Update top status to show configuring
+ configStatus.innerHTML = 'β³ Configuring...';
+ fetcherStatus.innerHTML = 'β³ Waiting...';
+
try {
if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ configStatus.innerHTML = 'β Plugin unavailable';
+ fetcherStatus.innerHTML = 'β Plugin unavailable';
return;
}
@@ -132,6 +117,9 @@
})
.then(() => {
console.log('Plugin settings configured, now configuring native fetcher...');
+ // Update top status
+ configStatus.innerHTML = 'β
Configured';
+
// Configure native fetcher with demo credentials
// Note: DemoNativeFetcher uses hardcoded mock data, so this is optional
// but demonstrates the API. In production, this would be real credentials.
@@ -142,48 +130,62 @@
});
})
.then(() => {
- status.innerHTML = 'Plugin configured successfully!
β
Plugin settings
β
Native fetcher (optional for demo)';
+ // Update top status
+ fetcherStatus.innerHTML = 'β
Configured';
+
+ // Update bottom status for user feedback
+ status.innerHTML = 'Plugin configured successfully!';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
})
.catch(error => {
+ // Update top status with error
+ if (configStatus.innerHTML.includes('Configuring')) {
+ configStatus.innerHTML = 'β Failed';
+ }
+ if (fetcherStatus.innerHTML.includes('Waiting') || fetcherStatus.innerHTML.includes('Configuring')) {
+ fetcherStatus.innerHTML = 'β Failed';
+ }
+
status.innerHTML = `Configuration failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
});
} catch (error) {
+ configStatus.innerHTML = 'β Error';
+ fetcherStatus.innerHTML = 'β Error';
status.innerHTML = `Configuration failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}
}
- function checkStatus() {
- console.log('checkStatus called');
- const status = document.getElementById('status');
- status.innerHTML = 'Checking plugin status...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
+ function loadPluginStatus() {
+ console.log('loadPluginStatus called');
+ const pluginStatusContent = document.getElementById('pluginStatusContent');
+ const statusCard = document.getElementById('statusCard');
try {
if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ pluginStatusContent.innerHTML = 'β DailyNotification plugin not available';
+ statusCard.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return;
}
window.DailyNotification.getNotificationStatus()
.then(result => {
const nextTime = result.nextNotificationTime ? new Date(result.nextNotificationTime).toLocaleString() : 'None scheduled';
- status.innerHTML = `Plugin Status:
- Enabled: ${result.isEnabled}
- Next Notification: ${nextTime}
- Pending: ${result.pending}
- Settings: ${JSON.stringify(result.settings)}`;
- status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
+ const hasSchedules = result.isEnabled || (result.pending && result.pending > 0);
+ const statusIcon = hasSchedules ? 'β
' : 'βΈοΈ';
+ pluginStatusContent.innerHTML = `${statusIcon} Active Schedules: ${hasSchedules ? 'Yes' : 'No'}
+ π
Next Notification: ${nextTime}
+ β³ Pending: ${result.pending || 0}`;
+ statusCard.style.background = hasSchedules ?
+ 'rgba(0, 255, 0, 0.15)' : 'rgba(255, 255, 255, 0.1)'; // Green if active, light gray if none
})
.catch(error => {
- status.innerHTML = `Status check failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ pluginStatusContent.innerHTML = `β οΈ Status check failed: ${error.message}`;
+ statusCard.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
});
} catch (error) {
- status.innerHTML = `Status check failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ pluginStatusContent.innerHTML = `β οΈ Status check failed: ${error.message}`;
+ statusCard.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}
}
@@ -211,8 +213,8 @@
// Test the notification method directly
console.log('Testing notification scheduling...');
const now = new Date();
- const notificationTime = new Date(now.getTime() + 600000); // 10 minutes from now
- const prefetchTime = new Date(now.getTime() + 300000); // 5 minutes from now
+ const notificationTime = new Date(now.getTime() + 240000); // 4 minutes from now
+ const prefetchTime = new Date(now.getTime() + 120000); // 2 minutes from now (2 min before notification)
const notificationTimeString = notificationTime.getHours().toString().padStart(2, '0') + ':' +
notificationTime.getMinutes().toString().padStart(2, '0');
const prefetchTimeString = prefetchTime.getHours().toString().padStart(2, '0') + ':' +
@@ -232,10 +234,22 @@
'π₯ Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')
' +
'π Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
+ // Refresh plugin status display
+ setTimeout(() => loadPluginStatus(), 500);
})
.catch(error => {
- status.innerHTML = `Notification failed: ${error.message}`;
+ // Check if this is an exact alarm permission error
+ if (error.code === 'EXACT_ALARM_PERMISSION_REQUIRED' ||
+ error.message.includes('Exact alarm permission') ||
+ error.message.includes('Alarms & reminders')) {
+ status.innerHTML = 'β οΈ Exact Alarm Permission Required
' +
+ 'Settings opened automatically.
' +
+ 'Please enable "Allow exact alarms" and return to try again.';
+ status.style.background = 'rgba(255, 165, 0, 0.3)'; // Orange background
+ } else {
+ status.innerHTML = `β Notification failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ }
});
} catch (error) {
status.innerHTML = `Notification test failed: ${error.message}`;
@@ -243,130 +257,8 @@
}
}
- function scheduleNotification() {
- console.log('scheduleNotification called');
- const status = document.getElementById('status');
- status.innerHTML = 'Scheduling notification...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
-
- try {
- if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- return;
- }
-
- // Schedule notification for 10 minutes from now (allows 5 min prefetch to fire)
- const now = new Date();
- const notificationTime = new Date(now.getTime() + 600000); // 10 minutes from now
- const prefetchTime = new Date(now.getTime() + 300000); // 5 minutes from now
- const notificationTimeString = notificationTime.getHours().toString().padStart(2, '0') + ':' +
- notificationTime.getMinutes().toString().padStart(2, '0');
- const prefetchTimeString = prefetchTime.getHours().toString().padStart(2, '0') + ':' +
- prefetchTime.getMinutes().toString().padStart(2, '0');
-
- window.DailyNotification.scheduleDailyNotification({
- time: notificationTimeString,
- title: 'Scheduled Notification',
- body: 'This notification was scheduled 10 minutes ago!',
- sound: true,
- priority: 'default'
- })
- .then(() => {
- const prefetchTimeReadable = prefetchTime.toLocaleTimeString();
- const notificationTimeReadable = notificationTime.toLocaleTimeString();
- status.innerHTML = 'β
Notification scheduled!
' +
- 'π₯ Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')
' +
- 'π Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')';
- status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
- })
- .catch(error => {
- status.innerHTML = `Scheduling failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- });
- } catch (error) {
- status.innerHTML = `Scheduling test failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- }
- }
-
- function showReminder() {
- console.log('showReminder called');
- const status = document.getElementById('status');
- status.innerHTML = 'Showing reminder...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
-
- try {
- if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- return;
- }
-
- // Schedule daily reminder using scheduleDailyReminder
- const now = new Date();
- const reminderTime = new Date(now.getTime() + 10000); // 10 seconds from now
- const timeString = reminderTime.getHours().toString().padStart(2, '0') + ':' +
- reminderTime.getMinutes().toString().padStart(2, '0');
-
- window.DailyNotification.scheduleDailyReminder({
- id: 'daily-reminder-test',
- title: 'Daily Reminder',
- body: 'Don\'t forget to check your daily notifications!',
- time: timeString,
- sound: true,
- vibration: true,
- priority: 'default',
- repeatDaily: false // Just for testing
- })
- .then(() => {
- status.innerHTML = 'Daily reminder scheduled for ' + timeString + '!';
- status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
- })
- .catch(error => {
- status.innerHTML = `Reminder failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- });
- } catch (error) {
- status.innerHTML = `Reminder test failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- }
- }
// Permission management functions
- function checkPermissions() {
- console.log('checkPermissions called');
- const status = document.getElementById('status');
- status.innerHTML = 'Checking permissions...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
-
- try {
- if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- return;
- }
-
- window.DailyNotification.checkPermissionStatus()
- .then(result => {
- status.innerHTML = `Permission Status:
- Notifications: ${result.notificationsEnabled ? 'β
' : 'β'}
- Exact Alarm: ${result.exactAlarmEnabled ? 'β
' : 'β'}
- Wake Lock: ${result.wakeLockEnabled ? 'β
' : 'β'}
- All Granted: ${result.allPermissionsGranted ? 'β
' : 'β'}`;
- status.style.background = result.allPermissionsGranted ?
- 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 165, 0, 0.3)'; // Green or orange
- })
- .catch(error => {
- status.innerHTML = `Permission check failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- });
- } catch (error) {
- status.innerHTML = `Permission check failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- }
- }
-
function requestPermissions() {
console.log('requestPermissions called');
const status = document.getElementById('status');
@@ -385,9 +277,10 @@
status.innerHTML = 'Permission request completed! Check your device settings if needed.';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
- // Check permissions again after request
+ // Refresh permission and channel status display after request
setTimeout(() => {
- checkPermissions();
+ loadPermissionStatus();
+ loadChannelStatus();
}, 1000);
})
.catch(error => {
@@ -400,91 +293,29 @@
}
}
- function openExactAlarmSettings() {
- console.log('openExactAlarmSettings called');
- const status = document.getElementById('status');
- status.innerHTML = 'Opening exact alarm settings...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
+ function loadChannelStatus() {
+ const channelStatus = document.getElementById('channelStatus');
try {
if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- return;
- }
-
- window.DailyNotification.openExactAlarmSettings()
- .then(() => {
- status.innerHTML = 'Exact alarm settings opened! Please enable "Allow exact alarms" and return to the app.';
- status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
- })
- .catch(error => {
- status.innerHTML = `Failed to open exact alarm settings: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- });
- } catch (error) {
- status.innerHTML = `Failed to open exact alarm settings: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- }
- }
-
- function checkChannelStatus() {
- const status = document.getElementById('status');
- status.innerHTML = 'Checking channel status...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
-
- try {
- if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ channelStatus.innerHTML = 'β Plugin unavailable';
return;
}
window.DailyNotification.isChannelEnabled()
.then(result => {
const importanceText = getImportanceText(result.importance);
- status.innerHTML = `Channel Status: ${result.enabled ? 'Enabled' : 'Disabled'} (${importanceText})`;
- status.style.background = result.enabled ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)';
- })
- .catch(error => {
- status.innerHTML = `Channel check failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- });
- } catch (error) {
- status.innerHTML = `Channel check failed: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- }
- }
-
- function openChannelSettings() {
- const status = document.getElementById('status');
- status.innerHTML = 'Opening channel settings...';
- status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
-
- try {
- if (!window.DailyNotification) {
- status.innerHTML = 'DailyNotification plugin not available';
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
- return;
- }
-
- window.DailyNotification.openChannelSettings()
- .then(result => {
- if (result.opened) {
- status.innerHTML = 'Channel settings opened! Please enable notifications and return to the app.';
- status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
+ if (result.enabled) {
+ channelStatus.innerHTML = `β
Enabled (${importanceText})`;
} else {
- status.innerHTML = 'Could not open channel settings (may not be available on this device)';
- status.style.background = 'rgba(255, 165, 0, 0.3)'; // Orange background
+ channelStatus.innerHTML = `β Disabled (${importanceText})`;
}
})
.catch(error => {
- status.innerHTML = `Failed to open channel settings: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ channelStatus.innerHTML = 'β οΈ Error';
});
} catch (error) {
- status.innerHTML = `Failed to open channel settings: ${error.message}`;
- status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
+ channelStatus.innerHTML = 'β οΈ Error';
}
}
@@ -549,26 +380,53 @@
}
// Attach to window object
- window.testPlugin = testPlugin;
window.configurePlugin = configurePlugin;
- window.checkStatus = checkStatus;
window.testNotification = testNotification;
- window.scheduleNotification = scheduleNotification;
- window.showReminder = showReminder;
- window.checkPermissions = checkPermissions;
window.requestPermissions = requestPermissions;
- window.openExactAlarmSettings = openExactAlarmSettings;
- window.checkChannelStatus = checkChannelStatus;
- window.openChannelSettings = openChannelSettings;
window.checkComprehensiveStatus = checkComprehensiveStatus;
+ function loadPermissionStatus() {
+ const notificationPermStatus = document.getElementById('notificationPermStatus');
+ const exactAlarmPermStatus = document.getElementById('exactAlarmPermStatus');
+
+ try {
+ if (!window.DailyNotification) {
+ notificationPermStatus.innerHTML = 'β Plugin unavailable';
+ exactAlarmPermStatus.innerHTML = 'β Plugin unavailable';
+ return;
+ }
+
+ window.DailyNotification.checkPermissionStatus()
+ .then(result => {
+ notificationPermStatus.innerHTML = result.notificationsEnabled ? 'β
Granted' : 'β Not granted';
+ exactAlarmPermStatus.innerHTML = result.exactAlarmEnabled ? 'β
Granted' : 'β Not granted';
+ })
+ .catch(error => {
+ notificationPermStatus.innerHTML = 'β οΈ Error';
+ exactAlarmPermStatus.innerHTML = 'β οΈ Error';
+ });
+ } catch (error) {
+ notificationPermStatus.innerHTML = 'β οΈ Error';
+ exactAlarmPermStatus.innerHTML = 'β οΈ Error';
+ }
+ }
+
+ // Load plugin status automatically on page load
+ window.addEventListener('load', () => {
+ console.log('Page loaded, loading plugin status...');
+ // Small delay to ensure Capacitor is ready
+ setTimeout(() => {
+ loadPluginStatus();
+ loadPermissionStatus();
+ loadChannelStatus();
+ }, 500);
+ });
+
+
+
console.log('Functions attached to window:', {
- testPlugin: typeof window.testPlugin,
configurePlugin: typeof window.configurePlugin,
- checkStatus: typeof window.checkStatus,
- testNotification: typeof window.testNotification,
- scheduleNotification: typeof window.scheduleNotification,
- showReminder: typeof window.showReminder
+ testNotification: typeof window.testNotification
});
diff --git a/www/index.html b/www/index.html
index be40a1c..48908a4 100644
--- a/www/index.html
+++ b/www/index.html
@@ -432,8 +432,8 @@
scheduledTime.setDate(scheduledTime.getDate() + 1);
}
- // Calculate prefetch time (5 minutes before notification)
- const prefetchTime = new Date(scheduledTime.getTime() - 300000); // 5 minutes
+ // Calculate prefetch time (2 minutes before notification)
+ const prefetchTime = new Date(scheduledTime.getTime() - 120000); // 2 minutes
const prefetchTimeReadable = prefetchTime.toLocaleTimeString();
const notificationTimeReadable = scheduledTime.toLocaleTimeString();
const prefetchTimeString = prefetchTime.getHours().toString().padStart(2, '0') + ':' +