Michael Schiemer
55a330b223
- Add DISCOVERY_LOG_LEVEL=debug - Add DISCOVERY_SHOW_PROGRESS=true - Temporary changes for debugging InitializerProcessor fixes on production
1530 lines
55 KiB
PHP
1530 lines
55 KiB
PHP
<main class="demo-container">
|
||
<section class="hero-section">
|
||
<h1>🚀 API Manager Demo</h1>
|
||
<p class="hero-description">Zentrale Verwaltung aller Web APIs für moderne Browser-Features</p>
|
||
</section>
|
||
|
||
<div class="demo-grid">
|
||
<!-- API Manager Status -->
|
||
<section class="demo-card">
|
||
<h2>📊 API Manager Status</h2>
|
||
<button class="btn btn-primary" onclick="initializeAPIManager()">Initialize API Manager</button>
|
||
<button class="btn btn-secondary" onclick="getAPIManagerStatus()">Get Status</button>
|
||
<div id="api-manager-status" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Observer APIs -->
|
||
<section class="demo-card">
|
||
<h2>👀 Observer APIs</h2>
|
||
|
||
<div class="button-group">
|
||
<h3>Intersection Observer</h3>
|
||
<button class="btn btn-primary" onclick="createIntersectionObserver()">Create Observer</button>
|
||
<button class="btn btn-secondary" onclick="addObserverTarget()">Add Target</button>
|
||
<div class="observer-target" id="intersection-target" style="height: 100px; background: #f0f0f0; margin: 10px 0; padding: 20px; text-align: center;">
|
||
Target Element - Scroll to observe
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Resize Observer</h3>
|
||
<button class="btn btn-primary" onclick="createResizeObserver()">Create Resize Observer</button>
|
||
<button class="btn btn-secondary" onclick="testResize()">Test Resize</button>
|
||
<div class="resizable-target" id="resize-target" style="width: 200px; height: 100px; background: #e0e0ff; margin: 10px 0; padding: 10px; resize: both; overflow: auto;">
|
||
Resize me to see the observer in action
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Mutation Observer</h3>
|
||
<button class="btn btn-primary" onclick="createMutationObserver()">Create Mutation Observer</button>
|
||
<button class="btn btn-secondary" onclick="triggerMutation()">Trigger Mutation</button>
|
||
<div id="mutation-target" style="background: #ffe0e0; margin: 10px 0; padding: 10px;">
|
||
Original content - will be modified
|
||
</div>
|
||
</div>
|
||
|
||
<div id="observer-results" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Media APIs -->
|
||
<section class="demo-card">
|
||
<h2>📹 Media APIs</h2>
|
||
|
||
<div class="button-group">
|
||
<h3>Camera & Microphone</h3>
|
||
<button class="btn btn-primary" onclick="requestCameraAccess()">Request Camera</button>
|
||
<button class="btn btn-primary" onclick="requestMicrophoneAccess()">Request Microphone</button>
|
||
<button class="btn btn-success" onclick="startVideoCall()">Start Video Call</button>
|
||
<button class="btn btn-danger" onclick="stopMediaStreams()">Stop All Streams</button>
|
||
<video id="camera-preview" width="200" height="150" autoplay muted style="background: #000; display: none; margin: 10px 0;"></video>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Screen Sharing</h3>
|
||
<button class="btn btn-primary" onclick="startScreenShare()">Start Screen Share</button>
|
||
<button class="btn btn-secondary" onclick="stopScreenShare()">Stop Screen Share</button>
|
||
<video id="screen-preview" width="300" height="200" autoplay muted style="background: #000; display: none; margin: 10px 0;"></video>
|
||
</div>
|
||
|
||
<div id="media-results" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Storage APIs -->
|
||
<section class="demo-card">
|
||
<h2>💾 Storage APIs</h2>
|
||
|
||
<div class="button-group">
|
||
<h3>IndexedDB</h3>
|
||
<button class="btn btn-primary" onclick="initializeIndexedDB()">Initialize IndexedDB</button>
|
||
<button class="btn btn-secondary" onclick="storeDataIndexedDB()">Store Test Data</button>
|
||
<button class="btn btn-secondary" onclick="retrieveDataIndexedDB()">Retrieve Data</button>
|
||
<button class="btn btn-outline" onclick="clearIndexedDB()">Clear Database</button>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Cache API</h3>
|
||
<button class="btn btn-primary" onclick="initializeCacheAPI()">Initialize Cache</button>
|
||
<button class="btn btn-secondary" onclick="cacheResources()">Cache Resources</button>
|
||
<button class="btn btn-secondary" onclick="retrieveCachedData()">Retrieve Cached</button>
|
||
<button class="btn btn-outline" onclick="clearCache()">Clear Cache</button>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Local Storage</h3>
|
||
<button class="btn btn-primary" onclick="testLocalStorage()">Test Local Storage</button>
|
||
<button class="btn btn-secondary" onclick="testSessionStorage()">Test Session Storage</button>
|
||
<button class="btn btn-outline" onclick="getStorageInfo()">Get Storage Info</button>
|
||
</div>
|
||
|
||
<div id="storage-results" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Device APIs -->
|
||
<section class="demo-card">
|
||
<h2>📱 Device APIs</h2>
|
||
|
||
<div class="button-group">
|
||
<h3>Geolocation</h3>
|
||
<button class="btn btn-primary" onclick="getCurrentLocation()">Get Current Location</button>
|
||
<button class="btn btn-secondary" onclick="watchPosition()">Watch Position</button>
|
||
<button class="btn btn-outline" onclick="stopWatchingPosition()">Stop Watching</button>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Device Sensors</h3>
|
||
<button class="btn btn-primary" onclick="getDeviceMotion()">Device Motion</button>
|
||
<button class="btn btn-secondary" onclick="getDeviceOrientation()">Device Orientation</button>
|
||
<button class="btn btn-secondary" onclick="testVibration()">Test Vibration</button>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Network Information</h3>
|
||
<button class="btn btn-primary" onclick="getNetworkInfo()">Get Network Info</button>
|
||
<button class="btn btn-secondary" onclick="monitorConnection()">Monitor Connection</button>
|
||
</div>
|
||
|
||
<div id="device-results" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Web Animations API -->
|
||
<section class="demo-card">
|
||
<h2>✨ Web Animations API</h2>
|
||
|
||
<div class="button-group">
|
||
<h3>Basic Animations</h3>
|
||
<button class="btn btn-primary" onclick="createBasicAnimation()">Basic Animation</button>
|
||
<button class="btn btn-secondary" onclick="createKeyframeAnimation()">Keyframe Animation</button>
|
||
<button class="btn btn-secondary" onclick="createComplexAnimation()">Complex Animation</button>
|
||
<div class="animation-target" id="animation-box" style="width: 100px; height: 100px; background: #4CAF50; margin: 20px auto; border-radius: 8px;"></div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Animation Controls</h3>
|
||
<button class="btn btn-success" onclick="playAnimations()">Play All</button>
|
||
<button class="btn btn-warning" onclick="pauseAnimations()">Pause All</button>
|
||
<button class="btn btn-danger" onclick="cancelAnimations()">Cancel All</button>
|
||
<button class="btn btn-outline" onclick="getAnimationStatus()">Get Status</button>
|
||
</div>
|
||
|
||
<div id="animation-results" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Worker APIs -->
|
||
<section class="demo-card">
|
||
<h2>⚙️ Worker APIs</h2>
|
||
|
||
<div class="button-group">
|
||
<h3>Web Worker</h3>
|
||
<button class="btn btn-primary" onclick="createWebWorker()">Create Web Worker</button>
|
||
<button class="btn btn-secondary" onclick="sendWorkerMessage()">Send Message</button>
|
||
<button class="btn btn-outline" onclick="terminateWorker()">Terminate Worker</button>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Service Worker</h3>
|
||
<button class="btn btn-primary" onclick="registerServiceWorker()">Register Service Worker</button>
|
||
<button class="btn btn-secondary" onclick="updateServiceWorker()">Update Service Worker</button>
|
||
<button class="btn btn-outline" onclick="getServiceWorkerStatus()">Get SW Status</button>
|
||
</div>
|
||
|
||
<div id="worker-results" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Performance APIs -->
|
||
<section class="demo-card">
|
||
<h2>⚡ Performance APIs</h2>
|
||
|
||
<div class="button-group">
|
||
<h3>Performance Monitoring</h3>
|
||
<button class="btn btn-primary" onclick="measurePerformance()">Measure Performance</button>
|
||
<button class="btn btn-secondary" onclick="getPerformanceEntries()">Get Performance Entries</button>
|
||
<button class="btn btn-secondary" onclick="createPerformanceMark()">Create Performance Mark</button>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<h3>Resource Timing</h3>
|
||
<button class="btn btn-primary" onclick="getResourceTiming()">Get Resource Timing</button>
|
||
<button class="btn btn-secondary" onclick="measureNavigationTiming()">Navigation Timing</button>
|
||
<button class="btn btn-outline" onclick="clearPerformanceData()">Clear Performance Data</button>
|
||
</div>
|
||
|
||
<div id="performance-results" class="results-box"></div>
|
||
</section>
|
||
|
||
<!-- Comprehensive Test -->
|
||
<section class="demo-card full-width">
|
||
<h2>🧪 Comprehensive API Test</h2>
|
||
<div class="button-group">
|
||
<button class="btn btn-success" onclick="runFullAPITest()">Run Full API Test Suite</button>
|
||
<button class="btn btn-primary" onclick="createIntegratedWorkflow()">Create Integrated Workflow</button>
|
||
<button class="btn btn-outline" onclick="generateAPIReport()">Generate API Report</button>
|
||
</div>
|
||
<div id="comprehensive-results" class="results-box"></div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<style>
|
||
.demo-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1rem;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
}
|
||
|
||
.hero-section {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
padding: 2rem;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.hero-section h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: 1.2rem;
|
||
opacity: 0.9;
|
||
margin: 0;
|
||
}
|
||
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.demo-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.demo-card.full-width {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.demo-card h2 {
|
||
color: #333;
|
||
margin-bottom: 1.5rem;
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.demo-card h3 {
|
||
color: #555;
|
||
margin: 1.5rem 0 1rem 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.button-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.button-group:last-of-type {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 0.75rem 1rem;
|
||
margin: 0.25rem 0.5rem 0.25rem 0;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
min-width: 120px;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #545b62;
|
||
}
|
||
|
||
.btn-success {
|
||
background: #28a745;
|
||
color: white;
|
||
}
|
||
|
||
.btn-success:hover {
|
||
background: #1e7e34;
|
||
}
|
||
|
||
.btn-warning {
|
||
background: #ffc107;
|
||
color: #212529;
|
||
}
|
||
|
||
.btn-warning:hover {
|
||
background: #d39e00;
|
||
}
|
||
|
||
.btn-danger {
|
||
background: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background: #bd2130;
|
||
}
|
||
|
||
.btn-info {
|
||
background: #17a2b8;
|
||
color: white;
|
||
}
|
||
|
||
.btn-info:hover {
|
||
background: #117a8b;
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: #666;
|
||
border: 2px solid #ddd;
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: #f8f9fa;
|
||
border-color: #aaa;
|
||
}
|
||
|
||
.results-box {
|
||
margin-top: 1rem;
|
||
padding: 1rem;
|
||
background: #f8f9fa;
|
||
border-radius: 6px;
|
||
border: 1px solid #dee2e6;
|
||
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
||
font-size: 0.85rem;
|
||
line-height: 1.5;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.results-box:empty {
|
||
display: none;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.input-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.input-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
color: #555;
|
||
}
|
||
|
||
.input-group input {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 2px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.input-group input:focus {
|
||
outline: none;
|
||
border-color: #007bff;
|
||
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
|
||
}
|
||
|
||
.observer-target,
|
||
.resizable-target,
|
||
.animation-target {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.observer-target.observed {
|
||
background: #d4edda !important;
|
||
border: 2px solid #28a745;
|
||
}
|
||
|
||
.resizable-target.resizing {
|
||
background: #d1ecf1 !important;
|
||
border: 2px solid #17a2b8;
|
||
}
|
||
|
||
.status-indicator {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
font-weight: bold;
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.status-supported {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
|
||
.status-unsupported {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
}
|
||
|
||
.status-granted {
|
||
background: #d1ecf1;
|
||
color: #0c5460;
|
||
}
|
||
|
||
/* Responsive Design */
|
||
@media (max-width: 768px) {
|
||
.demo-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.demo-container {
|
||
padding: 1rem 0.5rem;
|
||
}
|
||
|
||
.demo-card {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.btn {
|
||
min-width: 100px;
|
||
font-size: 0.8rem;
|
||
padding: 0.6rem 0.8rem;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// Initialize variables
|
||
let apiManager = null;
|
||
let observers = {
|
||
intersection: null,
|
||
resize: null,
|
||
mutation: null
|
||
};
|
||
let mediaStreams = [];
|
||
let animations = [];
|
||
let workers = {
|
||
web: null,
|
||
service: null
|
||
};
|
||
let positionWatcher = null;
|
||
|
||
// Wait for DOM and framework to load
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Check if API Manager is available
|
||
if (typeof window.API !== 'undefined') {
|
||
displayResult('api-manager-status', '✅ API Manager is available and ready to use');
|
||
} else {
|
||
displayResult('api-manager-status', '⚠️ API Manager not yet loaded. Click "Initialize" to try again.');
|
||
}
|
||
});
|
||
|
||
// Utility function to display results
|
||
function displayResult(containerId, message, type = 'info') {
|
||
const container = document.getElementById(containerId);
|
||
if (!container) return;
|
||
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const colorClass = type === 'error' ? 'color: #dc3545' :
|
||
type === 'success' ? 'color: #28a745' :
|
||
type === 'warning' ? 'color: #ffc107' : 'color: #17a2b8';
|
||
|
||
container.innerHTML += `<div style="${colorClass}; margin-bottom: 0.5rem;">
|
||
[${timestamp}] ${message}
|
||
</div>`;
|
||
container.scrollTop = container.scrollHeight;
|
||
}
|
||
|
||
function clearResults(containerId) {
|
||
const container = document.getElementById(containerId);
|
||
if (container) container.innerHTML = '';
|
||
}
|
||
|
||
// API Manager Functions
|
||
function initializeAPIManager() {
|
||
try {
|
||
if (window.API) {
|
||
apiManager = window.API;
|
||
displayResult('api-manager-status', '✅ API Manager initialized successfully', 'success');
|
||
displayResult('api-manager-status', JSON.stringify({
|
||
hasPermissions: !!apiManager.permissions,
|
||
hasBiometric: !!apiManager.biometric,
|
||
hasObserver: !!apiManager.observer,
|
||
hasMedia: !!apiManager.media,
|
||
hasStorage: !!apiManager.storage,
|
||
hasDevice: !!apiManager.device,
|
||
hasAnimation: !!apiManager.animation,
|
||
hasWorker: !!apiManager.worker,
|
||
hasPerformance: !!apiManager.performance
|
||
}, null, 2));
|
||
} else {
|
||
displayResult('api-manager-status', '❌ API Manager not available in window.API', 'error');
|
||
}
|
||
} catch (error) {
|
||
displayResult('api-manager-status', `❌ Error initializing API Manager: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function getAPIManagerStatus() {
|
||
try {
|
||
if (!apiManager) {
|
||
displayResult('api-manager-status', '⚠️ API Manager not initialized', 'warning');
|
||
return;
|
||
}
|
||
|
||
const status = {
|
||
initialized: true,
|
||
modules: Object.keys(apiManager).filter(key => typeof apiManager[key] === 'object'),
|
||
config: apiManager.config || 'No config available'
|
||
};
|
||
|
||
displayResult('api-manager-status', JSON.stringify(status, null, 2), 'success');
|
||
} catch (error) {
|
||
displayResult('api-manager-status', `❌ Error getting status: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// Observer API Functions
|
||
function createIntersectionObserver() {
|
||
try {
|
||
if (!apiManager?.observer) {
|
||
displayResult('observer-results', '❌ Observer API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const target = document.getElementById('intersection-target');
|
||
if (!target) {
|
||
displayResult('observer-results', '❌ Target element not found', 'error');
|
||
return;
|
||
}
|
||
|
||
observers.intersection = apiManager.observer.intersection([target], (entries) => {
|
||
entries.forEach(entry => {
|
||
const isVisible = entry.isIntersecting;
|
||
entry.element.classList.toggle('observed', isVisible);
|
||
displayResult('observer-results', `📍 Intersection: ${isVisible ? 'Visible' : 'Hidden'} (ratio: ${entry.intersectionRatio.toFixed(2)})`);
|
||
});
|
||
}, {
|
||
threshold: [0, 0.5, 1.0],
|
||
rootMargin: '0px'
|
||
});
|
||
|
||
displayResult('observer-results', '✅ Intersection Observer created and observing target', 'success');
|
||
} catch (error) {
|
||
displayResult('observer-results', `❌ Error creating Intersection Observer: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function addObserverTarget() {
|
||
displayResult('observer-results', '📝 Scroll up/down to see the intersection observer in action');
|
||
}
|
||
|
||
function createResizeObserver() {
|
||
try {
|
||
if (!apiManager?.observer) {
|
||
displayResult('observer-results', '❌ Observer API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const target = document.getElementById('resize-target');
|
||
if (!target) {
|
||
displayResult('observer-results', '❌ Resize target not found', 'error');
|
||
return;
|
||
}
|
||
|
||
observers.resize = apiManager.observer.resize([target], (entries) => {
|
||
entries.forEach(entry => {
|
||
const { width, height } = entry.dimensions;
|
||
entry.element.classList.add('resizing');
|
||
setTimeout(() => entry.element.classList.remove('resizing'), 300);
|
||
displayResult('observer-results', `📐 Resize: ${Math.round(width)}x${Math.round(height)}px`);
|
||
});
|
||
});
|
||
|
||
displayResult('observer-results', '✅ Resize Observer created and observing target', 'success');
|
||
} catch (error) {
|
||
displayResult('observer-results', `❌ Error creating Resize Observer: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function testResize() {
|
||
const target = document.getElementById('resize-target');
|
||
if (target) {
|
||
const newWidth = Math.random() * 300 + 150;
|
||
const newHeight = Math.random() * 200 + 100;
|
||
target.style.width = `${newWidth}px`;
|
||
target.style.height = `${newHeight}px`;
|
||
displayResult('observer-results', `🔄 Programmatically resized to ${Math.round(newWidth)}x${Math.round(newHeight)}px`);
|
||
}
|
||
}
|
||
|
||
function createMutationObserver() {
|
||
try {
|
||
if (!apiManager?.observer) {
|
||
displayResult('observer-results', '❌ Observer API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const target = document.getElementById('mutation-target');
|
||
if (!target) {
|
||
displayResult('observer-results', '❌ Mutation target not found', 'error');
|
||
return;
|
||
}
|
||
|
||
observers.mutation = apiManager.observer.mutation(target, (mutations) => {
|
||
mutations.forEach(mutation => {
|
||
displayResult('observer-results', `🔄 Mutation: ${mutation.type} on ${mutation.target.tagName || 'text'}`);
|
||
});
|
||
}, {
|
||
childList: true,
|
||
attributes: true,
|
||
subtree: true,
|
||
characterData: true
|
||
});
|
||
|
||
displayResult('observer-results', '✅ Mutation Observer created and observing target', 'success');
|
||
} catch (error) {
|
||
displayResult('observer-results', `❌ Error creating Mutation Observer: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function triggerMutation() {
|
||
const target = document.getElementById('mutation-target');
|
||
if (target) {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
target.innerHTML = `Modified content at ${timestamp}`;
|
||
target.setAttribute('data-modified', timestamp);
|
||
}
|
||
}
|
||
|
||
// Media API Functions
|
||
async function requestCameraAccess() {
|
||
try {
|
||
if (!apiManager?.media) {
|
||
displayResult('media-results', '❌ Media API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const stream = await apiManager.media.getUserMedia({ video: true });
|
||
mediaStreams.push(stream);
|
||
|
||
const video = document.getElementById('camera-preview');
|
||
video.srcObject = stream;
|
||
video.style.display = 'block';
|
||
|
||
displayResult('media-results', '✅ Camera access granted and preview started', 'success');
|
||
} catch (error) {
|
||
displayResult('media-results', `❌ Camera access failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function requestMicrophoneAccess() {
|
||
try {
|
||
if (!apiManager?.media) {
|
||
displayResult('media-results', '❌ Media API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const stream = await apiManager.media.getUserMedia({ audio: true });
|
||
mediaStreams.push(stream);
|
||
|
||
displayResult('media-results', '✅ Microphone access granted', 'success');
|
||
} catch (error) {
|
||
displayResult('media-results', `❌ Microphone access failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function startVideoCall() {
|
||
try {
|
||
if (!apiManager?.media) {
|
||
displayResult('media-results', '❌ Media API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const stream = await apiManager.media.getUserMedia({
|
||
video: { width: 1280, height: 720 },
|
||
audio: true
|
||
});
|
||
mediaStreams.push(stream);
|
||
|
||
const video = document.getElementById('camera-preview');
|
||
video.srcObject = stream;
|
||
video.style.display = 'block';
|
||
|
||
displayResult('media-results', '✅ Video call stream started with audio/video', 'success');
|
||
} catch (error) {
|
||
displayResult('media-results', `❌ Video call failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function startScreenShare() {
|
||
try {
|
||
if (!apiManager?.media) {
|
||
displayResult('media-results', '❌ Media API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const stream = await apiManager.media.getDisplayMedia({ video: true });
|
||
mediaStreams.push(stream);
|
||
|
||
const video = document.getElementById('screen-preview');
|
||
video.srcObject = stream;
|
||
video.style.display = 'block';
|
||
|
||
displayResult('media-results', '✅ Screen sharing started', 'success');
|
||
} catch (error) {
|
||
displayResult('media-results', `❌ Screen sharing failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function stopScreenShare() {
|
||
const video = document.getElementById('screen-preview');
|
||
if (video.srcObject) {
|
||
video.srcObject.getTracks().forEach(track => track.stop());
|
||
video.srcObject = null;
|
||
video.style.display = 'none';
|
||
displayResult('media-results', '✅ Screen sharing stopped', 'success');
|
||
}
|
||
}
|
||
|
||
function stopMediaStreams() {
|
||
mediaStreams.forEach(stream => {
|
||
stream.getTracks().forEach(track => track.stop());
|
||
});
|
||
mediaStreams = [];
|
||
|
||
document.getElementById('camera-preview').style.display = 'none';
|
||
document.getElementById('screen-preview').style.display = 'none';
|
||
|
||
displayResult('media-results', '✅ All media streams stopped', 'success');
|
||
}
|
||
|
||
// Storage API Functions
|
||
async function initializeIndexedDB() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
await apiManager.storage.indexedDB.open('APITestDB', 1, (db, oldVersion) => {
|
||
if (oldVersion < 1) {
|
||
const store = db.createObjectStore('testData', { keyPath: 'id', autoIncrement: true });
|
||
store.createIndex('timestamp', 'timestamp', { unique: false });
|
||
}
|
||
});
|
||
|
||
displayResult('storage-results', '✅ IndexedDB initialized successfully', 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ IndexedDB initialization failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function storeDataIndexedDB() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const testData = {
|
||
message: 'Hello from IndexedDB!',
|
||
timestamp: Date.now(),
|
||
randomValue: Math.random()
|
||
};
|
||
|
||
await apiManager.storage.indexedDB.set('testData', testData);
|
||
displayResult('storage-results', `✅ Data stored in IndexedDB: ${JSON.stringify(testData)}`, 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ IndexedDB store failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function retrieveDataIndexedDB() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const data = await apiManager.storage.indexedDB.getAll('testData');
|
||
displayResult('storage-results', `✅ Retrieved from IndexedDB: ${JSON.stringify(data, null, 2)}`, 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ IndexedDB retrieval failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function clearIndexedDB() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
await apiManager.storage.indexedDB.clear('testData');
|
||
displayResult('storage-results', '✅ IndexedDB cleared', 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ IndexedDB clear failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function initializeCacheAPI() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
await apiManager.storage.cache.open('api-test-cache');
|
||
displayResult('storage-results', '✅ Cache API initialized', 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ Cache API initialization failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function cacheResources() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const cache = await apiManager.storage.cache.open('api-test-cache');
|
||
await cache.addAll([
|
||
'/css/admin.css',
|
||
'/js/chat.js'
|
||
]);
|
||
|
||
displayResult('storage-results', '✅ Resources cached successfully', 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ Resource caching failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function retrieveCachedData() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const cache = await apiManager.storage.cache.open('api-test-cache');
|
||
const keys = await cache.keys();
|
||
|
||
displayResult('storage-results', `✅ Cached resources: ${keys.map(req => req.url).join(', ')}`, 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ Cache retrieval failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function clearCache() {
|
||
try {
|
||
if (!apiManager?.storage) {
|
||
displayResult('storage-results', '❌ Storage API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
await caches.delete('api-test-cache');
|
||
displayResult('storage-results', '✅ Cache cleared', 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ Cache clear failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function testLocalStorage() {
|
||
try {
|
||
const testData = { message: 'Hello from localStorage!', timestamp: Date.now() };
|
||
localStorage.setItem('apiTest', JSON.stringify(testData));
|
||
const retrieved = JSON.parse(localStorage.getItem('apiTest'));
|
||
displayResult('storage-results', `✅ LocalStorage test: ${JSON.stringify(retrieved)}`, 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ LocalStorage test failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function testSessionStorage() {
|
||
try {
|
||
const testData = { message: 'Hello from sessionStorage!', timestamp: Date.now() };
|
||
sessionStorage.setItem('apiTest', JSON.stringify(testData));
|
||
const retrieved = JSON.parse(sessionStorage.getItem('apiTest'));
|
||
displayResult('storage-results', `✅ SessionStorage test: ${JSON.stringify(retrieved)}`, 'success');
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ SessionStorage test failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function getStorageInfo() {
|
||
try {
|
||
if ('storage' in navigator && 'estimate' in navigator.storage) {
|
||
const estimate = await navigator.storage.estimate();
|
||
displayResult('storage-results', `📊 Storage: ${(estimate.usage / 1024 / 1024).toFixed(2)}MB used / ${(estimate.quota / 1024 / 1024).toFixed(2)}MB total`, 'success');
|
||
} else {
|
||
displayResult('storage-results', '❌ Storage estimation not supported', 'error');
|
||
}
|
||
} catch (error) {
|
||
displayResult('storage-results', `❌ Storage info failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// Device API Functions
|
||
async function getCurrentLocation() {
|
||
try {
|
||
if (!apiManager?.device) {
|
||
displayResult('device-results', '❌ Device API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const position = await apiManager.device.geolocation.getCurrent();
|
||
const { latitude, longitude, accuracy } = position;
|
||
|
||
displayResult('device-results', `📍 Location: ${latitude.toFixed(6)}, ${longitude.toFixed(6)} (±${accuracy}m)`, 'success');
|
||
} catch (error) {
|
||
displayResult('device-results', `❌ Geolocation failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function watchPosition() {
|
||
try {
|
||
if (!apiManager?.device) {
|
||
displayResult('device-results', '❌ Device API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const watcher = apiManager.device.geolocation.watch(
|
||
(position) => {
|
||
if (position.error) {
|
||
displayResult('device-results', `❌ Position watch error: ${position.error.message}`, 'error');
|
||
} else {
|
||
displayResult('device-results', `👀 Watching: ${position.latitude.toFixed(6)}, ${position.longitude.toFixed(6)} (±${position.accuracy}m)`);
|
||
}
|
||
}
|
||
);
|
||
positionWatcher = watcher;
|
||
|
||
displayResult('device-results', '✅ Started watching position', 'success');
|
||
} catch (error) {
|
||
displayResult('device-results', `❌ Position watch failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function stopWatchingPosition() {
|
||
if (positionWatcher) {
|
||
positionWatcher.stop();
|
||
positionWatcher = null;
|
||
displayResult('device-results', '✅ Stopped watching position', 'success');
|
||
}
|
||
}
|
||
|
||
function getDeviceMotion() {
|
||
if ('DeviceMotionEvent' in window) {
|
||
const handler = (event) => {
|
||
const acc = event.accelerationIncludingGravity;
|
||
if (acc) {
|
||
displayResult('device-results', `📱 Motion: x:${acc.x?.toFixed(2)}, y:${acc.y?.toFixed(2)}, z:${acc.z?.toFixed(2)}`);
|
||
window.removeEventListener('devicemotion', handler);
|
||
}
|
||
};
|
||
|
||
window.addEventListener('devicemotion', handler);
|
||
setTimeout(() => window.removeEventListener('devicemotion', handler), 5000);
|
||
displayResult('device-results', '✅ Listening for device motion (5s)...', 'success');
|
||
} else {
|
||
displayResult('device-results', '❌ Device Motion not supported', 'error');
|
||
}
|
||
}
|
||
|
||
function getDeviceOrientation() {
|
||
if ('DeviceOrientationEvent' in window) {
|
||
const handler = (event) => {
|
||
displayResult('device-results', `🧭 Orientation: α:${event.alpha?.toFixed(1)}°, β:${event.beta?.toFixed(1)}°, γ:${event.gamma?.toFixed(1)}°`);
|
||
window.removeEventListener('deviceorientation', handler);
|
||
};
|
||
|
||
window.addEventListener('deviceorientation', handler);
|
||
setTimeout(() => window.removeEventListener('deviceorientation', handler), 5000);
|
||
displayResult('device-results', '✅ Listening for device orientation (5s)...', 'success');
|
||
} else {
|
||
displayResult('device-results', '❌ Device Orientation not supported', 'error');
|
||
}
|
||
}
|
||
|
||
function testVibration() {
|
||
if ('vibrate' in navigator) {
|
||
navigator.vibrate([200, 100, 200]);
|
||
displayResult('device-results', '✅ Vibration triggered', 'success');
|
||
} else {
|
||
displayResult('device-results', '❌ Vibration not supported', 'error');
|
||
}
|
||
}
|
||
|
||
function getNetworkInfo() {
|
||
if ('connection' in navigator) {
|
||
const conn = navigator.connection;
|
||
displayResult('device-results', `🌐 Network: ${conn.effectiveType}, ${conn.downlink}Mbps, rtt:${conn.rtt}ms`, 'success');
|
||
} else {
|
||
displayResult('device-results', '❌ Network Information API not supported', 'error');
|
||
}
|
||
}
|
||
|
||
function monitorConnection() {
|
||
const updateStatus = () => {
|
||
const status = navigator.onLine ? 'Online' : 'Offline';
|
||
displayResult('device-results', `🔌 Connection: ${status}`);
|
||
};
|
||
|
||
updateStatus();
|
||
window.addEventListener('online', updateStatus);
|
||
window.addEventListener('offline', updateStatus);
|
||
|
||
displayResult('device-results', '✅ Monitoring connection status', 'success');
|
||
}
|
||
|
||
// Web Animations API Functions
|
||
function createBasicAnimation() {
|
||
try {
|
||
if (!apiManager?.animation) {
|
||
displayResult('animation-results', '❌ Animation API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const target = document.getElementById('animation-box');
|
||
const animation = apiManager.animation.animate(target, [
|
||
{ transform: 'translateX(0px)', backgroundColor: '#4CAF50' },
|
||
{ transform: 'translateX(200px)', backgroundColor: '#2196F3' },
|
||
{ transform: 'translateX(0px)', backgroundColor: '#4CAF50' }
|
||
], {
|
||
duration: 2000,
|
||
easing: 'ease-in-out'
|
||
});
|
||
|
||
animations.push(animation);
|
||
displayResult('animation-results', '✅ Basic animation created and started', 'success');
|
||
} catch (error) {
|
||
displayResult('animation-results', `❌ Basic animation failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function createKeyframeAnimation() {
|
||
try {
|
||
if (!apiManager?.animation) {
|
||
displayResult('animation-results', '❌ Animation API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const target = document.getElementById('animation-box');
|
||
const animation = apiManager.animation.animate(target, [
|
||
{ transform: 'scale(1) rotate(0deg)', borderRadius: '8px' },
|
||
{ transform: 'scale(1.5) rotate(180deg)', borderRadius: '50%' },
|
||
{ transform: 'scale(1) rotate(360deg)', borderRadius: '8px' }
|
||
], {
|
||
duration: 3000,
|
||
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||
iterations: 2
|
||
});
|
||
|
||
animations.push(animation);
|
||
displayResult('animation-results', '✅ Keyframe animation created', 'success');
|
||
} catch (error) {
|
||
displayResult('animation-results', `❌ Keyframe animation failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function createComplexAnimation() {
|
||
try {
|
||
if (!apiManager?.animation) {
|
||
displayResult('animation-results', '❌ Animation API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const target = document.getElementById('animation-box');
|
||
|
||
// Multiple simultaneous animations
|
||
const moveAnimation = apiManager.animation.animate(target, [
|
||
{ transform: 'translateY(0px)' },
|
||
{ transform: 'translateY(-100px)' },
|
||
{ transform: 'translateY(0px)' }
|
||
], {
|
||
duration: 2000,
|
||
easing: 'ease-out'
|
||
});
|
||
|
||
const colorAnimation = apiManager.animation.animate(target, [
|
||
{ backgroundColor: '#4CAF50' },
|
||
{ backgroundColor: '#FF9800' },
|
||
{ backgroundColor: '#E91E63' },
|
||
{ backgroundColor: '#4CAF50' }
|
||
], {
|
||
duration: 2500,
|
||
easing: 'linear'
|
||
});
|
||
|
||
animations.push(moveAnimation, colorAnimation);
|
||
displayResult('animation-results', '✅ Complex multi-animation created', 'success');
|
||
} catch (error) {
|
||
displayResult('animation-results', `❌ Complex animation failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function playAnimations() {
|
||
try {
|
||
animations.forEach(animation => {
|
||
if (animation.playState === 'paused' || animation.playState === 'finished') {
|
||
animation.play();
|
||
}
|
||
});
|
||
displayResult('animation-results', `✅ Playing ${animations.length} animations`, 'success');
|
||
} catch (error) {
|
||
displayResult('animation-results', `❌ Play animations failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function pauseAnimations() {
|
||
try {
|
||
animations.forEach(animation => {
|
||
if (animation.playState === 'running') {
|
||
animation.pause();
|
||
}
|
||
});
|
||
displayResult('animation-results', `✅ Paused ${animations.length} animations`, 'success');
|
||
} catch (error) {
|
||
displayResult('animation-results', `❌ Pause animations failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function cancelAnimations() {
|
||
try {
|
||
animations.forEach(animation => animation.cancel());
|
||
animations = [];
|
||
displayResult('animation-results', '✅ All animations cancelled', 'success');
|
||
} catch (error) {
|
||
displayResult('animation-results', `❌ Cancel animations failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function getAnimationStatus() {
|
||
try {
|
||
const statuses = animations.map((anim, index) => `#${index + 1}: ${anim.playState}`);
|
||
displayResult('animation-results', `📊 Animation Status: ${statuses.join(', ')}`, 'success');
|
||
} catch (error) {
|
||
displayResult('animation-results', `❌ Get animation status failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// Worker API Functions
|
||
function createWebWorker() {
|
||
try {
|
||
if (!apiManager?.worker) {
|
||
displayResult('worker-results', '❌ Worker API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
// Create an inline worker for demonstration
|
||
const workerCode = `
|
||
self.onmessage = function(e) {
|
||
const result = e.data * e.data;
|
||
self.postMessage({ original: e.data, squared: result });
|
||
};
|
||
`;
|
||
|
||
const blob = new Blob([workerCode], { type: 'application/javascript' });
|
||
const workerUrl = URL.createObjectURL(blob);
|
||
|
||
workers.web = new Worker(workerUrl);
|
||
workers.web.onmessage = (e) => {
|
||
displayResult('worker-results', `📨 Worker response: ${e.data.original}² = ${e.data.squared}`);
|
||
};
|
||
|
||
displayResult('worker-results', '✅ Web Worker created successfully', 'success');
|
||
URL.revokeObjectURL(workerUrl);
|
||
} catch (error) {
|
||
displayResult('worker-results', `❌ Web Worker creation failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function sendWorkerMessage() {
|
||
try {
|
||
if (!workers.web) {
|
||
displayResult('worker-results', '❌ No Web Worker available', 'error');
|
||
return;
|
||
}
|
||
|
||
const randomNumber = Math.floor(Math.random() * 100);
|
||
workers.web.postMessage(randomNumber);
|
||
displayResult('worker-results', `📤 Sent to worker: ${randomNumber}`, 'success');
|
||
} catch (error) {
|
||
displayResult('worker-results', `❌ Send worker message failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function terminateWorker() {
|
||
try {
|
||
if (workers.web) {
|
||
workers.web.terminate();
|
||
workers.web = null;
|
||
displayResult('worker-results', '✅ Web Worker terminated', 'success');
|
||
} else {
|
||
displayResult('worker-results', '❌ No Web Worker to terminate', 'error');
|
||
}
|
||
} catch (error) {
|
||
displayResult('worker-results', `❌ Worker termination failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function registerServiceWorker() {
|
||
try {
|
||
if (!apiManager?.worker || !('serviceWorker' in navigator)) {
|
||
displayResult('worker-results', '❌ Service Worker not supported', 'error');
|
||
return;
|
||
}
|
||
|
||
navigator.serviceWorker.register('/sw.js')
|
||
.then(registration => {
|
||
displayResult('worker-results', '✅ Service Worker registered successfully', 'success');
|
||
workers.service = registration;
|
||
})
|
||
.catch(error => {
|
||
displayResult('worker-results', `❌ Service Worker registration failed: ${error.message}`, 'error');
|
||
});
|
||
} catch (error) {
|
||
displayResult('worker-results', `❌ Service Worker registration error: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function updateServiceWorker() {
|
||
try {
|
||
if (workers.service) {
|
||
workers.service.update().then(() => {
|
||
displayResult('worker-results', '✅ Service Worker update check completed', 'success');
|
||
});
|
||
} else {
|
||
displayResult('worker-results', '❌ No Service Worker registration found', 'error');
|
||
}
|
||
} catch (error) {
|
||
displayResult('worker-results', `❌ Service Worker update failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function getServiceWorkerStatus() {
|
||
try {
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.getRegistrations().then(registrations => {
|
||
displayResult('worker-results', `📊 Service Workers: ${registrations.length} registered`, 'success');
|
||
registrations.forEach((reg, index) => {
|
||
displayResult('worker-results', `#${index + 1}: ${reg.scope}, state: ${reg.active?.state || 'inactive'}`);
|
||
});
|
||
});
|
||
} else {
|
||
displayResult('worker-results', '❌ Service Worker not supported', 'error');
|
||
}
|
||
} catch (error) {
|
||
displayResult('worker-results', `❌ Service Worker status failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// Performance API Functions
|
||
function measurePerformance() {
|
||
try {
|
||
if (!apiManager?.performance) {
|
||
displayResult('performance-results', '❌ Performance API not available', 'error');
|
||
return;
|
||
}
|
||
|
||
const startTime = performance.now();
|
||
|
||
// Simulate some work
|
||
let sum = 0;
|
||
for (let i = 0; i < 1000000; i++) {
|
||
sum += Math.sqrt(i);
|
||
}
|
||
|
||
const endTime = performance.now();
|
||
const duration = endTime - startTime;
|
||
|
||
displayResult('performance-results', `⚡ Performance: Operation took ${duration.toFixed(2)}ms`, 'success');
|
||
displayResult('performance-results', `📊 Result: ${sum.toFixed(2)}`);
|
||
} catch (error) {
|
||
displayResult('performance-results', `❌ Performance measurement failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function getPerformanceEntries() {
|
||
try {
|
||
const entries = performance.getEntriesByType('navigation');
|
||
if (entries.length > 0) {
|
||
const nav = entries[0];
|
||
displayResult('performance-results', `🚀 Navigation: ${nav.loadEventEnd - nav.navigationStart}ms total`, 'success');
|
||
displayResult('performance-results', `📡 DNS: ${nav.domainLookupEnd - nav.domainLookupStart}ms`);
|
||
displayResult('performance-results', `🔗 Connect: ${nav.connectEnd - nav.connectStart}ms`);
|
||
displayResult('performance-results', `📄 DOM: ${nav.domContentLoadedEventEnd - nav.domContentLoadedEventStart}ms`);
|
||
}
|
||
|
||
const resourceEntries = performance.getEntriesByType('resource').slice(0, 5);
|
||
displayResult('performance-results', `📚 Resources (first 5): ${resourceEntries.length} entries`);
|
||
resourceEntries.forEach(entry => {
|
||
displayResult('performance-results', `• ${entry.name.split('/').pop()}: ${entry.duration.toFixed(2)}ms`);
|
||
});
|
||
} catch (error) {
|
||
displayResult('performance-results', `❌ Performance entries failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function createPerformanceMark() {
|
||
try {
|
||
const markName = `api-test-mark-${Date.now()}`;
|
||
performance.mark(markName);
|
||
|
||
setTimeout(() => {
|
||
performance.mark(`${markName}-end`);
|
||
performance.measure(`${markName}-duration`, markName, `${markName}-end`);
|
||
|
||
const measure = performance.getEntriesByName(`${markName}-duration`)[0];
|
||
displayResult('performance-results', `🏷️ Performance Mark: ${measure.duration.toFixed(2)}ms`, 'success');
|
||
}, Math.random() * 1000);
|
||
|
||
displayResult('performance-results', `✅ Performance mark created: ${markName}`, 'success');
|
||
} catch (error) {
|
||
displayResult('performance-results', `❌ Performance mark failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function getResourceTiming() {
|
||
try {
|
||
const resources = performance.getEntriesByType('resource');
|
||
const totalResources = resources.length;
|
||
const totalTime = resources.reduce((sum, entry) => sum + entry.duration, 0);
|
||
const avgTime = totalTime / totalResources;
|
||
|
||
displayResult('performance-results', `📊 Resources: ${totalResources} total, ${avgTime.toFixed(2)}ms average`, 'success');
|
||
|
||
const slowResources = resources.filter(entry => entry.duration > 100);
|
||
if (slowResources.length > 0) {
|
||
displayResult('performance-results', `🐌 Slow resources (>100ms): ${slowResources.length}`);
|
||
slowResources.slice(0, 3).forEach(entry => {
|
||
displayResult('performance-results', `• ${entry.name.split('/').pop()}: ${entry.duration.toFixed(2)}ms`);
|
||
});
|
||
}
|
||
} catch (error) {
|
||
displayResult('performance-results', `❌ Resource timing failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function measureNavigationTiming() {
|
||
try {
|
||
const nav = performance.getEntriesByType('navigation')[0];
|
||
if (nav) {
|
||
const metrics = {
|
||
'DNS Lookup': nav.domainLookupEnd - nav.domainLookupStart,
|
||
'TCP Connect': nav.connectEnd - nav.connectStart,
|
||
'Request': nav.responseStart - nav.requestStart,
|
||
'Response': nav.responseEnd - nav.responseStart,
|
||
'DOM Processing': nav.domContentLoadedEventEnd - nav.responseEnd,
|
||
'Load Complete': nav.loadEventEnd - nav.loadEventStart
|
||
};
|
||
|
||
displayResult('performance-results', '🚀 Navigation Timing:', 'success');
|
||
Object.entries(metrics).forEach(([name, time]) => {
|
||
displayResult('performance-results', `• ${name}: ${time.toFixed(2)}ms`);
|
||
});
|
||
}
|
||
} catch (error) {
|
||
displayResult('performance-results', `❌ Navigation timing failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
function clearPerformanceData() {
|
||
try {
|
||
performance.clearMarks();
|
||
performance.clearMeasures();
|
||
displayResult('performance-results', '✅ Performance data cleared', 'success');
|
||
} catch (error) {
|
||
displayResult('performance-results', `❌ Clear performance data failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// Comprehensive Test Functions
|
||
async function runFullAPITest() {
|
||
displayResult('comprehensive-results', '🧪 Starting comprehensive API test suite...', 'success');
|
||
|
||
const tests = [
|
||
{ name: 'API Manager', fn: () => getAPIManagerStatus() },
|
||
{ name: 'Intersection Observer', fn: () => createIntersectionObserver() },
|
||
{ name: 'Local Storage', fn: () => testLocalStorage() },
|
||
{ name: 'Performance Measurement', fn: () => measurePerformance() },
|
||
{ name: 'Network Info', fn: () => getNetworkInfo() },
|
||
{ name: 'Basic Animation', fn: () => createBasicAnimation() }
|
||
];
|
||
|
||
let passed = 0;
|
||
let failed = 0;
|
||
|
||
for (const test of tests) {
|
||
try {
|
||
await test.fn();
|
||
passed++;
|
||
displayResult('comprehensive-results', `✅ ${test.name}: PASSED`);
|
||
} catch (error) {
|
||
failed++;
|
||
displayResult('comprehensive-results', `❌ ${test.name}: FAILED - ${error.message}`, 'error');
|
||
}
|
||
|
||
// Small delay between tests
|
||
await new Promise(resolve => setTimeout(resolve, 100));
|
||
}
|
||
|
||
displayResult('comprehensive-results', `📊 Test Results: ${passed}/${tests.length} passed, ${failed} failed`, passed === tests.length ? 'success' : 'warning');
|
||
}
|
||
|
||
async function createIntegratedWorkflow() {
|
||
displayResult('comprehensive-results', '🔄 Creating integrated workflow...', 'success');
|
||
|
||
try {
|
||
// Step 1: Initialize core APIs
|
||
await initializeAPIManager();
|
||
displayResult('comprehensive-results', '1️⃣ API Manager initialized');
|
||
|
||
// Step 2: Set up observers
|
||
createIntersectionObserver();
|
||
createResizeObserver();
|
||
displayResult('comprehensive-results', '2️⃣ Observers configured');
|
||
|
||
// Step 3: Test storage capabilities
|
||
testLocalStorage();
|
||
testSessionStorage();
|
||
displayResult('comprehensive-results', '3️⃣ Storage tested');
|
||
|
||
// Step 4: Start monitoring
|
||
monitorConnection();
|
||
displayResult('comprehensive-results', '4️⃣ Monitoring started');
|
||
|
||
// Step 5: Create animations
|
||
createBasicAnimation();
|
||
displayResult('comprehensive-results', '5️⃣ Animations created');
|
||
|
||
displayResult('comprehensive-results', '✅ Integrated workflow completed successfully', 'success');
|
||
} catch (error) {
|
||
displayResult('comprehensive-results', `❌ Integrated workflow failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function generateAPIReport() {
|
||
displayResult('comprehensive-results', '📋 Generating comprehensive API report...', 'success');
|
||
|
||
const report = {
|
||
timestamp: new Date().toISOString(),
|
||
userAgent: navigator.userAgent,
|
||
apis: {}
|
||
};
|
||
|
||
// Test API availability
|
||
const apiTests = {
|
||
'Intersection Observer': () => 'IntersectionObserver' in window,
|
||
'Resize Observer': () => 'ResizeObserver' in window,
|
||
'Mutation Observer': () => 'MutationObserver' in window,
|
||
'getUserMedia': () => navigator.mediaDevices?.getUserMedia !== undefined,
|
||
'getDisplayMedia': () => navigator.mediaDevices?.getDisplayMedia !== undefined,
|
||
'IndexedDB': () => 'indexedDB' in window,
|
||
'Cache API': () => 'caches' in window,
|
||
'Service Worker': () => 'serviceWorker' in navigator,
|
||
'Web Worker': () => 'Worker' in window,
|
||
'Web Animations': () => 'animate' in document.createElement('div'),
|
||
'Geolocation': () => 'geolocation' in navigator,
|
||
'Vibration': () => 'vibrate' in navigator,
|
||
'Network Information': () => 'connection' in navigator,
|
||
'Performance API': () => 'performance' in window,
|
||
'Permissions API': () => 'permissions' in navigator
|
||
};
|
||
|
||
Object.entries(apiTests).forEach(([name, test]) => {
|
||
try {
|
||
report.apis[name] = test();
|
||
} catch (error) {
|
||
report.apis[name] = false;
|
||
}
|
||
});
|
||
|
||
// Display report
|
||
displayResult('comprehensive-results', '📊 API Support Report:', 'success');
|
||
displayResult('comprehensive-results', JSON.stringify(report, null, 2));
|
||
|
||
const supportedCount = Object.values(report.apis).filter(Boolean).length;
|
||
const totalCount = Object.keys(report.apis).length;
|
||
displayResult('comprehensive-results', `✅ Summary: ${supportedCount}/${totalCount} APIs supported (${Math.round(supportedCount/totalCount*100)}%)`, 'success');
|
||
}
|
||
</script> |