Saat membuat permintaan, header range
dapat ditetapkan yang memberi tahu
server untuk hanya menampilkan sebagian dari permintaan lengkap. Hal ini
berguna untuk file tertentu seperti file video, tempat pengguna
dapat mengubah tempat memutar video.
Apa fungsi modul ini?
Mungkin ada skenario saat Anda ingin menayangkan file yang di-cache,
tetapi browser telah menetapkan header range
. Biasanya header
akan diabaikan.
Modul ini akan membaca respons yang di-cache dan menampilkan rentang data yang ditentukan.
Penggunaan Dasar
Anda dapat menggunakan Permintaan Rentang Workbox dengan menambahkan plugin ke strategi yang ingin Anda periksa untuk mengetahui permintaan rentang.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {RangeRequestsPlugin} from 'workbox-range-requests';
registerRoute(
({url}) => url.pathname.endsWith('.mp4'),
new CacheFirst({
plugins: [
new RangeRequestsPlugin(),
],
});
);
Penggunaan Lanjutan
Jika ingin menggunakan logika ini di luar Plugin, Anda
dapat menggunakan fungsi createPartialResponse()
.
import {createPartialResponse} from 'workbox-range-requests';
createPartialResponse(request, cachedResponse);
Untuk mengetahui informasi selengkapnya, lihat dokumen referensi.
Jenis
RangeRequestsPlugin
Plugin permintaan rentang memudahkan permintaan dengan header 'Range' dipenuhi oleh respons yang di-cache.
Hal ini dilakukan dengan mengintersep callback plugin cachedResponseWillBeUsed
dan menampilkan subset yang sesuai dari isi respons yang di-cache.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:() => {...}
-
akan menampilkan
-
Metode
createPartialResponse()
workbox-range-requests.createPartialResponse(
request: Request,
originalResponse: Response,
)
Jika objek Request
dan Response
ditetapkan sebagai input, tindakan ini akan menampilkan promise untuk Response
baru.
Jika Response
asli sudah berisi sebagian konten (yaitu, memiliki
status 206), maka hal ini mengasumsikan bahwa kode tersebut telah memenuhi persyaratan Range:
,
dan akan menampilkannya sebagaimana adanya.
Parameter
-
minta
Permintaan
Permintaan, yang harus berisi header Range:.
-
originalResponse
Respons
Respons.
Hasil
-
Promise<Response>
Respons
206 Partial Content
, dengan isi respons ditetapkan ke bagian konten yang ditentukan oleh headerRange:
permintaan, atau respons416 Range Not Satisfiable
jika kondisi headerRange:
tidak dapat terpenuhi.