Kami menciptakan Shadow Reader untuk menunjukkan bagaimana halaman AMP bisa digunakan dalam Progressive Web App (PWA) (baca postingan pemberitahuan kami untuk konteks selengkapnya). Situs ini menghidupkan kembali artikel yang ada dari The Guardian menjadi pengalaman yang mendalam dalam membaca berita. Lebih dari sekadar demo, halaman ini ditujukan sebagai situs yang berfungsi penuh. Ia berisi kode end-to-end yang dibutuhkan untuk menggabungkan AMP dan PWA secara efektif... ini siap produksi!
SEO untuk konten yang dihasilkan JS
Seperti halnya aplikasi halaman tunggal yang berdiri sendiri, payload HTML awal Shadow Reader berukuran kecil. Ia adalah shell aplikasi ramping yang dimuat dengan cepat, memberikan pengguna sesuatu untuk dilihat saat JavaScript memuat konten utama. Pendekatan ini menghasilkan pengalaman pengguna yang baik!
Sayangnya, hal ini juga bisa menghadirkan tantangan bagi mesin telusur. Google akan mencoba mengeksekusi JavaScript untuk mengindeks apa yang akhirnya ditampilkan kepada pengguna, bukan hanya HTML awal. Namun banyak mesin telusur tidak melakukannya atau melakukannya tetapi tidak dapat diandalkan. Dengan kata lain, tidak aman bergantung pada mesin telusur untuk secara sukses mengeksekusi JavaScript Anda. Dan jika mesin telusur hanya melihat shell aplikasi, tanpa melihat sebagian besar atau semua konten, ia tidak akan dapat mengindeks halaman dengan benar.
Bukankah lebih baik jika halaman artikel Shadow Reader ditampilkan ke mesin telusur dengan teks langsung disertakan dalam HTML? Dan bukankah luar biasa jika proses itu tidak memperlambat rendering, tetapi justru memberi kita cara untuk menyajikan halaman tersebut ke pengguna baru dalam waktu kurang dari satu detik?
Ternyata kita bisa melakukan keduanya dengan menyajikan artikel versi AMP ke pengguna baru! Karena, crawler web juga terlihat di server sebagai pengguna baru. Jadi... bagaimana kami melakukannya?
AMP⇒PWA
Kami melakukannya dengan menerapkan pola AMP⇒PWA. Begini cara kerjanya!
Untuk pengguna baru:
- Ketika pengguna baru mengunjungi halaman artikel, kami menyajikan artikel versi AMP.
- AMP menggunakan <amp-install-serviceworker> untuk memuat dan menginstal pekerja layanan.
- Pekerja layanan memuat dan men-cache shell aplikasi.
- Pada navigasi halaman berikutnya, pekerja layanan memegang kendali – dan dengan lembut membawa pengguna ke PWA pada halaman berikutnya.
Untuk pengguna lama, kami cukup menyajikan PWA.
Itulah bagaimana situs kami bisa memperlakukan pengguna baru dan pengguna lama secara berbeda di URL yang sama. Untuk pengguna lama, pekerja layanan akan diinstal. Dan, ketika pekerja layanan melihat sebuah URL artikel, ia menyajikan versi cache dari PWA.
Bagaimana proses ini berjalan di Shadow Reader? Misalnya, seorang pengguna pertama kali mengunjungi halaman artikel ini:
https://amp.cards/theguardian/us/amazing_article
Setelah melihat sebuah URL artikel, server menampilkan versi AMP dari artikel tersebut, tetapi satu yang menginstal pekerja layanan saat artikel dimuat. Pekerja layanan, menggunakan library Workbox, memuat baris ini:
workboxSW.router.registerNavigationRoute('index.html')
Ini berarti, setiap kali pengguna membuka URL baru di domain ini, pekerja layanan melihat permintaan itu, dan sebagai ganti meneruskannya ke server, ia hanya menyajikan versi cache dari index.html. Itulah PWA kita.
Jadi, bila pengguna berikutnya mengklik pada link
https://amp.cards/theguardian/us/another_article
pekerja layanan menyajikan HTML PWA yang di-cache. Namun URL tersebut tidak berubah! Jadi ketika PWA melihat URL untuk menguraikan artikel apa yang diminta, ia melihat link yang diminta pengguna, dan ia bisa memuat artikel yang tepat ke dalam PWA.
Setelah itu, setiap kali pengguna meminta link Shadow Reader, pekerja layanan sudah terinstal, dan menyajikan PWA yang di-cache.
Karena crawler web tidak mengizinkan kita menginstal pekerja layanan, crawler web selalu mendapatkan tampilan artikel AMP.
Inilah alurnya dalam diagram yang indah:
Untuk pengguna baru:
- Browser meminta URL artikel dari server. Server menampilkan versi AMP dari artikel yang menyertakan <amp-install-serviceworker>.
- JS pekerja layanan milik AMP menyebabkan browser meminta pekerja layanan. Server mengirim JS pekerja layanan ke browser. Browser menginstal pekerja layanan dan memulainya.
- Pekerja layanan mengirim sebuah permintaan ke server untuk shell aplikasi PWA. Server mengirim sumber daya tersebut ke pekerja layanan, yang men-cache-nya.
Untuk pengguna lama:
- Browser mengirim permintaan untuk URL artikel. Permintaan ini dicegat oleh pekerja layanan. Pekerja layanan menampilkan PWA yang di-cache ke browser.
- PWA meminta artikel AMP. Permintaan ini mencapai server, yang menampilkan artikel AMP ke PWA. PWA memproses dan menampilkan artikel tersebut.
Ingatlah, crawler web selalu menjadi pengguna baru!
Apa Berikutnya?
Setelah Shadow Reader memiliki server sendiri, kami mempunyai AGENDA baru:
- Pada masa mendatang, kami bisa mengabaikan YQL, cukup menggunakan feed RSS Guardian secara langsung.
- Kami juga harus mengganti link navigasi atas Guardian dengan link Shadow Reader.
- Kami meminta AMP Cache untuk mendownload dan menjalankan seluruh Shadow Reader dalam sebuah iframe: <amp-install-serviceworker data-iframe-src=”https://amp.cards/index.html“>. Mungkin lebih baik bagi pengguna biasa untuk menetapkan halaman yang lebih kecil sebagai gantinya.
- Backend.js sekarang digunakan di server begitu juga front-end, dan cara kami melakukannya sedikit menggunakan trik. Mungkin kami harus mengoptimalkan kode untuk menggunakan modul ECMAScript?
Silakan coba ini, lihat kode di github, dan beri tahu kami pendapat Anda! Kami ingin tahu mengenai cara Anda mencoba pola AMP/PWA di situs Anda sendiri, dan kami mengharapkan ide-ide dari Anda untuk penyempurnaan Shadow Reader.
Ditulis oleh Ben Morss, Developer Advocate, Google
