Bersiaplah menghadapi akhir cookie pihak ketiga di Chrome. Uji situs Anda sekarang untuk menemukan kerusakan apa pun.

Halaman ini diterjemahkan oleh Cloud Translation API.

Pelacak Sinterklas sebagai PWA

Ringkasan

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

Hasil

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

Latar belakang

Pelacak Sinterklas adalah tradisi liburan di Google. Setiap tahun, Anda dapat merayakan musim ini dengan game dan pengalaman edukasi sepanjang bulan Desember. Dan meskipun Sinterklas sedang beristirahat, para kurcaci berupaya merilis Pelacak Sinterklas sebagai open source, baik di web maupun untuk Android.

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

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

Tantangan

Sinterklas menggabungkan desain responsif yang berfungsi dengan baik di seluruh ponsel, tablet, dan desktop. Situs ini menghadirkan multimedia yang luar biasa, termasuk visual bergaya dan audio bertema liburan. Namun, versi reguler Pelacak Sinterklas adalah beberapa ratus megabita! Hal ini terjadi karena beberapa alasan:

Sinterklas didukung dalam lebih dari 35 bahasa, jadi 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 kali merilis update penting baru sepanjang bulan. Artinya, aset yang telah disimpan dalam cache oleh browser pengguna mungkin perlu diperbarui pada kunjungan berulang.

Tantangan ini:

Sumber daya multimedia yang besar untuk beragam 'adegan'
Perubahan yang dirilis sepanjang bulan

...menyebabkan ketidaksesuaian pada strategi offline yang naif.

Sinterklas, dibuat dengan Polimer

Ada baiknya untuk berhenti sejenak dan membahas desain Santa secara keseluruhan sebelum mempelajari bagaimana kami mengupgradenya ke PWA offline.

Santa adalah aplikasi satu halaman, yang awalnya ditulis dalam Polymer 0.5, dan sekarang diupgrade ke Polymer 1.7. Sinterklas terdiri dari serangkaian kode bersama—router, aset navigasi bersama, dll. Sinterklas juga memiliki banyak 'adegan' unik.

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

Pendekatan ini berarti bahwa kita tidak perlu memuat aset yang tidak perlu untuk scene yang tidak dilihat pengguna (yang merupakan banyak data). Ini juga berarti bahwa kita harus menyimpan 'manifes cache' internal dari semua aset yang diperlukan untuk setiap scene. Manifes cache adalah file JSON yang menyimpan pemetaan dari nama file ke hash MD5 kontennya.

Memuat data yang Anda gunakan

Model ini menghemat bandwidth, hanya menayangkan resource yang diperlukan untuk scene yang dikunjungi pengguna, bukan melakukan pramuat seluruh situs sekaligus. Pelacak Sinterklas memanfaatkan kemampuan Polymer untuk mengupgrade elemen khusus saat runtime, bukan pada waktu pemuatan. Pertimbangkan 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 melakukan langkah-langkah berikut untuk memuat adegan, misalnya, boatload-scene:

Semua elemen scene (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 scenes/boatload/boatload-scene_en.html impor HTML. File ini berisi elemen Polymer dan elemen-elemen yang bergantung padanya.
Prapemuat yang sesuai ditampilkan.
Setelah impor HTML dimuat dan dieksekusi, <boatload-scene> secara transparan diupgrade ke elemen Polymer sungguhan, yang 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 proses build dan menyertakannya dalam kode bersama Santa.

Desain offline

Pelacak Sinterklas sudah tersegmentasi dengan rapi menjadi beberapa adegan berkat Polymer dan lazy-pages; plus setiap adegan memiliki direktorinya sendiri. Kami merancang pekerja layanan Pelacak Sinterklas, bagian inti yang memungkinkan penggunaan offline yang berjalan di browser pengguna, untuk menyadari kode yang dibagikan versus perbedaan 'adegan'.

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 tinggal di /sw.js. Tindakan ini akan memicu peristiwa install yang akan melakukan pramuat semua kode yang dibagikan oleh 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 cocok dengan direktori adegan, 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 dimuat, bahkan saat pengguna sedang offline. Namun, hanya scene yang telah dimuat sebelumnya oleh pengguna yang akan tersedia. Game ini cocok untuk memainkan ulang game dan mengalahkan skor tertinggimu.

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

Kami akan menayangkannya

Seperti yang telah kami sebutkan, para kurcaci Sinterklas bekerja keras sepanjang bulan Desember, dan mereka sering kali harus merilis update baru 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 hash MD5 dari setiap file dan menyimpannya dalam 'manifes cache' kami. Pada solid-state disk modern, proses build hanya akan menambahkan beberapa detik.

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

Kami juga men-deploy versi baru dari resource yang kami sebut sebagai resource "prod"—HTML indeks Santat dan pekerja layanan—yang tersedia 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 tersedia. Dalam hal ini, setiap rilis menghasilkan kode byte yang berbeda. Browser melihatnya sebagai upgrade, dan melakukan peristiwa install baru.

Pada tahap ini, browser pengguna akan melihat 'manifes cache' baru. Hal ini akan dibandingkan dengan cache pengguna yang ada. Jika aset memiliki hash MD5 yang berbeda, kami akan menghapusnya dari cache, dan meminta browser untuk mengambilnya kembali. Namun, pada umumnya, konten yang disimpan dalam cache sebagian besar sama atau hanya memiliki sedikit perbedaan.

Di Pelacak Sinterklas, meningkatkan layanan pekerja akan menyebabkan browser pengguna segera dimuat ulang.

Pengalaman penjelajahan offline

Tentu saja, kami juga harus membuat beberapa perubahan pada UI untuk mendukung pengalaman offline—dan untuk membuatnya lebih mudah dipahami bagi pengguna yang mungkin tidak berharap situs dapat berfungsi secara offline.

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

Pelacak Sinterklas membuat permintaan rutin ke API Sinterklas. Jika permintaan ini gagal atau habis waktu tunggunya, kami menganggap pengguna sedang offline. Kami menggunakan API ini, bukan properti navigator.onLine bawaan browser: ini hanya akan memberi tahu kami apakah pengguna mungkin sedang online. (Hal ini juga dikenal sebagai Lie-Fi).

Hubungan internasional

Meskipun sebagian besar pengguna kami menggunakan bahasa Inggris (diikuti dengan bahasa Jepang, Portugis, Spanyol, dan Prancis), Santa dibuat dan dirilis dalam lebih dari 35 bahasa berbeda.

Saat pengguna memuat Pelacak Sinterklas, kami menggunakan bahasa browser dan isyarat lainnya untuk memilih bahasa yang akan disajikan. Sebagian besar pengguna tidak pernah menimpa bahasa ini. Namun, jika pengguna memilih bahasa baru melalui pemilih, kami akan memperlakukan hal ini seolah-olah upgrade tersedia—seperti dalam kasus di atas, saat versi baru Pelacak Sinterklas tersedia.

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

Tambahkan ke layar utama

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

Kesimpulan

Kami dapat dengan cepat mengonversi Pelacak Sinterklas menjadi PWA offline—memungkinkan pengalaman yang andal dan menarik—berkat desain adegan kami yang sudah ada, yang dipermudah melalui penggunaan Polymer dan komponen web yang sudah ada. Hal ini juga memanfaatkan sistem build kami untuk melakukan upgrade yang efisien, sehingga hanya membatalkan validasi aset yang diubah.

Meskipun Santa sebagian besar adalah solusi yang dibuat khusus, banyak prinsipnya dapat ditemukan di App Toolbox Project Polymer. Sebaiknya periksa jika Anda membangun PWA baru dari awal—atau, jika Anda mencari pendekatan agnostik framework, coba Library Workbox.