Menggunakan plugin Vitepwa untuk laman web luar talian

Plugin Vitepwa Anthony Fu adalah alat yang berkuasa untuk meningkatkan laman web berasaskan Vite dengan fungsi luar talian. Plugin ini memudahkan proses menambah pekerja perkhidmatan untuk mengendalikan sokongan luar talian, caching aset, dan pemberitahuan kemas kini. Mari kita meneroka pekerja perkhidmatan dan bagaimana melaksanakannya menggunakan Vitepwa.

Memahami pekerja perkhidmatan

Pekerja perkhidmatan adalah skrip latar belakang yang berjalan secara bebas dari aplikasi web anda. Fungsi utamanya adalah memintas permintaan rangkaian, membolehkan pelbagai tindakan. Walaupun mampu tugas-tugas yang kompleks seperti kompilasi typescript atau transcoding video, penggunaan yang paling biasa adalah aset caching untuk peningkatan prestasi dan akses luar talian.

Vitepwa mencipta pekerja perkhidmatan yang pra-cache fail HTML, CSS, dan JavaScript apabila lawatan tapak awal. Lawatan seterusnya memuatkan sumber -sumber ini dari cache, menghapuskan permintaan rangkaian. Malah pada lawatan pertama, klik berikutnya sering memuat kandungan pra-cache, meningkatkan kelajuan dengan ketara.

Fail versi dan nyata

Menguruskan kemas kini pekerja perkhidmatan apabila perubahan kod memerlukan versi yang teliti. Membina sistem biasanya menjana nama fail (contohnya, foo-ABC123.js ) menggabungkan hash fail. Kemas kini menghasilkan nama fail baru (misalnya, foo-XYZ987.js ). Pekerja perkhidmatan mesti mengendalikan perubahan ini dengan cekap.

API Pekerja Perkhidmatan adalah peringkat rendah. Menguruskan fail cache secara manual adalah kompleks. Kotak Kerja, Perpustakaan Google, memudahkan ini, tetapi masih memerlukan maklumat aset terperinci dari proses binaan anda. Vitepwa elegan menangani ini dengan mengintegrasikan dengan kotak kerja dan secara automatik mengkonfigurasinya dengan output membina Vite.

Melaksanakan Pekerja Perkhidmatan dengan Vitepwa

1. Pemasangan: Pasang plugin menggunakan npm i vite-plugin-pwa .

2. Konfigurasi Vite: Import dan tambahkan plugin ke vite.config.js anda:

    import {vitepwa} dari "vite-plugin-pwa";
   
   Eksport DefinectonFig lalai ({
     Plugin: [vitepwa ()],
     // ... konfigurasi lain
   });

3. Pendaftaran Pekerja Perkhidmatan: Daftar Pekerja Perkhidmatan di Titik Kemasukan Aplikasi Anda:

    import {registersw} dari "maya: pwa-register";
   
   jika ("ServiceWorker" di Navigator) {
     daftar (); // Pertimbangkan untuk menambah logik bersyarat untuk persekitaran pembangunan
   }

   Fungsi registerSW mengendalikan kitaran hayat pekerja perkhidmatan. Logik bersyarat (contohnya, tidak termasuk localhost ) menghalang pengaktifan pekerja perkhidmatan semasa pembangunan.

4. Fungsi luar talian: Pra-caching yang disediakan oleh Vitepwa secara automatik membolehkan fungsi luar talian asas. Aset dihidangkan dari cache walaupun tanpa akses rangkaian. Untuk keupayaan luar talian yang lebih maju (misalnya, menggunakan IndexedDB), logik pekerja perkhidmatan tersuai diperlukan.

Kemas kini pekerja perkhidmatan

Apabila kod berubah, pekerja perkhidmatan baru dengan manifes pra-cache yang dikemas kini dihasilkan. Pekerja perkhidmatan lama terus berjalan sehingga semua tab ditutup dan dibuka semula, memastikan pengalaman pengguna yang konsisten merentasi sesi.

Pengendalian kemas kini yang lebih baik dengan onNeedRefresh

Fungsi registerSW membolehkan proses kemas kini yang lebih lancar. Panggilan balik onNeedRefresh dicetuskan apabila pekerja perkhidmatan baru tersedia, memberi peluang untuk memberitahu pengguna dan memulakan tambah nilai terkawal:

 Registersw ({
  onNeedRefresh () {
    // memaparkan pemberitahuan kepada pengguna, mendorong mereka untuk mengemas kini
    // ...
  }
});

Runtime caching

Pilihan Konfigurasi workbox Vitepwa membolehkan caching runtime untuk aset yang diambil semasa pelaksanaan permohonan. Ini memanjangkan keupayaan luar talian di luar sumber pra-cache:

 Vitepwa ({
  Kotak kerja: {
    Runtimecaching: [ / * ... konfigurasi caching runtime anda ... * /]
  }
})

Menambah kod pekerja perkhidmatan tersuai

Untuk memasukkan logik tersuai, gunakan pilihan importScripts dalam konfigurasi workbox untuk memasukkan fail JavaScript luaran:

 Vitepwa ({
  Kotak kerja: {
    ImportScripts: ["sw-ode.js"]
  }
})

Kesimpulan

Vitepwa dengan ketara memudahkan pelaksanaan pekerja perkhidmatan, menyediakan asas yang mantap untuk fungsi luar talian dan prestasi yang dipertingkatkan. Walaupun ciri -ciri lanjutan memerlukan kod tersuai, plugin mengendalikan kerumitan caching dan kemas kini, yang membolehkan pemaju memberi tumpuan kepada logik aplikasi. Mulakan dengan keupayaan luar talian dan meneroka ciri pekerja perkhidmatan yang lebih maju seperti yang diperlukan.

Atas ialah kandungan terperinci Menggunakan plugin Vitepwa untuk laman web luar talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!