HTML表单如何实现离线功能？怎样在没有网络时提交表单？

localStorage

IndexedDB

navigator.onLine

navigator.onLine

true

ping

function isOffline() {
  if (!navigator.onLine) {
    return true;
  }

  return new Promise((resolve, reject) => {
    fetch('https://www.example.com/ping', { mode: 'no-cors' }) // Replace with a lightweight resource
      .then(() => resolve(false))
      .catch(() => resolve(true));
  });
}

isOffline().then(offline => {
  if (offline) {
    console.log('用户离线');
    // ...
  } else {
    console.log('用户在线');
    // ...
  }
});

POST

// service-worker.js

const OFFLINE_FORM_QUEUE = 'offline-form-queue';

self.addEventListener('install', event => {
  // Perform install steps
});

self.addEventListener('activate', event => {
  // Clean up old caches
});

self.addEventListener('fetch', event => {
  if (event.request.method === 'POST') {
    event.respondWith(
      fetch(event.request).catch(() => {
        return queueFormData(event.request.clone());
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

async function queueFormData(request) {
  const formData = await request.formData();
  const url = request.url;
  const data = {};
  for (const [key, value] of formData.entries()) {
    data[key] = value;
  }

  return idbKeyval.get(OFFLINE_FORM_QUEUE)
    .then(queue => queue || [])
    .then(queue => {
      queue.push({ url, data });
      return idbKeyval.set(OFFLINE_FORM_QUEUE, queue);
    })
    .then(() => {
      return new Response(JSON.stringify({ message: '表单已保存，将在网络恢复后提交' }), {
        headers: { 'Content-Type': 'application/json' }
      });
    });
}

// 监听网络恢复事件
self.addEventListener('online', () => {
  console.log('网络已恢复，尝试提交离线表单');
  retryOfflineSubmissions();
});

async function retryOfflineSubmissions() {
  const queue = await idbKeyval.get(OFFLINE_FORM_QUEUE);
  if (!queue || queue.length === 0) {
    console.log('没有离线表单需要提交');
    return;
  }

  for (const item of queue) {
    try {
      await fetch(item.url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(item.data)
      });
      // 提交成功，从队列中移除
      await idbKeyval.set(OFFLINE_FORM_QUEUE, queue.filter(i => i !== item));
      console.log('离线表单提交成功');
    } catch (error) {
      console.error('离线表单提交失败:', error);
      // 提交失败，保留在队列中
      break; // 停止重试，避免无限循环
    }
  }
}

importScripts('https://unpkg.com/idb-keyval@3/idb-keyval-min.js'); // 引入idb-keyval库

idb-keyval

// 在Service Worker中发送通知
self.registration.showNotification('表单提交成功', {
  body: '您的表单已成功提交到服务器。'
});