AMPbyExample memicu permintaan "Tambahkan ke Layar Utama".

Banyak situs yang tidak akan memerlukan apa pun di luar batas AMP. AMPbyExample, 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 AMPbyExample 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.

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">

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.

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.