Daftar isi

Kemudahan akses offline dan peningkatan kinerja

Important: this documentation is not applicable to your currently selected format stories!

Pekerja layanan memungkinkan pengalaman offline yang kaya dan pengalaman pengguna yang konsisten di berbagai kekuatan jaringan. Dengan menyimpan sumber daya di dalam browser, aplikasi web dapat menyediakan data, aset, dan halaman offline kepada pengguna agar mereka tetap terlibat dan mendapatkan informasi.

Service Worker tidak akan dapat berinteraksi dengan versi halaman yang tersimpan dalam cache AMP. Gunakan untuk melanjutkan perjalanan berikutnya ke halaman asli.

Menambahkan Manifes Aplikasi Web

Ketika pengguna membuka Examples dari platform yang mendukung AMP lalu lanjut mengklik ke situs yang sama, mereka keluar dari Cache AMP ke halaman asli. Tentunya situs masih menggunakan koleksi AMP, namun karena saat ini ditayangkan di halaman asli, situs dapat menggunakan service worker, meminta penginstalan, dan lain-lain.

TIP – Pelajari lebih lanjut tentang Manifes Aplikasi Web di WebFundamentals.

Menambahkan Manifes Aplikasi Web ke halaman AMP memastikan bahwa pengguna dapat menambahkan situs Anda ke layar utama perangkat mereka. Tidak ada yang istimewa tentang manifes Aplikasi Web di AMP.

Kemudian, tautkan manifes dari <head> halaman AMP:

<script async custom-element="amp-install-serviceworker"
  src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

Kemudian, tambahkan komponen berikut ini di tempat lain dalam <body> Anda (ubah agar mengarah ke Pekerja Layanan Anda yang sebenarnya):

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay">
</amp-install-serviceworker>

Jika konsep Service Worker merupakan hal baru bagi Anda, baca pendahuluan di WebFundamentals.
Service Worker adalah proxy sisi-klien yang berada di antara halaman dan server, serta dapat digunakan untuk menciptakan pengalaman akses offline yang memuaskan, skenario pemuatan app shell yang cepat, dan mengirimkan notifikasi push.

Pekerja Layanan AMP

Service Worker perlu didaftarkan pada halaman tertentu, karena jika tidak, browser tidak akan menemukan atau menjalankannya. Secara default, tindakan ini dilakukan dengan bantuan sedikit JavaScript. Pada Halaman AMP, Anda menggunakan komponen amp-install-serviceworker untuk melakukan hal yang sama.

KIAT – Pelajari tutorial kami untuk mengetahui cara menggunakan Pekerja Layanan AMP di PWA Anda.

Menginstal Pekerja Layanan AMP

Untuk melakukannya, sertakan komponen amp-install-serviceworker terlebih dahulu melalui skripnya pada <head> halaman Anda:

 importScripts('https://cdn.ampproject.org/sw/amp-sw.js');

  AMP_SW.init();

Selesai.

Penyimpanan ke Cache Secara Otomatis

Pekerja Layanan AMP secara otomatis menyimpan berkas skrip AMP dan dokumen AMP di dalam cache. Dengan menyimpan berkas skrip AMP di dalam cache, berkas-berkas ini langsung tersedia untuk browser pengguna yang memungkinkan fungsionalitas saat offline dan halaman yang lebih cepat di jaringan yang tidak stabil.

Jika aplikasi Anda memerlukan jenis tertentu dari penyimpanan di cache untuk dokumen, Pekerja Layanan AMP memungkinkan penyesuaian. Seperti menambahkan daftar tolak untuk dokumen yang harus selalu diminta dari jaringan. Dalam contoh berikut ini, ganti Array<RegExp> dengan susunan ekspresi reguler yang mewakili dokumen yang tidak ingin Anda simpan di dalam cache.

AMP_SW.init(
documentCachingOptions: {
denyList?: Array<RegExp>;
}
);

Baca selengkapnya tentang menyesuaikan penyimpanan dokumen di dalam cache di sini.

Mengoptimalkan Pekerja Layanan AMP

Untuk menggunakan Pekerja Layanan AMP secara maksimal, kolom opsional harus dikonfigurasi untuk menyimpan aset yang diperlukan di cache dan untuk mengambil tautan sebelumnya.

Aset yang mendorong kunjungan pengguna ke suatu halaman, seperti video, gambar penting, atau PDF yang dapat diunduh, harus disimpan di dalam cache sehingga dapat diakses kembali jika pengguna sedang offline.

AMP_SW.init(
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
);

Anda dapat menyesuaikan strategi penyimpanan di dalam cache dan menentukan daftar tolak.

Tautan ke halaman yang mungkin perlu dikunjungi pengguna Anda dapat diambil terlebih dahulu, sehingga memungkinkan untuk diakses saat offline. Ini dilakukan dengan menambahkan atribut data-prefetch ke tautan tag.

<a href='....' data-rel='prefetch' />

Pengalaman Offline

Sampaikan kepada pengguna bahwa mereka telah offline, dan harus mencoba memuat ulang situs ketika kembali online, dengan memasukkan halaman offline. Pekerja Layanan AMP dapat menyimpan halaman dan asetnya ke dalam cache.

AMP_SW.init({
offlinePageOptions: {
url: '/offline.html';
assets: ['/images/offline-header.jpg'];
}
})

Halaman offline yang berhasil tampak seperti bagian dari situs Anda dengan memiliki UI yang konsisten terhadap bagian lain aplikasi.

Pembaruan Paksa

Tim kami sedang bekerja untuk menerapkan fitur pembaruan/penghapusan paksa jika Pekerja Layanan AMP Anda perlu dinonaktifkan atau diubah jika ada kesalahan saat melakukan penerapan pada pengguna.

Agar dapat mengelola pekerja server secara efektif, Anda harus memahami bagaimana cache HTTP standar memengaruhi cara JavaScript pekerja layanan Anda tetap diperbarui. Pekerja layanan yang diberikan arahan yang sesuai untuk penyimpanan HTTP di cache dapat menyelesaikan perbaikan bug kecil dengan membuat perubahan yang sesuai dan menerapkan ulang pekerja layanan Anda ke lingkungan pengelola Anda. Jika Anda perlu untuk menghapus pekerja layanan, baik untuk menyimpan berkas pekerja layanan yang sederhana, no-op (tidak operasional) yang berguna, seperti berikut ini:

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

Bacalah lebih lanjut tentang mengelola pekerja layanan yang digunakan.

Meluaskan Halaman AMP melalui Service Worker

Anda dapat menggunakan teknik di atas untuk mengaktifkan akses offline ke situs web AMP, serta meluaskan halaman segera setelah ditayangkan dari asalnya. Hal ini terjadi karena Anda dapat mengubah respons melalui peristiwa fetch Pekerja Layanan, dan menghasilkan respons apa pun yang Anda inginkan:

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite').then(function(cache) {
return cache.match(event.request).then(function(response) {
var fetchPromise = fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
})

        // Ubah respons di sini sebelum hilang..
        ...

        return response || fetchPromise;
      })
    })

);
});

Dengan menggunakan teknik ini, Anda dapat mengubah Halaman AMP dengan segala fungsi tambahan yang perlu dilakukan agar tidak menggagalkan validasi AMP, misalnya:

Fitur dinamis yang memerlukan JS kustom.
Komponen yang disesuaikan/hanya relevan untuk situs Anda.

Written by @CrystalOnScript
with contributions from @pbakaus