Hindari masalah cache HTTP ketika memperbarui aplikasi ASP.NET Core Blazor

Nota

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 10 dari artikel ini.

Peringatan

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi lebih lanjut, lihat Kebijakan Dukungan .NET dan .NET Core . Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Artikel ini menjelaskan cara menghindari masalah cache HTTP saat meningkatkan aplikasi Blazor.

Ketika Blazor aplikasi dikembangkan atau dikonfigurasi salah, hal ini dapat mengakibatkan peningkatan yang tidak lancar untuk pengguna yang ada. Artikel ini membahas beberapa masalah cache HTTP umum yang dapat terjadi saat meningkatkan aplikasi Blazor antar versi utama. Ini juga menyediakan beberapa tindakan yang direkomendasikan untuk memastikan transisi yang lancar bagi pengguna Anda.

Meskipun rilis di masa mendatang Blazor mungkin memberikan solusi yang lebih baik untuk menangani masalah caching HTTP, pada akhirnya terserah aplikasi untuk mengonfigurasi caching dengan benar. Konfigurasi penyimpanan sementara yang tepat memastikan bahwa pengguna aplikasi selalu memiliki versi aplikasi yang paling terbaru, meningkatkan pengalaman mereka dan mengurangi kemungkinan mengalami kesalahan.

Masalah umum yang berdampak negatif pada pengalaman peningkatan pengguna meliputi:

• Penanganan pembaruan proyek dan paket yang salah: Ini terjadi jika Anda tidak memperbarui semua proyek yang disebarkan aplikasi untuk menggunakan versi kerangka kerja utama yang sama atau jika Anda menggunakan paket dari versi sebelumnya saat versi yang lebih baru tersedia sebagai bagian dari peningkatan utama.
• Konfigurasi header cache yang tidak benar: Header cache HTTP mengontrol cara, di mana, dan berapa lama respons aplikasi di-cache. Jika header tidak dikonfigurasi dengan benar, pengguna mungkin menerima file kedaluarsa atau tidak cocok. Ini termasuk Blazor caching aset bundel, di mana header caching server harus diatur dengan benar untuk menghindari masalah caching pada klien.
• Konfigurasi lapisan lain yang salah: Content Delivery Networks (CDN) dan lapisan lain dari aplikasi yang disebarkan dapat menyebabkan masalah jika salah dikonfigurasi. Misalnya, CDN dirancang untuk menyimpan dan mengirimkan konten untuk meningkatkan performa dan mengurangi latensi. Jika CDN salah melayani versi aset yang di-cache, CDN dapat menyebabkan pengiriman konten kedaluarsa kepada pengguna.

Mendeteksi dan mendiagnosis masalah peningkatan

Masalah peningkatan biasanya muncul sebagai kegagalan untuk memulai aplikasi di browser. Biasanya, peringatan menunjukkan adanya aset kedaluarsa atau aset yang hilang atau tidak konsisten dengan aplikasi.

• Pertama, periksa apakah aplikasi berhasil dimuat dalam instans browser yang bersih. Gunakan mode browser privat untuk memuat aplikasi, seperti mode Microsoft Edge InPrivate atau mode Penyamaran Google Chrome. Jika aplikasi gagal dimuat, kemungkinan berarti bahwa satu atau beberapa paket atau kerangka kerja tidak diperbarui dengan benar.
• Jika aplikasi dimuat dengan benar dalam instans browser yang bersih, kemungkinan aplikasi dilayani dari cache kedaluarsa. Dalam kebanyakan kasus, penyegaran paksa browser dengan Ctrl+F5 menghapus cache, yang memungkinkan aplikasi untuk memuat dan menjalankan aset terbaru.
• Jika aplikasi terus gagal, kemungkinan cache CDN kedaluarsa melayani aplikasi. Cobalah untuk menghapus cache DNS melalui mekanisme apa pun yang ditawarkan penyedia CDN Anda.

Tindakan yang direkomendasikan sebelum peningkatan

Proses sebelumnya untuk melayani aplikasi mungkin membuat proses pembaruan lebih menantang. Misalnya, tidak menggunakan atau salah menerapkan header penyimpanan sementara di masa lalu dapat menyebabkan masalah penyimpanan sementara bagi pengguna saat ini. Anda dapat mengambil tindakan di bagian berikut untuk mengurangi masalah dan meningkatkan proses peningkatan bagi pengguna.

Menyelaraskan paket kerangka kerja dengan versi kerangka kerja

Pastikan paket kerangka kerja sejalan dengan versi kerangka kerja. Menggunakan paket dari versi sebelumnya saat versi yang lebih baru tersedia dapat menyebabkan masalah kompatibilitas. Penting juga untuk memastikan bahwa semua proyek yang disebarkan aplikasi menggunakan versi kerangka kerja utama yang sama. Konsistensi ini membantu menghindari perilaku dan kesalahan yang tidak terduga.

Verifikasi keberadaan header caching yang benar

Header cache yang tepat harus disertakan dalam respons terhadap permintaan sumber daya. Ini termasuk ETag, Cache-Control, dan header caching lainnya. Konfigurasi header ini tergantung pada layanan hosting atau platform server hosting. Mereka penting sekali untuk aset seperti Blazor skrip dan segala sesuatu yang diunduh oleh skrip.

Header cache HTTP yang salah juga dapat berdampak pada service worker. Service worker mengandalkan header cache untuk mengelola sumber daya cache secara efektif. Oleh karena itu, header yang salah atau hilang dapat mengganggu fungsionalitas pekerja layanan.

Gunakan Clear-Site-Data untuk menghapus status di browser

Pertimbangkan untuk menggunakan Clear-Site-Data header untuk menghapus status di browser.

Biasanya sumber masalah status cache terbatas pada cache browser HTTP, sehingga penggunaan arahan cache harus cukup. Tindakan ini dapat membantu memastikan bahwa browser mengambil sumber daya terbaru dari server, daripada menyajikan konten kedaluarsa dari cache.

Anda dapat secara opsional menyertakan direktif storage untuk menghapus cache penyimpanan lokal secara bersamaan saat Anda menghapus cache browser HTTP. Namun, aplikasi yang menggunakan penyimpanan klien mungkin mengalami hilangnya informasi penting jika arahan storage digunakan.

Tambahkan string kueri ke tag skrip Blazor

Jika tidak ada tindakan yang direkomendasikan sebelumnya yang efektif, dapat digunakan dalam penyebaran Anda, atau diterapkan pada aplikasi Anda, pertimbangkan untuk sementara menambahkan string kueri ke sumber tag skrip Blazor<script>. Tindakan ini harus cukup dalam sebagian besar situasi untuk memaksa browser melewati cache HTTP lokal dan mengunduh versi baru aplikasi. Tidak perlu membaca atau menggunakan string kueri di aplikasi.

Dalam contoh berikut, kueri string temporaryQueryString=1 diterapkan sementara ke URI sumber eksternal relatif dari tag <script>.

<script src="_framework/blazor.webassembly.js?temporaryQueryString=1"></script>

Setelah semua pengguna aplikasi memuat ulang aplikasi, string kueri dapat dihapus.

Atau, Anda dapat menerapkan string kueri persisten dengan versi yang relevan. Contoh berikut mengasumsikan bahwa versi aplikasi cocok dengan versi rilis .NET (8 untuk .NET 8):

<script src="_framework/blazor.webassembly.js?version=8"></script>

Untuk lokasi Blazor tag skrip<script>, lihat struktur proyek ASP.NET CoreBlazor.