Adolfo Delorenzo
d818ec7d73
- Fixed PWA installation on Android by correcting manifest.json icon configuration - Made UI mobile-friendly with compact layout and sticky record button - Implemented auto-translation after transcription stops - Updated branding from 'Voice Translator' to 'Talk2Me' throughout - Added reverse proxy support with ProxyFix middleware - Created diagnostic tools for PWA troubleshooting - Added proper HTTP headers for service worker and manifest - Improved mobile CSS with responsive design - Fixed JavaScript bundling with webpack configuration - Updated service worker cache versioning - Added comprehensive PWA documentation These changes ensure the app works properly as a PWA on Android devices and provides a better mobile user experience.
168 lines
6.5 KiB
HTML
168 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PWA Installation Checker</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.check {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
.pass {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.fail {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
pre {
|
|
background: #f4f4f4;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>PWA Installation Status Checker</h1>
|
|
<div id="results"></div>
|
|
|
|
<script>
|
|
const results = document.getElementById('results');
|
|
|
|
function addResult(message, status = 'info') {
|
|
const div = document.createElement('div');
|
|
div.className = `check ${status}`;
|
|
div.innerHTML = message;
|
|
results.appendChild(div);
|
|
}
|
|
|
|
// Check HTTPS
|
|
if (location.protocol === 'https:' || location.hostname === 'localhost') {
|
|
addResult('✅ HTTPS/Localhost: ' + location.protocol + '//' + location.hostname, 'pass');
|
|
} else {
|
|
addResult('❌ Not HTTPS: PWAs require HTTPS (or localhost)', 'fail');
|
|
}
|
|
|
|
// Check Service Worker support
|
|
if ('serviceWorker' in navigator) {
|
|
addResult('✅ Service Worker API supported', 'pass');
|
|
|
|
// Check registration
|
|
navigator.serviceWorker.getRegistration().then(reg => {
|
|
if (reg) {
|
|
addResult('✅ Service Worker registered: ' + reg.scope, 'pass');
|
|
addResult('Service Worker state: ' + (reg.active ? 'active' : 'not active'), 'info');
|
|
} else {
|
|
addResult('❌ No Service Worker registered', 'fail');
|
|
}
|
|
});
|
|
} else {
|
|
addResult('❌ Service Worker API not supported', 'fail');
|
|
}
|
|
|
|
// Check manifest
|
|
const manifestLink = document.querySelector('link[rel="manifest"]');
|
|
if (manifestLink) {
|
|
addResult('✅ Manifest link found: ' + manifestLink.href, 'pass');
|
|
|
|
// Fetch and validate manifest
|
|
fetch(manifestLink.href)
|
|
.then(response => response.json())
|
|
.then(manifest => {
|
|
addResult('Manifest loaded successfully', 'info');
|
|
|
|
// Check required fields
|
|
const required = ['name', 'short_name', 'start_url', 'display', 'icons'];
|
|
required.forEach(field => {
|
|
if (manifest[field]) {
|
|
addResult(`✅ Manifest has ${field}: ${JSON.stringify(manifest[field])}`, 'pass');
|
|
} else {
|
|
addResult(`❌ Manifest missing ${field}`, 'fail');
|
|
}
|
|
});
|
|
|
|
// Check icons
|
|
if (manifest.icons && manifest.icons.length > 0) {
|
|
const has192 = manifest.icons.some(icon => icon.sizes && icon.sizes.includes('192'));
|
|
const has512 = manifest.icons.some(icon => icon.sizes && icon.sizes.includes('512'));
|
|
|
|
if (has192) addResult('✅ Has 192x192 icon', 'pass');
|
|
else addResult('❌ Missing 192x192 icon', 'fail');
|
|
|
|
if (has512) addResult('✅ Has 512x512 icon', 'pass');
|
|
else addResult('⚠️ Missing 512x512 icon (recommended)', 'info');
|
|
|
|
// Check icon purposes
|
|
manifest.icons.forEach((icon, i) => {
|
|
addResult(`Icon ${i + 1}: ${icon.sizes} - purpose: ${icon.purpose || 'not specified'}`, 'info');
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
addResult('❌ Failed to load manifest: ' + error.message, 'fail');
|
|
});
|
|
} else {
|
|
addResult('❌ No manifest link found in HTML', 'fail');
|
|
}
|
|
|
|
// Check installability
|
|
window.addEventListener('beforeinstallprompt', (e) => {
|
|
e.preventDefault();
|
|
addResult('✅ Browser considers app installable (beforeinstallprompt fired)', 'pass');
|
|
|
|
// Show install criteria met
|
|
const criteria = [
|
|
'HTTPS or localhost',
|
|
'Valid manifest with required fields',
|
|
'Service Worker with fetch handler',
|
|
'Icons (192x192 minimum)',
|
|
'Not already installed'
|
|
];
|
|
|
|
addResult('<strong>Installation criteria met:</strong><br>' + criteria.join('<br>'), 'info');
|
|
});
|
|
|
|
// Check if already installed
|
|
if (window.matchMedia('(display-mode: standalone)').matches) {
|
|
addResult('✅ App is already installed (running in standalone mode)', 'pass');
|
|
}
|
|
|
|
// Additional Chrome-specific checks
|
|
if (navigator.userAgent.includes('Chrome')) {
|
|
addResult('Chrome browser detected - checking Chrome-specific requirements', 'info');
|
|
|
|
setTimeout(() => {
|
|
// If no beforeinstallprompt event fired after 3 seconds
|
|
if (!window.installPromptFired) {
|
|
addResult('⚠️ beforeinstallprompt event not fired after 3 seconds', 'info');
|
|
addResult('Possible reasons:<br>' +
|
|
'- App already installed<br>' +
|
|
'- User dismissed install prompt recently<br>' +
|
|
'- Missing PWA criteria<br>' +
|
|
'- Chrome needs a user gesture to show prompt', 'info');
|
|
}
|
|
}, 3000);
|
|
}
|
|
|
|
// Log all checks completed
|
|
setTimeout(() => {
|
|
addResult('<br><strong>All checks completed</strong>', 'info');
|
|
console.log('PWA Status Check Complete');
|
|
}, 4000);
|
|
</script>
|
|
</body>
|
|
</html> |