Amp-install-serviceworker
Komponen amp-install-serviceworker memungkinkan berkerja melalui sumber yang sama atau melalui cache dari Google AMP.
Pekerja layanan dapat berjalan di latar belakang bahkan ketika browser ditutup, menyimpan konten yang diperlukan sebelum waktu pemrosesan, mengirim pemberitahuan kepada pengguna dan banyak lagi. Contoh ini menginstal pekerja layanan & nbsp; yang menyimpan cache halaman ini di latar belakang. Anda dapat menguji halaman ini saat sedang offline setelah pekerja layanan diinstal.
Pekerja layanan saat ini tersedia di Chrome, Firefox dan Opera.
Persiapan
Masukan komponen amp-install-serviceworker.
Masukkan skrip berikut tepat setelah pembukaan <head>
Instalasi pekerja layanan
Panggilan ke amp-install-serviceworker dapat menyertakan atribut src dan data-iframe-src. Src adalah lokasi pekerja layanan & nbsp; yang akan diinstal dan digunakan ketika dokumen diakses dengan sumber yang sama dengan file layanan. Ketika dokumen diakses melalui cache Google AMP, dokumen HTML yang dijelaskan dalam atribut data-iframe-src digunakan untuk menginstal pekerja layanan. Disarankan untuk menggunakan kedua atribut tersebut.
Dalam contoh ini, ketika pengguna mengakses halaman AMP ini untuk kedua kalinya, pekerja layanan diinstal dan cache semua file gambar dan file video di bawah jalur root dari domain ini.
Konfirmasikan bahwa pekerja layanan diinstal dan berfungsi seperti yang diharapkan dengan mengikuti langkah-langkah di bawah ini:
- Akses a amp-install-serviceworker dua kali
- Buka Chrome dan navigasikan ke tab "Recursos" (o "Aplicación" dalam versi terbaru dari Chrome). Di bagian ini " /sw.js layanan" Anda dapat melihat bahwa /sw.js diinstal.
- Selanjutnya, buka bagian "Caching". Menampilkan semua gambar dan video yang disimpan dalam cache.
- Nonaktifkan koneksi jaringan dan muat ulang halaman ini. Itu masih berfungsi! Di tab "Jaringan" pada Alat Bantu, Anda akan melihat sumber daya apa yang di-cache oleh layanan.
Pekerja layanan dapat berjalan di latar belakang bahkan ketika browser ditutup, menyimpan konten yang diperlukan sebelum waktu pemrosesan, mengirim pemberitahuan kepada pengguna dan banyak lagi. Contoh ini menginstal pekerja layanan & nbsp; yang menyimpan cache halaman ini di latar belakang. Anda dapat menguji halaman ini saat sedang offline setelah pekerja layanan diinstal.
Pekerja layanan saat ini tersedia di Chrome, Firefox dan Opera.
Persiapan
Masukan komponen amp-install-serviceworker.
Masukkan skrip berikut tepat setelah pembukaan <head>
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
Instalasi pekerja layanan
Panggilan ke amp-install-serviceworker dapat menyertakan atribut src dan data-iframe-src. Src adalah lokasi pekerja layanan & nbsp; yang akan diinstal dan digunakan ketika dokumen diakses dengan sumber yang sama dengan file layanan. Ketika dokumen diakses melalui cache Google AMP, dokumen HTML yang dijelaskan dalam atribut data-iframe-src digunakan untuk menginstal pekerja layanan. Disarankan untuk menggunakan kedua atribut tersebut.
<amp-install-serviceworker src="/sw.js" data-iframe-src="https://ampbyexample.com/sw.html" layout="nodisplay"> </amp-install-serviceworker>
The service worker in this sample uses sw-toolbox, a helper library for implementing service workers.
Dalam contoh ini, ketika pengguna mengakses halaman AMP ini untuk kedua kalinya, pekerja layanan diinstal dan cache semua file gambar dan file video di bawah jalur root dari domain ini.
Konfirmasikan bahwa pekerja layanan diinstal dan berfungsi seperti yang diharapkan dengan mengikuti langkah-langkah di bawah ini:
- Akses a amp-install-serviceworker dua kali
- Buka Chrome dan navigasikan ke tab "Recursos" (o "Aplicación" dalam versi terbaru dari Chrome). Di bagian ini " /sw.js layanan" Anda dapat melihat bahwa /sw.js diinstal.
- Selanjutnya, buka bagian "Caching". Menampilkan semua gambar dan video yang disimpan dalam cache.
- Nonaktifkan koneksi jaringan dan muat ulang halaman ini. Itu masih berfungsi! Di tab "Jaringan" pada Alat Bantu, Anda akan melihat sumber daya apa yang di-cache oleh layanan.