Bangun sistem unggahan gambar yang ramah offline – Beragampengetahuan

Karena itu, Anda mengisi formulir online dan meminta Anda untuk mengunggah file. Anda mengklik enter untuk memilih file dari desktop dan tersedia. Tapi apa yang terjadi. Jaringan turun, file menghilang, dan Anda harus mengekspload ulang file. Konektivitas jaringan yang buruk Ini dapat menyebabkan Anda menghabiskan waktu yang tidak masuk akal mencoba mengunggah file dengan sukses.

Alasan untuk mengganggu pengalaman pengguna adalah bahwa stabilitas jaringan harus diperiksa terus menerus dan diunggah beberapa kali. Meskipun kami mungkin tidak dapat melakukan banyak hal dengan konektivitas jaringan, sebagai pengembang, kami selalu dapat melakukan sesuatu untuk menghilangkan rasa sakit yang disebabkan oleh masalah ini.

Salah satu cara kami dapat menyelesaikan masalah ini adalah dengan menyesuaikan cara sistem unggahan gambar adalah untuk memungkinkan pengguna mengunggah gambar secara offline – Menghilangkan kebutuhan untuk koneksi jaringan yang andaldan kemudian sistem mencoba kembali proses unggahan ketika jaringan menjadi stabil tanpa intervensi pengguna.

Artikel ini akan fokus pada menjelaskan cara membangunnya Sistem Upload Gambar Ramah Offline Gunakan teknik PWA (Aplikasi Web Progresif), mis. IndexedDBPekerja Layanan dan Latar Belakang Sinkronisasi API. Kami juga akan membahas tips secara singkat untuk meningkatkan pengalaman pengguna sistem ini.

Rencanakan sistem unggahan gambar offline

Ini adalah diagram alur dari sistem unggahan gambar yang ramah offline.

Seperti yang ditunjukkan dalam diagram alur, prosesnya adalah sebagai berikut:

1. Pengguna memilih gambar.
   Proses pertama kali memungkinkan pengguna memilih gambar mereka.
2. Gambar disimpan secara lokal IndexedDB.
   Selanjutnya, sistem memeriksa koneksi jaringan. Jika koneksi jaringan tersedia, sistem akan mengunggah gambar secara langsung, menghindari penggunaan penyimpanan lokal yang tidak perlu. Namun, jika jaringan tidak tersedia, gambar akan disimpan di IndexedDB.
3. Pekerja layanan mendeteksi ketika jaringan dipulihkan.
   Simpan gambar di IndexedDBsistem menunggu untuk mendeteksi ketika koneksi jaringan dipulihkan untuk melanjutkan ke langkah berikutnya.
4. Pemrosesan sinkronisasi latar belakang menunggu untuk diunggah.
   Saat koneksi dipulihkan, sistem akan mencoba mengunggah gambar lagi.
5. File telah berhasil diunggah.
   Saat gambar diunggah, sistem akan menghapus salinan lokal yang disimpan di dalamnya. IndexedDB.

Sistem Implementasi

Langkah pertama dalam implementasi sistem adalah untuk memungkinkan pengguna memilih gambar mereka. Ada beberapa cara Anda dapat mencapai ini:

• Anda dapat menggunakan sederhana <input type="file"> elemen;
• Seret dan Jatuhkan Antarmuka.

Saya sarankan Anda menggunakan keduanya. Beberapa pengguna suka menggunakan antarmuka drag and drop, sementara yang lain berpikir satu -satunya cara untuk mengunggah gambar adalah melalui <input type="file"> elemen. Memiliki kedua opsi akan membantu meningkatkan pengalaman pengguna. Anda mungkin juga mempertimbangkan untuk mengizinkan pengguna untuk menempelkan gambar secara langsung di browser menggunakan API clipboard.

Pekerja Layanan Terdaftar

Inti dari solusi ini adalah pekerja layanan. Staf layanan kami akan bertanggung jawab atas IndexedDB Unggah koneksi internet saat penyimpanan, kembalikan dan koneksi internet yang jelas IndexedDB Unggah gambar dan simpan.

Untuk menggunakan pekerja layanan, Anda harus terlebih dahulu mendaftarkan:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(reg => console.log('Service Worker registered', reg))
    .catch(err => console.error('Service Worker registration failed', err));
}

Periksa koneksi jaringan

Ingat, masalah yang kami coba selesaikan adalah Koneksi jaringan yang tidak dapat diandalkan. Jika masalah ini tidak ada, maka tidak masuk akal untuk mencoba menyelesaikan masalah apa pun. Jadi setelah gambar dipilih, kita perlu memeriksa apakah pengguna memiliki koneksi internet yang andal sebelum mendaftarkan acara sinkronisasi dan menyimpan gambar di dalam IndexedDB.

function uploadImage() {
  if (navigator.onLine) {
    // Upload Image
  } else {
    // register Sync Event
    // Store Images in IndexedDB
  }
}

catatan: Saya hanya menggunakan navigator.onLine Properti di sini untuk menggambarkan bagaimana sistem akan bekerja. ini navigator.onLine Atributnya adalah Tidak dapat diandalkanSaya sarankan Anda membuat solusi khusus untuk memeriksa apakah pengguna terhubung ke internet. Salah satu cara Anda dapat melakukan ini adalah mengirim permintaan ping ke titik akhir server yang Anda buat.

Daftarkan acara sinkronisasi

Setelah tes jaringan gagal, langkah selanjutnya adalah mendaftarkan acara sinkronisasi. Karena koneksi internet yang buruk, acara sinkronisasi perlu didaftarkan pada titik -titik di mana sistem tidak dapat mengunggah gambar.

async function registerSyncEvent() {
  if ('SyncManager' in window) {
    const registration = await navigator.serviceWorker.ready;
    await registration.sync.register('uploadImages');
    console.log('Background Sync registered');
  }
}

Setelah mendaftar untuk acara sinkronisasi, Anda perlu mendengarkannya di pekerja layanan.

self.addEventListener('sync', (event) => {
  if (event.tag === 'uploadImages') {
    event.waitUntil(sendImages());
  }
});

ini sendImages Fungsi akan menjadi proses asinkron yang akan berasal IndexedDB Dan mengunggahnya ke server. Beginilah tampilannya:

async function sendImages() {
  try {
    // await image retrieval and upload
  } catch (error) {
    // throw error
  }
}

Buka database

Untuk menyimpan gambar kami secara lokal, hal pertama yang perlu kami lakukan adalah membuka a IndexedDB Toko. Seperti yang dapat dilihat dari kode berikut, kami membuat Menyimpan variabel global untuk instance database. Alasan untuk ini adalah itu, kalau begitu, ketika kita ingin pergi IndexedDBkami dapat membuka database lagi tanpa menulis kode.

let database; // Global variable to store the database instance

function openDatabase() {
  return new Promise((resolve, reject) => {
    if (database) return resolve(database); // Return existing database instance 

    const request = indexedDB.open("myDatabase", 1);

    request.onerror = (event) => {
      console.error("Database error:", event.target.error);
      reject(event.target.error); // Reject the promise on error
    };

    request.onupgradeneeded = (event) => {
        const db = event.target.result;
        // Create the "images" object store if it doesn't exist.
        if (!db.objectStoreNames.contains("images")) {
          db.createObjectStore("images", { keyPath: "id" });
        }
        console.log("Database setup complete.");
    };

    request.onsuccess = (event) => {
      database = event.target.result; // Store the database instance globally
      resolve(database); // Resolve the promise with the database instance
    };
  });
}

Menyimpan gambar dalam indeks

Dan IndexedDB Toko terbuka dan kami sekarang dapat menyimpan gambar kami.

Sekarang, Anda mungkin bertanya -tanya mengapa solusi yang lebih sederhana localStorage Tidak digunakan untuk tujuan ini.

Alasannya adalah IndexedDB Operasi di luar sink tidak akan memblokir utas JavaScript utama, dan localStorage Jalankan secara sinkron, jika Anda menggunakan utas utama JavaScript, Anda dapat memblokirnya.

Di sinilah Anda dapat menyimpan gambar IndexedDB:

async function storeImages(file) {
  // Open the IndexedDB database.
  const db = await openDatabase();
  // Create a transaction with read and write access.
  const transaction = db.transaction("images", "readwrite");
  // Access the "images" object store.
  const store = transaction.objectStore("images");
  // Define the image record to be stored.
  const imageRecord = {
    id: IMAGE_ID,   // a unique ID
    image: file     // Store the image file (Blob)
  };
  // Add the image record to the store.
  const addRequest = store.add(imageRecord);
  // Handle successful addition.
  addRequest.onsuccess = () => console.log("Image added successfully!");
  // Handle errors during insertion.
  addRequest.onerror = (e) => console.error("Error storing image:", e.target.error);
}

Saat menyimpan gambar dan set sinkronisasi latar belakang, sistem dapat mengunggah gambar setiap kali koneksi jaringan dipulihkan.

Ambil dan unggah gambar

Setelah koneksi jaringan dipulihkan, acara sinkronisasi akan diluncurkan dan staf layanan akan IndexedDB Dan unggah.

async function retrieveAndUploadImage(IMAGE_ID) {
  try {
    const db = await openDatabase(); // Ensure the database is open
    const transaction = db.transaction("images", "readonly");
    const store = transaction.objectStore("images");
    const request = store.get(IMAGE_ID);
    request.onsuccess = function (event) {
      const image = event.target.result;
      if (image) {
        // upload Image to server here
      } else {
        console.log("No image found with ID:", IMAGE_ID);
      }
    };
    request.onerror = () => {
        console.error("Error retrieving image.");
    };
  } catch (error) {
    console.error("Failed to open database:", error);
  }
}

Hapus indeks database DDB

Setelah gambar diunggah, IndexedDB Tidak ada lagi toko yang diperlukan. Oleh karena itu, dan isinya harus dihapus untuk membebaskan penyimpanan.

function deleteDatabase() {
  // Check if there's an open connection to the database.
  if (database) {
    database.close(); // Close the database connection
    console.log("Database connection closed.");
  }

  // Request to delete the database named "myDatabase".
  const deleteRequest = indexedDB.deleteDatabase("myDatabase");

  // Handle successful deletion of the database.
  deleteRequest.onsuccess = function () {
    console.log("Database deleted successfully!");
  };

  // Handle errors that occur during the deletion process.
  deleteRequest.onerror = function (event) {
    console.error("Error deleting database:", event.target.error);
  };

  // Handle cases where the deletion is blocked (e.g., if there are still open connections).
  deleteRequest.onblocked = function () {
    console.warn("Database deletion blocked. Close open connections and try again.");
  };
}

Dengan cara ini, seluruh proses selesai!

Pertimbangan dan keterbatasan

Meskipun kami melakukan banyak hal untuk membantu meningkatkan pengalaman dengan mendukung unggahan offline, sistem ini bukan tanpa batasnya. Saya pikir saya akan menyebut pertanyaan ini secara khusus karena perlu diketahui bahwa solusi ini mungkin tidak memenuhi kebutuhan Anda.

• Tidak ada deteksi koneksi internet yang andal
  JavaScript tidak memberikan cara yang sangat mudah untuk mengakomodasi status online. Oleh karena itu, Anda perlu membuat solusi khusus untuk mendeteksi status online.
• Solusi kromium saja
  API sinkronisasi latar belakang saat ini terbatas pada browser berbasis krom. Oleh karena itu, solusinya hanya didukung oleh browser Chrome. Ini berarti bahwa jika Anda memiliki sebagian besar pengguna di browser non-Kromium, Anda memerlukan solusi yang lebih kuat.
• IndexedDB Kebijakan Penyimpanan
  Browser memberlakukan pembatasan penyimpanan dan kebijakan penggusuran IndexedDB. Misalnya, di Safari, disimpan di IndexedDB Jika pengguna tidak berinteraksi dengan situs web, ia memiliki umur 7 hari. Ini harus diingat jika Anda datang dengan alternatif untuk Sinkronisasi Latar Belakang Safari yang mendukung API.

Pengalaman pengguna yang ditingkatkan

Karena seluruh proses berlangsung di latar belakang, kami membutuhkan cara untuk memberi tahu pengguna ketika gambar disimpan, menunggu unggahan, atau telah berhasil diunggah. Menerapkan tertentu Elemen ui Untuk tujuan ini, itu memang akan meningkatkan pengalaman pengguna. Elemen UI ini dapat mencakup pemberitahuan bersulang, metrik status unggahan (seperti rotator (menunjukkan proses aktivitas), bilah kemajuan (menunjukkan kemajuan status), metrik status jaringan, atau tombol untuk menyediakan ulang dan membatalkan opsi.

Meringkaskan

Koneksi internet yang buruk dapat merusak pengalaman pengguna aplikasi web. Namun, dengan menggunakan teknologi PWA, mis. IndexedDBPekerja layanan dan API sinkronisasi latar belakang, pengembang dapat membantu meningkatkan keandalan aplikasi web pengguna, terutama di ranah koneksi internet yang tidak dapat diandalkan.

Dapatkan $ 200 seminggu
Dari artikel di Smashing Magazine – untuk desainer dan pengembang web