AMP

Mengaktifkan fitur Progressive Web App untuk halaman AMP

AMPbyExample memicu permintaan "Tambahkan ke Layar Utama".

Banyak situs yang tidak akan memerlukan apa pun di luar batas AMP. Examples, misalnya, yang merupakan AMP sekaligus Progressive Web App:

  1. AMPbyExample memiliki Manifes Aplikasi Web, yang meminta banner “Tambahkan ke Layar Utama”.
  2. AMPbyExample memiliki Service Worker, sehingga memungkinkan akses offline dan lain sebagainya.

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.

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

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.

Pertama, buat manifes:

{
  "short_name": "ABE",
  "name": "AMPByExample",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

Kemudian, tautkan manifes dari <head> halaman AMP:

<link rel="manifest" href="/manifest.json">

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

Menginstal Service Worker untuk mengaktifkan akses offline

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.

Jika konsep Service Worker merupakan hal baru bagi Anda, baca pendahuluan di WebFundamentals.

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.

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

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

Kemudian, tambahkan parameter berikut di tempat lain dalam <body> (ubah agar mengarah ke Service Worker sebenarnya):

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

Jika pengguna membuka halaman AMP di halaman asli (bukan klik pertama, yang biasanya ditayangkan dari Cache AMP), Service Worker akan mengambil alih dan dapat melakukan banyak hal keren.

Meluaskan Halaman AMP melalui Service Worker

Anda dapat menggunakan teknik di atas untuk mengaktifkan akses offline ke situs AMP, serta meluaskan halaman segera setelah situs ditayangkan dari halaman aslinya. Hal ini terjadi karena Anda dapat mengubah respons melalui kejadian fetch Service Worker, dan mengembalikan respons apa pun yang diinginkan:

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 sebaliknya akan menggagalkan validasi AMP, misalnya:

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