Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

Pelacak Sinterklas sebagai PWA

Ringkasan

Pelacak Sinterklas dengan cepat diupgrade ke Progressive Web App offline untuk musim liburan 2016, sebagian besar berkat desain suasana kami yang sudah ada.

Hasil

Sinterklas adalah Progressive Web App (PWA) yang mendukung fitur tambahkan ke layar utama (ATHS) dan offline
10% sesi yang memenuhi syarat dimulai melalui ikon ATHS
75% pengguna secara native mendukung elemen kustom dan shadow DOM, dua bagian inti dari komponen web
Skor Lighthouse 81
Offline, melalui Service Worker API, dikaitkan dengan pemuatan lambat menjadi hanya cache adegan yang dikunjungi dan secara diam-diam mengupgradenya pada rilis baru

Latar belakang

Pelacak Sinterklas adalah tradisi liburan di Google. Setiap tahun, Anda dapat merayakan musim liburan dengan bermain game dan memberikan pengalaman edukasi sepanjang bulan Desember. Dan sementara Sinterklas beristirahat, para kurcaci bekerja untuk melepaskan Pelacak Sinterklas sebagai open source, baik di web maupun untuk Android.

Di web, Pelacak Sinterklas adalah situs interaktif besar dengan banyak 'adegan' unik—yang ditulis menggunakan Polimer—yang mendukung sebagian besar browser modern. Penilaian apakah browser pengguna 'modern' atau tidak ditentukan melalui deteksi fitur: Sinterklas membutuhkan Set dan Web Performance API, di antara lainnya.

Pada tahun 2016, kami mengupgrade mesin di balik Pelacak Sinterklas untuk mendukung pengalaman offline bagi sebagian besar tampilan jam. Tidak termasuk adegan yang didukung oleh video YouTube atau yang berhubungan dengan lokasi langsung Sinterklas, yang tentu saja hanya tersedia dengan koneksi langsung ke Kutub Utara! 📶☃️

Tantangan

Sinterklas menggabungkan desain responsif yang bekerja dengan baik di seluruh ponsel, tablet, dan desktop. Situs ini menyediakan multimedia yang bagus, termasuk visual bergaya dan audio bertema liburan. Namun, versi reguler Pelacak Sinterklas berukuran beberapa ratus megabita! Ada beberapa alasan:

Sinterklas didukung dalam lebih dari 35 bahasa, sehingga banyak aset yang harus diduplikasi.
Platform yang berbeda memiliki dukungan media yang berbeda (misalnya, mp3 vs ogg).
File multimedia terkadang disediakan dalam berbagai ukuran dan resolusi.

Para kurcaci Sinterklas juga bekerja keras sepanjang bulan Desember, sering merilis pembaruan penting baru sepanjang bulan. Artinya, aset yang telah di-cache oleh browser pengguna mungkin perlu diperbarui pada kunjungan berulang.

Tantangan ini:

Referensi multimedia besar untuk berbagai 'adegan'
Perubahan yang dirilis sepanjang bulan

...menyebabkan ketidaksesuaian strategi offline yang sederhana.

Sinterklas, dibangun dengan Polimer

Ada baiknya untuk mundur dan berbicara tentang desain Sinterklas secara keseluruhan sebelum menyelami bagaimana kita mengupgradenya ke PWA offline.

Sinterklas adalah aplikasi web satu halaman, yang awalnya ditulis dalam Polymer 0.5, dan sekarang diupgrade ke Polymer 1,7. Sinterklas terdiri dari serangkaian kode bersama—{i>router<i}, aset navigasi bersama, dll. Video ini juga memiliki banyak 'adegan' yang unik.

Setiap scene dapat diakses melalui URL yang berbeda—/village.html, /codelab.html, dan /boatload.html—dan merupakan komponen webnya sendiri. Saat pengguna membuka scene, kita melakukan pramuat semua HTML dan aset yang diperlukannya (gambar, audio, css, js), yang ada di bawah /scenes/[[sceneName]] di repositori Pelacak Sinterklas. Ketika hal itu terjadi, pengguna akan melihat prapemuat ramah yang menunjukkan kemajuan.

Pendekatan ini berarti kita tidak perlu memuat aset yang tidak perlu untuk adegan yang tidak dilihat pengguna (yang banyak datanya). Ini juga berarti bahwa kita perlu menyimpan 'manifes {i>cache'<i} internal dari semua aset yang dibutuhkan untuk setiap adegan. Manifes cache adalah file JSON yang menyimpan pemetaan dari nama file ke hash MD5 isinya.

Muat kode yang Anda gunakan

Model ini menghemat bandwidth, hanya menyajikan sumber daya yang diperlukan untuk adegan yang dikunjungi pengguna, bukan daripada memuat seluruh situs sekaligus. Pelacak Sinterklas memanfaatkan kemampuan Polymer untuk meningkatkan versi elemen khusus saat waktu proses, bukan pada waktu pemuatan. Perhatikan cuplikan berikut:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

Pelacak Sinterklas mengambil langkah berikut untuk memuat adegan, misalnya, boatload-scene:

Semua elemen suasana (termasuk <boatload-scene>) awalnya tidak diketahui dan semuanya diperlakukan sebagai HTMLUnknownElement dengan beberapa atribut tambahan.
Saat suasana yang dipilih diubah, elemen <lazy-pages> akan diberi tahu.
Elemen <lazy-pages> me-resolve elemen scene dan atribut path, yang memuat HTML impor scenes/boatload/boatload-scene_en.html. Elemen ini berisi elemen Polymer dan elemen yang bergantung padanya.
Prapemuat yang ramah ditampilkan.
Setelah impor HTML dimuat dan dijalankan, <boatload-scene> secara transparan diupgrade menjadi elemen Polimer asli, penuh dengan keceriaan liburan. 🎄🎉

Pendekatan ini memiliki tantangan. Misalnya, kita tidak ingin menyertakan komponen web duplikat. Jika dua adegan menggunakan elemen yang sama, misalnya, paper-button, kita menghapusnya sebagai bagian dari build kita dan sebagai gantinya menyertakannya dalam kode bersama Sinterklas.

Desain offline

Pelacak Sinterklas sudah tersegmentasi dengan rapi menjadi beberapa adegan berkat Polymer dan lazy-pages; ditambah masing-masing scene memiliki direktorinya sendiri. Kami merancang pekerja layanan Pelacak Sinterklas, bagian inti yang memungkinkan koneksi offline di browser pengguna, untuk mengetahui kode yang dibagikan versus 'scene' perbedaan besar.

Apa teori di balik Service Worker? Saat pengguna di browser yang didukung memuat situs Anda, HTML frontend dapat meminta agar pekerja layanan diinstal. Untuk Pelacak Sinterklas, pekerja layanan berada di /sw.js. Tindakan ini memicu peristiwa install yang akan melakukan precache semua kode bersama Sinterklas, sehingga tidak ada yang perlu diambil saat runtime.

Setelah diinstal, Service Worker dapat mencegat semua permintaan HTTP. Untuk Pelacak Sinterklas, alur keputusan yang disederhanakan terlihat seperti ini:

Apakah permintaan sudah di-cache?
- Bagus! Menampilkan respons yang di-cache.
Apakah permintaan tersebut cocok dengan direktori suasana, seperti " scene/boatload/boatload-scene_en.html"?
- Lakukan permintaan jaringan, dan simpan hasilnya di cache sebelum mengembalikannya ke pengguna.
Jika tidak, lakukan permintaan jaringan reguler.

Alur dan peristiwa install memungkinkan Pelacak Sinterklas untuk dimuat, bahkan saat pengguna sedang offline. Namun, hanya adegan yang telah dimuat sebelumnya yang akan tersedia. Ini sangat cocok untuk memutar ulang pertandingan dan mengalahkan skor tertinggi Anda.

Pengamat yang antusias mungkin mencatat bahwa strategi penyimpanan dalam cache kami tidak mengizinkan perubahan dalam konten. Setelah file di-cache di browser pengguna, file tidak akan pernah diubah. Selengkapnya mengenai hal itu akan dibahas nanti.

Kami akan melakukannya secara live

Seperti yang telah kami sebutkan, para kurcaci Sinterklas bekerja keras sepanjang bulan Desember, dan mereka sering kali harus melepaskan pembaruan terkini sepanjang bulan. Saat rilis Pelacak Sinterklas dibuat, rilis tersebut diberi label unik—misalnya, v20161204112055, stempel waktu rilis (11:20:55 pada 4 Desember 2016).

Untuk rilis berlabel ini, kami membuat {i>hash<i} MD5 dari setiap file dan menyimpannya di {i>'cache<i} manifes'. Pada solid-state disk modern, proses ini hanya menambahkan beberapa detik ke proses build.

Setiap rilis di-deploy ke jalur unik di server cache statis Google. Artinya, rilis lama tidak akan pernah dihapus. Artinya, setelah rilis baru, semua aset akan memiliki URL yang berbeda—meskipun tidak perubahan—dan apa pun yang di-cache oleh browser atau pekerja layanan tidak akan berguna, kecuali jika kita melakukan pekerjaan ekstra.

Kami juga menerapkan versi baru yang kami sebut "prod" resource—HTML dan layanan indeks Sinterklas worker—yang aktif di https://santatracker.google.com/. Tindakan ini akan menimpa versi lama.

Setiap kali Pelacak Sinterklas dimuat, browser akan memeriksa pekerja layanan yang diperbarui dan mengambilnya, jika yang tersedia. Dalam kasus kita, setiap rilis menghasilkan kode yang berbeda dalam byte. Browser melihatnya sebagai upgrade, dan melakukan peristiwa install baru.

Pada tahap ini, browser pengguna akan melihat 'manifes cache' baru. Ini akan dibandingkan dengan cache pengguna yang sudah ada dan jika aset memiliki {i>hash<i} MD5 yang berbeda, kita menghapusnya dari {i>cache<i}, dan meminta {i>browser<i} untuk mengambilnya kembali. Namun, dalam sebagian besar kasus, konten yang di-cache sebagian besar sama atau hanya memiliki sedikit perbedaan.

Di Pelacak Sinterklas, mengupgrade pekerja layanan akan menyebabkan browser pengguna langsung dimuat ulang.

Pengalaman penjelajahan offline

Tentu saja, kami juga harus membuat beberapa perubahan pada UI untuk mendukung pengalaman offline—dan untuk membuat lebih mudah dipahami bagi pengguna yang mungkin tidak berharap bahwa {i>website<i} dapat berfungsi secara {i>offline<i}.

Spanduk kecil memberi tahu Anda saat Anda menjelajah secara offline. Semua adegan yang tidak di-cache akan "dibekukan" dan tidak bisa diklik. Dengan demikian, pengguna tidak dapat mengakses konten yang tidak tersedia.

Pelacak Sinterklas membuat permintaan rutin ke API Sinterklas. Jika permintaan tersebut gagal atau waktu tunggu habis, kami mengasumsikan bahwa pengguna sedang offline. Kami menggunakan API ini, bukan navigator.onLine bawaan browser properti: ini hanya akan memberi tahu kita apakah pengguna sedang {i>online<i}. (Hal ini juga dikenal sebagai Lie-Fi).

Koneksi internasional

Meskipun mayoritas pengguna kami menggunakan bahasa Inggris (diikuti oleh bahasa Jepang, Portugis, Spanyol, dan Prancis), Sinterklas dibuat dan dirilis dalam lebih dari 35 bahasa.

Ketika pengguna memuat Pelacak Sinterklas, kita menggunakan bahasa browser dan petunjuk lain untuk memilih bahasa yang akan ditayangkan. Sebagian besar pengguna tidak pernah menimpa bahasa ini. Namun, jika pengguna memilih bahasa baru melalui pemilih kami, kami memperlakukan hal ini seolah-olah sebuah upgrade tersedia—seperti dalam kasus di atas, ketika versi baru Pelacak Sinterklas tersedia.

Dengan kata lain, versi Pelacak Sinterklas saat ini untuk tujuan pekerja layanan sebenarnya adalah tuple (build,language).

Tambahkan ke layar utama

Karena Sinterklas bekerja offline dan menyediakan pekerja layanan, pengguna yang memenuhi syarat diminta untuk memasang ke layar beranda. Pada tahun 2016, sekitar 10% pemuatan yang memenuhi syarat berasal dari ikon layar utama.

Kesimpulan

Kami bisa dengan cepat mengonversi Pelacak Sinterklas menjadi PWA offline—memungkinkan perangkat seluler — berkat desain suasana kami yang sudah ada, menjadi mudah melalui penggunaan Polymer dan komponen web. Versi ini juga memanfaatkan sistem build kami untuk melakukan upgrade yang efisien, dengan hanya membatalkan validasi aset yang diubah.

Meskipun Sinterklas sebagian besar merupakan solusi yang dibangun secara khusus, banyak prinsipnya dapat ditemukan di Polymer App Toolbox project. Sebaiknya Anda melihatnya jika Anda membuat PWA baru dari awal—atau, jika Anda mencari agnostik kerangka kerja, coba metode Library Workbox.