Mengubah situs AMP Anda menjadi PWA

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

Aplikasi Web Progresif (PWA) memanfaatkan kekuatan pekerja layanan untuk mengaktifkan kemampuan offline dan pengalaman pengguna yang konsisten di berbagai keunggulan jaringan. Dengan menyimpan sumber daya di cache di dalam browser, sebuah PWA mampu menyediakan data, aset, dan halaman offline kepada pengguna agar mereka tetap terlibat dan mendapatkan informasi.

Tutorial ini akan mengajari Anda cara mengubah situs AMP menjadi PWA yang dapat diinstal dengan kemampuan offline dengan menambahkan Manifes Web dan Pekerja Layanan yang didukung oleh Pekerja Layanan AMP.

Mengunduh dan menjalankan kode starter

Unduh kode starter di sini.

Gunakan server web lokal untuk melihat pratinjau situs web tersebut.

KIAT – Agar server web cepat, jalankan python -m SimpleHTTPServer.

Anda akan dapat melihat halaman landing untuk Lyrical Lightning, festival Mobile Music Magic. Ada satu tautan di halaman awal untuk melihat jadwal dan di panggung mana band berada.

Pengguna situs kita mungkin mempunyai koneksi yang tidak konsisten saat acara saat kemungkinan besar mereka ingin mengakses jadwal. Ini menjadi kandidat yang sangat bagus untuk diubah menjadi PWA yang dapat diinstal di layar utama pengguna kita, dan menyediakan semua fungsionalitas penting, bahkan saat offline.

Membuat Manifes Aplikasi Web

Manifes aplikasi web adalah sebuah berkas JSON sederhana yang memberi tahu browser tentang aplikasi web Anda dan bagaimana perilaku yang seharusnya saat “diinstal” pada perangkat seluler atau desktop pengguna. Memiliki sebuah manifes diperlukan oleh banyak browser untuk memperlihatkan perintah Menambahkan ke Layar Utama.

Tambahkan sebuah berkas berjudul manifest.json ke repositori Anda dengan mengikuti kode berikut ini:

{
"short_name": "LyLy",
"name": "Lyrical Lyghtning",
"icons": [
{
"src": "./images/amplogo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "./images/amplogo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"background_color": "#222325",
"display": "standalone",
"scope": "/",
"theme_color": "#222325"
}

Menambahkan Pekerja Layanan AMP

Sebuah pekerja layanan adalah skrip yang dijalankan browser Anda di latar belakang, terpisah dari halaman web, yang memperluas fitur-fitur browser dengan menyimpan permintaan di cache untuk meningkatkan kinerja dan menyediakan fungsionalitas offline. Membangun pekerja layanan dari nol dapat dilakukan, namun memakan waktu. Perpustakaan, seperti Workbox, bisa membantu, tetapi AMP selangkah lebih maju dengan menawarkan Pekerja Layanan AMP, dalam hal ini AMP mengotomatiskan banyak langkah secara langsung, termasuk penyimpanan Skrip AMP, aset, dan dokumen di cache serta menerapkan praktik terbaik yang sudah umum, seperti pramuat navigasi.

Pekerja Layanan AMP secara otomatis menyimpan skrip AMP di cache dan dokumen saat pengguna memintanya, setelah menginstalnya. Kita akan memulai dengan menambahkan Pekerja Layanan AMP dasar.

Membuat berkas pekerja layanan

Buat sebuah berkas bernama sw.js, lalu tambahkan kode berikut ini:

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

Dengan hanya dua baris kode, ini mengimpor Pekerja Layanan AMP ke dalam Pekerja Layanan Anda dan memicunya.

Menginstal pekerja layanan Anda secara otomatis di halaman AMP Anda

Situs web AMP menggunakan komponen <amp-install-serviceworker> untuk menginstal pekerja layanan di latar belakang browser, sementara pengguna menikmati konten Anda.

Tempatkan tag skrip yang diperlukan di tajuk index.html dan elemen <amp-install-serviceworker> di dalam <body>:

…

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

…
...
<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>

</body>

Penting – Pekerja layanan harus disajikan dari direktori root (/sw.js) agar dapat menyimpan semua konten situs Anda di cache.

<amp-install-serviceworker> menginstal pekerja layanan dengan membuat iframe dan menjalankan berkas data-iframe-src. Buat berkas install-sw.html dan tambahkan kode berikut ini:

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js');
 };
</script>

Iframe mendaftarkan berkas Pekerja Layanan AMP ke dalam browser.

Menyesuaikan apa yang telah disimpan di cache

Pekerja Layanan AMP dilengkapi dengan keuntungan bawaan dan menyediakan bidang-bidang opsional yang dapat Anda konfigurasi untuk dioptimalkan sesuai dengan kebutuhan aplikasi Anda.

Aplikasi festival musik kami akan menyimpan aset gambar kami di cache, mengambil tautan barisan, dan menentukan sebuah halaman offline.

Menyimpan Aset di Cache

Anda dapat mengonfigurasi Pekerja Layanan AMP untuk menyimpan aset di cache, seperti gambar, video, dan font. Kita akan menggunakannya untuk menyimpan gambar dan logo AMP di cache. Buka berkas sw.js dan perbarui sesuai kode di bawah ini:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}]
});

Kita sudah menentukan bahwa strategi penyimpan di cache adalah cache sebagai prioritas (cache first). Ini berarti, aplikasi akan mencoba menyajikan gambar dari cache terlebih dahulu sebelum meminta apa pun dari jaringan. Hal ini khususnya berguna bagi aplikasi ini karena kita tidak akan memperbarui gambar latar belakang atau logo AMP kita.

Mengambil Tautan Sebelumnya

Pekerja Layanan AMP sebelumnya telah mengambil tautan yang mempunyai atribut data-rel=prefetch. Ini memungkinkan pengguna untuk melihat halaman saat offline, bahkan jika mereka belum pernah berkunjung sebelumnya. Kita akan menambahkan atribut ke tag tautan kita untuk lineup.html.

...
<a href="/lineup.html" data-rel="prefetch">See Full Lineup</a>
...

Memperlihatkan halaman yang offline

Untuk mengatasi kasus yang tidak terduga atau klik pada tautan ke halaman yang tidak kita ambil sebelumnya atau belum disiapkan, kita akan menambahkan sebuah halaman offline untuk menawarkan pengalaman pengguna yang “berpusat pada merek”, yang berbeda dengan memperlihatkan halaman offline browser umum. Unduh offline.html di sini dan perbarui sw.js sesuai dengan kode berikut ini:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
offlinePageOptions: {
url: '/offline.html',
assets: []
}
});

Menguji PWA Anda

Anda dapat menguji apakah Pekerja Layanan AMP menyimpan aset yang diperlukan di cache dan menyediakan solusi offline yang ideal melalui Chrome DevTools.

Kita akan menguji Lyrical Lightning dengan membuka panel DevTools dengan menekan Ctrl + Shift + I pada Windows atau Cmd + Opt + I pada Mac. Anda juga dapat mengeklik kanan pada halaman dan memilih inspect dari menu. Lalu, pilih Application untuk melihat pendaftaran pekerja layanan Anda.

Klik kotak offline untuk beralih ke mode offline. Klik tautan see full lineup dan bernavigasi ke offline.html untuk memeriksa apakah mereka telah disimpan di cache dengan baik dan telah diambil sebelumnya.

Kiat – Untuk memperoleh analisis mendalam tentang fitur-fitur Aplikasi Web Progresif, jalankan alat Google Lighhouse tool untuk membuat laporan.

Selamat!

Anda telah berhasil membuat PWA dengan AMP! Di dalam tutorial ini Anda telah belajar untuk:

Membuat Manifes Aplikasi Web
Menginstal Pekerja Layanan di AMP dengan menggunakan amp-install-serviceworker
Menyesuaikan Pekerja Layanan AMP
Mengambil Tautan Sebelumnya
Membuat sebuah halaman offline

Bacalah lebih lanjut tentang Pekerja Layanan dan pertimbangan UX offline. Pelajari cara melacak keterlibatan dengan analitis dan ikuti tutorial tentang cara mengonfigurasi analitis dasar untuk halaman AMP Anda.

Written by @crystalonscript