Apl Web Progresif: Sistem FE baharu

Kadangkala Ketersambungan Menjadi Halangan.

Dalam persekitaran perusahaan, kami sering mengambil sambungan internet yang stabil sebagai sesuatu yang diberikan. Walau bagaimanapun, keadaan dunia sebenar sering mencabar andaian ini, yang berpotensi mengganggu operasi perniagaan yang kritikal. Artikel ini memperincikan cara kami mengubah sistem ERP dalam talian tradisional sahaja kepada sistem yang lebih dipercayai dengan penyelesaian luar talian yang berdaya tahan. Dengan memanfaatkan penyelesaian storan berasaskan pelayar seperti IndexedDB, menggunakan mekanisme penyegerakan dan menggunakan Progressive Web Apps (PWA).

Pada mulanya, sistem mengikuti seni bina pelayan pelanggan tradisional di mana semua logik perniagaan berada di bahagian belakang. Walaupun seni bina ini berfungsi dengan baik dalam persekitaran dengan sambungan yang boleh dipercayai, ia memberikan beberapa cabaran:

• Kegagalan transaksi semasa gangguan rangkaian
• Kehilangan peluang jualan semasa gangguan
• Pengalaman pengguna yang lemah dengan keadaan pemuatan berterusan
• Risiko kehilangan data semasa operasi kritikal
• Dan yang paling penting, kehilangan pelanggan kerana kekurangan perkhidmatan yang pantas.

Jadi untuk mentakrifkan perkara ini, kami perlu membuat improvisasi dan melihat bagaimana kami boleh membuat perkara yang lebih baik dan juga melakukan tanpa ketersambungan kerana ia tidak tersedia pada mulanya, kami melaksanakan sistem luar talian dengan beberapa internet diperlukan menggunakan Progressive Web Apps (PWA), dengan berkesan menggerakkan kritikal logik perniagaan ke bahagian hadapan sambil mengekalkan integriti data dan penyegerakan dengan sistem teras ERP.

Beberapa Komponen Teras:

IndexedDB: Untuk storan data luar talian dan caching, kami menggunakan IndexedDB melalui perpustakaan Dexie.js untuk menyediakan pangkalan data sisi pelanggan yang teguh yang menyokong storan data berstruktur. di bawah ialah contoh mudah bagaimana untuk menyediakan pangkalan data dengan Dexie

// Initialize IndexedDB using Dexie.js
import Dexie from 'dexie';

interface LocalUsers{
id:string;
name:string;
role:string;
dob:string;
phone_no:string
}

interface LocalTrx {
id: string;
syncId:string;
created_at:string;
amount:string;
isSynced:boolean;
modified:string;
}

export class ArticleDatabase extends Dexie {
  transaction!: Table<LocalTrx>;
  users!: Table<LocalUsers>;
  constructor(){
    super("articleDB")
    }

this.version(1).stores({
// define the fields you'll like to query by or find items by within the indexDB
    transactions: 'id, date, amount, isSynced',
    users: 'id, name, role'
 });
}
//create the db
export const db=new ArticleDatabase()

// Open the database
db.open().then(() => {
    console.log("Database opened successfully!");
  })
  .catch((error) => {
    console.error("Failed to open database:", error);
  });

// Adding a new transaction to IndexedDB
import db from ../db
async function addTransaction(transaction) {
try {
   const trx = await db.transactions.add(transaction)
   console.log("Trx added", trx)
} catch (err) {
    console.log("Failed creating trx", err)
}
}

Pekerja Perkhidmatan: Ini bertindak sebagai proksi antara apl dan rangkaian, membolehkan kefungsian luar talian dengan menyimpan sumber dan memintas permintaan untuk memastikan data kritikal kekal boleh diakses semasa pemotongan sambungan.

//service workesr boleh disediakan dengan mudah, baru-baru ini secara lalai apl nextJS datang dengan perkhidmatan berfungsi dengan vite, anda boleh menggunakan pemalam vite-pwa
Penyegerakan Latar Belakang: Ini membolehkan kami menyegerakkan data sebaik sahaja rangkaian tersedia semula, memastikan transaksi tidak hilang dan kemas kini dibuat secara automatik setelah sambungan dipulihkan.

Aliran Seni Bina Sistem
Seni bina dibahagikan kepada tiga fasa utama: permulaan, pemprosesan transaksi dan penyegerakan. Carta alir di bawah menunjukkan cara data mengalir antara peringkat ini.

*Fasa Permulaan *

Apabila sistem bermula, ia menyemak sambungan rangkaian:

Jika peranti dalam talian, ia mengambil data induk terkini daripada pelayan dan mengemas kini IndexedDB setempat.

Jika peranti di luar talian, ia memuatkan data daripada IndexedDB, memastikan pengguna boleh terus bekerja tanpa gangguan.

Pemprosesan Transaksi

Apabila pengguna melakukan transaksi baharu:

Data setempat disahkan dan disimpan dalam IndexedDB.

Kemas kini UI yang optimistik digunakan untuk segera menunjukkan hasil kepada pengguna, memberikan pengalaman yang lancar dan responsif.

*Fasa Penyegerakan *

Apabila ketersambungan dipulihkan:

Data disegerakkan dalam kelompok dengan pelayan, sama ada dengan mengklik butang penyegerakan secara manual atau selepas tempoh masa tertentu.

Jika penyegerakan gagal (cth., disebabkan sambungan yang perlahan), transaksi itu ditambahkan pada senarai transaksi yang gagal dan dicuba semula kemudian.

Memandangkan kami menguruskan segala-galanya di bahagian hadapan, betapa bergantung perkhidmatan kami terhadap mendapatkan Maklumat pelanggan.

Pengesahan & Keizinan
Dalam mana-mana sistem perusahaan, mendapatkan maklumat pengguna yang sensitif adalah penting. Penyelesaian kami memastikan bahawa:

Pengesahan berasaskan JWT digunakan untuk sesi pengguna yang selamat.

Kawalan akses berasaskan peranan memastikan bahawa hanya pengguna yang diberi kuasa boleh melakukan tindakan tertentu.

Storan token selamat dikendalikan menggunakan mekanisme berasaskan pelayar seperti localStorage untuk keselamatan tambahan.

Untuk mengurangkan risiko menggunakan token yang disimpan secara tempatan, kami:

Cetuskan pengalihan keluar selamat token pengguna semasa log keluar.

Pastikan data sensitif dipadamkan daripada IndexedDB apabila sesi tamat atau apabila pengguna log keluar daripada sistem. Nota: jika transaksi dibiarkan tidak disegerakkan, kami memaparkannya kepada pengguna yang log masuk dan menguatkuasakan mereka untuk menyegerak sebelum mereka log keluar.

Integriti Data & Penyelesaian Konflik

Menyegerakkan data antara klien dan pelayan memperkenalkan potensi isu dengan integriti data, terutamanya jika berbilang peranti atau pengguna membuat perubahan pada data yang sama di luar talian. Untuk menangani perkara ini:

Kami mengesahkan semua butiran transaksi (cth., kuantiti, jumlah) sebelum menyegerak untuk memastikan tiada percanggahan.

Kami memberikan ID unik kepada setiap transaksi untuk mengelakkan pertindihan semasa penyegerakan.

Strategi penyelesaian konflik digunakan untuk mengendalikan situasi di mana perubahan data dibuat pada berbilang peranti semasa di luar talian. Contohnya, kami menggunakan pendekatan cap masa.

//kami cuba memastikan luar talian dipertimbangkan terlebih dahulu, kerana ia adalah bahagian penting sistem.

// Initialize IndexedDB using Dexie.js
import Dexie from 'dexie';

interface LocalUsers{
id:string;
name:string;
role:string;
dob:string;
phone_no:string
}

interface LocalTrx {
id: string;
syncId:string;
created_at:string;
amount:string;
isSynced:boolean;
modified:string;
}

export class ArticleDatabase extends Dexie {
  transaction!: Table<LocalTrx>;
  users!: Table<LocalUsers>;
  constructor(){
    super("articleDB")
    }

this.version(1).stores({
// define the fields you'll like to query by or find items by within the indexDB
    transactions: 'id, date, amount, isSynced',
    users: 'id, name, role'
 });
}
//create the db
export const db=new ArticleDatabase()

// Open the database
db.open().then(() => {
    console.log("Database opened successfully!");
  })
  .catch((error) => {
    console.error("Failed to open database:", error);
  });

// Adding a new transaction to IndexedDB
import db from ../db
async function addTransaction(transaction) {
try {
   const trx = await db.transactions.add(transaction)
   console.log("Trx added", trx)
} catch (err) {
    console.log("Failed creating trx", err)
}
}

Keselamatan Rangkaian
Memandangkan data dihantar melalui rangkaian setelah sambungan dipulihkan, kami memastikan:

Penghadan kadar untuk mengelakkan penyalahgunaan dan memastikan bahawa terlalu banyak permintaan tidak mengatasi pelayan dengan respons 429 oleh itu sebab kami pada asalnya bekerja dengan kemas kini kelompok.

Penyulitan data semasa transit menggunakan SSL/TLS.

Tamat tempoh token dan pengurusan token selamat, memastikan token yang lapuk atau tamat tempoh dialih keluar secara automatik daripada storan sebelah pelanggan.

Alternatif kepada PWA & IndexedDB

Walaupun IndexedDB ialah pilihan yang kukuh untuk storan data pihak pelanggan dalam PWA, terdapat pilihan lain yang tersedia bergantung pada kerumitan dan keperluan aplikasi:

SQLite melalui WebAssembly (WASM): Sesetengah pembangun memilih untuk menggunakan SQLite melalui WASM untuk pengurusan data yang lebih maju, terutamanya apabila berurusan dengan set data yang lebih besar atau pertanyaan kompleks. Walau bagaimanapun, penyepaduan SQLite melalui WASM memperkenalkan kerumitan tambahan, seperti kebimbangan prestasi dan keserasian penyemak imbas (cth Bagaimana sqlite menjadikan Notion lebih pantas).

API Storan Web (localStorage/sessionStorage): Untuk aplikasi yang lebih ringkas yang tidak memerlukan pertanyaan kompleks atau set data yang besar, API Storan Web mungkin merupakan alternatif yang berdaya maju. Ia lebih mudah untuk dilaksanakan tetapi mempunyai had dari segi kapasiti storan dan keupayaan pertanyaan.

Memandang Hadapan: Trend Masa Depan dalam PWA

Memandangkan teknologi web terus berkembang, begitu juga kemungkinan untuk aplikasi seperti ini. Aliran baru muncul termasuk:

• WebAssembly dan SQLite
• Pengkomputeran Tepi
• Protokol Penyegerakan Lanjutan: Protokol yang muncul seperti CRDT (Jenis Data Replika Tanpa Konflik) dan DeltaSync

Saya sendiri tidak sabar untuk meneroka bagaimana teknologi ini akan mengubah landskap aplikasi luar talian dan diedarkan. Dengan kemajuan pesat dalam mesin dan komputer riba berkuasa, kami berpeluang untuk memanfaatkan kuasa pengkomputeran yang meningkat ini untuk menyampaikan perisian yang lebih canggih dan cekap untuk pengguna. Pada masa yang sama, kami tidak boleh melupakan kepentingan memenuhi keperluan peranti mudah alih dan peranti kurang berkemampuan, memastikan penyelesaian kami boleh diakses dan dioptimumkan merentas semua platform. Potensinya sangat besar dan saya teruja untuk terus menempuh sempadan apa yang mungkin dengan PWA.

Nota: Apa Seterusnya

Kami akan uruskan perkara itu. Menggunakan Djuix.io sebagai backend dan React / Angular untuk frontend kami, kami akan melaksanakan aliran asas yang betul. Nantikan lebih banyak kemas kini sambil kami terus meningkatkan pendekatan kami untuk membina apl yang menakjubkan.

Apa pun, saya harap anda menikmati ini dan mempelajari sesuatu yang baharu. Saya pasti melakukannya. Saya juga ingin mendengar pendapat dan pengalaman anda.

Sehingga itu.

Atas ialah kandungan terperinci Apl Web Progresif: Sistem FE baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!