Inclusão Digital e Acessibilidade

// Service Worker para cache de recursos essenciais
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('app-cache-v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.svg'
      ]);
    })
  );
});

// Estratégia Cache-First para conteúdo estático
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

// API para detectar conexão lenta
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
  if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') {
    loadLightVersion(); // Carrega versão simplificada
  }
}

<!-- Barra de progresso acessível -->
<div role="progressbar" 
     aria-valuenow="75"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuetext="75% completo">
  <div class="progress-bar" style="width: 75%"></div>
</div>

<!-- Botão com descrição -->
<button aria-label="Fechar janela de diálogo">
  <i class="fas fa-times"></i>
</button>

<!-- Alertas dinâmicos -->
<div role="alert" aria-live="assertive">
  Sua mensagem foi enviada com sucesso!
</div>

// JavaScript para atualizar alertas
function showAlert(message) {
  const alertDiv = document.getElementById('live-alert');
  alertDiv.textContent = message;
  alertDiv.setAttribute('role', 'alert');
}