|
export function verifyStartup() {
|
|
const checks = [];
|
|
|
|
checks.push({
|
|
name: 'LocalStorage Available',
|
|
test: () => {
|
|
try {
|
|
const test = '__storage_test__';
|
|
localStorage.setItem(test, test);
|
|
localStorage.removeItem(test);
|
|
return true;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
checks.push({
|
|
name: 'Fetch API Available',
|
|
test: () => typeof fetch === 'function'
|
|
});
|
|
|
|
checks.push({
|
|
name: 'Promises Available',
|
|
test: () => typeof Promise === 'function'
|
|
});
|
|
|
|
checks.push({
|
|
name: 'Custom Elements Supported',
|
|
test: () => 'customElements' in window
|
|
});
|
|
|
|
checks.push({
|
|
name: 'ES6 Modules Supported',
|
|
test: () => {
|
|
try {
|
|
new Function('import("")');
|
|
return true;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
const results = {
|
|
passed: [],
|
|
failed: []
|
|
};
|
|
|
|
for (const check of checks) {
|
|
try {
|
|
if (check.test()) {
|
|
results.passed.push(check.name);
|
|
} else {
|
|
results.failed.push(check.name);
|
|
}
|
|
} catch (error) {
|
|
results.failed.push(`${check.name} (Error: ${error.message})`);
|
|
}
|
|
}
|
|
|
|
return results;
|
|
}
|
|
|
|
export function showCompatibilityError(results) {
|
|
document.body.innerHTML = `
|
|
<div style="padding: 2rem; max-width: 600px; margin: 2rem auto; font-family: sans-serif; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
|
|
<h1 style="color: #d32f2f; margin-bottom: 1rem;">Browser Not Supported</h1>
|
|
<p style="margin-bottom: 1rem;">Your browser does not support the required features for this application.</p>
|
|
|
|
<h3 style="color: #666; margin-top: 1.5rem;">Failed Checks:</h3>
|
|
<ul style="color: #d32f2f; margin: 0.5rem 0 1rem 1.5rem;">
|
|
${results.failed.map(f => `<li>${f}</li>`).join('')}
|
|
</ul>
|
|
|
|
${results.passed.length > 0 ? `
|
|
<h3 style="color: #666; margin-top: 1.5rem;">Passed Checks:</h3>
|
|
<ul style="color: #4caf50; margin: 0.5rem 0 1rem 1.5rem;">
|
|
${results.passed.map(p => `<li>${p}</li>`).join('')}
|
|
</ul>
|
|
` : ''}
|
|
|
|
<p style="margin-top: 1.5rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;">
|
|
<strong>Recommended browsers:</strong><br>
|
|
Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
|
|
</p>
|
|
</div>
|
|
`;
|
|
}
|