Bagaimanakah anda akan mempertingkatkan aplikasi berbilang halaman secara progresif dengan View Transition API?

Soalan dan senario

Tapak ini menggunakan pautan biasa antara halaman asal sama (same-origin) yang dirender oleh pelayan. Matlamatnya adalah peralihan berterusan jika disokong, dengan navigasi natif di tempat lain. Jawapan yang mantap merangkumi kedua-dua mekanisme peralihan, kegagalan kemas kini, navigasi sejarah, fokus, kedudukan tatal, dan keutamaan pergerakan dikurangkan.

Perkara yang diuji oleh penemu duga

• Bolehkah calon membezakan kemas kini dokumen sama dengan document.startViewTransition() daripada navigasi rentas dokumen yang dipilih sertai dengan @view-transition?
• Adakah mereka memahami bahawa API ini adalah lapisan peningkatan (enhancement layer) dan bukannya pengganti pautan, sejarah, atau perenderan pelayan?
• Bolehkah mereka menggunakan pengesanan ciri, sandaran kegagalan, dan prefers-reduced-motion secara selamat?
• Bolehkah mereka menguji unsur pseudo peralihan, pengurusan fokus, peranti perlahan, dan navigasi yang terganggu?

Soalan penjelasan untuk ditanya terlebih dahulu

Sahkan sama ada navigasi sentiasa daripada asal yang sama, sama ada iframe terlibat, sama ada pergerakan elemen kongsi diperlukan, dan sama ada penghala klien sudah wujud. Jelaskan penyemak imbas sasaran, had tempoh masa, sama ada pemudaran (fade) mudah mencukupi, dan apa yang perlu dilakukan oleh produk apabila pengguna menyahdayakan pergerakan. Peralihan rentas dokumen memerlukan kedua-dua dokumen yang mengambil bahagian untuk memilih serta (opt in) dan penyemak imbas menyokong ciri tersebut; ia bukan mekanisme navigasi rentas asal (cross-origin).

Kerangka jawapan 30 saat

Saya akan mengekalkan pautan natif dan navigasi pelayan sebagai garis dasar, kemudian menambah peralihan secara progresif. Untuk kemas kini dalam halaman, kesan ciri startViewTransition dan balut kemas kini DOM; untuk navigasi berbilang halaman asal sama, sertakan @view-transition pada kedua-dua dokumen. Jika kemas kini gagal, halaman mesti kekal boleh digunakan dan ralat mesti dikendalikan oleh UI sedia ada. Pergerakan hanya milik unsur pseudo peralihan, menghormati keutamaan pergerakan dikurangkan, dan tidak sekali-kali mengambil alih semantik fokus, tatal, atau sejarah. Saya akan menguji penyemak imbas yang tidak disokong, sandaran, ke belakang/ke hadapan, rangkaian perlahan, dan navigasi yang terganggu.

Perbincangan terperinci langkah demi langkah

1. Bina garis dasar tanpa animasi. Pautan, penyerahan borang, respons pelayan, dan halaman ralat mesti berfungsi secara bebas; jangan pintas setiap navigasi untuk meniru animasi.
2. Kendalikan kemas kini dokumen sama. Untuk penapisan atau perubahan keadaan setempat, kesan document.startViewTransition. Jalankan fungsi kemas kini yang sama secara terus apabila tidak disokong. Jika panggilan balik (callback) gagal, tunjukkan keadaan ralat sedia ada.
3. Kendalikan navigasi rentas dokumen. Tambahkan @view-transition { navigation: auto; } pada halaman asal sama supaya penyemak imbas mencipta peralihan semasa navigasi; jangan panggil startViewTransition. Ketiadaan pilihan serta atau sokongan akan kembali kepada navigasi normal.
4. Batasi skop visual. Tetapkan view-transition-name hanya pada elemen yang mempunyai padanan yang stabil. Gunakan ::view-transition-old dan ::view-transition-new untuk pemudaran pendek yang boleh diganggu.
5. Lindungi kebolehcapaian. Nyahdayakan atau pendekkan pergerakan di bawah @media (prefers-reduced-motion: reduce). Selepas navigasi, letakkan fokus pada tajuk utama halaman baharu atau sasaran lain yang disengajakan; tangkapan skrin tidak boleh membawa keadaan semantik.
6. Kendalikan keadaan masa jalan (runtime). Ke belakang, ke hadapan, muat semula, kegagalan rangkaian, klik berulang, dan meninggalkan halaman memerlukan hasil yang normal. Peralihan mengubah pemasaan visual, bukan semantik URL, cache, kebenaran, atau penyerahan.

Contoh jawapan berkualiti tinggi

Saya akan memisahkan garis dasar navigasi natif daripada lapisan animasi pilihan. Untuk kemas kini dokumen sama, setiap penyemak imbas memanggil satu fungsi update; penyemak imbas yang menyokong memanggil document.startViewTransition(update), manakala yang lain memanggil update secara terus. Untuk navigasi berbilang halaman yang dirender oleh pelayan, halaman asal sama menyertakan @view-transition { navigation: auto; }; pautan kekal tulen dan sokongan rentas asal tidak diandaikan.

Lapisan animasi hanya menyediakan kesinambungan visual. Nilai view-transition-name yang stabil mengenal pasti elemen yang sepadan, pemudaran pendek ialah lalai, dan keutamaan pergerakan dikurangkan akan menyahdayakannya. Dokumen baharu masih mengendalikan fokus, tatal, dan ralat melalui respons normalnya. Ujian meliputi ketiadaan sokongan, ralat callback, ke belakang/ke hadapan, klik berulang, CPU perlahan, rangkaian perlahan, pertukaran tab, dan pergerakan dikurangkan. Rujukan utama ialah dokumentasi MDN View Transition API dan startViewTransition, serta panduan rentas dokumen Chrome for Developers.

Kesilapan lazim

• Memanggil startViewTransition untuk navigasi rentas dokumen; ia adalah untuk kemas kini dokumen sama, manakala navigasi bersama pilihan serta CSS memulakan kes rentas dokumen.
• Menyekat setiap pautan dengan skrip, merendahkan penggunaan papan kekunci, pautan yang disalin, navigasi ke belakang, dan akses tanpa skrip.
• Mengandaikan sokongan yang serupa merentas penyemak imbas atau iframe tanpa pengesanan ciri dan sandaran natif.
• Memberikan nama pendua kepada banyak elemen atau menjadikan animasi terlalu panjang sehingga menyebabkan konflik tangkapan (snapshot) dan kekeliruan arah.
• Hanya menguji klik ke hadapan dan mengabaikan respons yang gagal, ke belakang/ke hadapan, pergerakan dikurangkan, dan peralihan yang terganggu.

Soalan susulan dan jawapan

Bagaimana jika callback kemas kini dokumen sama gagal?

Kekalkan kemas kini DOM dan keadaan ralat sebagai fungsi yang boleh dilaksanakan secara bebas. Menangkap pengecualian ViewTransition adalah untuk pengelogan dan menstabilkan keadaan visual; ralat perniagaan masih menggunakan UI sedia ada, dan pengecualian animasi tidak boleh menyekat kemas kini data.

Bagaimanakah anda membuktikan peralihan rentas dokumen tidak mengubah semantik navigasi?

Dalam penyemak imbas yang menyokong dan tidak menyokong, periksa URL, timbunan sejarah, muat semula, kemasukan melalui pautan yang disalin, operasi papan kekunci, sasaran fokus, dan halaman ralat pelayan. Dengan peralihan CSS dinyahdayakan, hasil halaman mestilah serupa.

Bilakah pergerakan elemen kongsi harus dielakkan?

Gunakan pemudaran mudah atau tiada pergerakan apabila identiti tidak stabil, senarai kerap disusun semula, kandungan mempunyai pergerakan yang hebat, atau pengguna memerlukan penentuan lokasi keadaan dengan segera. Kekalkan tingkah laku natif apabila keuntungan visual tidak mewajarkan kos fokus, prestasi, dan pemahaman.