S(GH)PA: Peretasan Aplikasi Satu Halaman Untuk Halaman GitHub

Untuk beberapa waktu sekarang, saya menginginkan kemampuan untuk merutekan jalur untuk situs web GitHub Pages ke index.html untuk ditangani sebagai aplikasi satu halaman (SPA). Ini adalah taruhan tabel karena aplikasi semacam itu mengharuskan semua permintaan untuk dirutekan ke satu file HTML, kecuali jika Anda ingin menyalin file yang sama di semua rute Anda setiap kali Anda membuat perubahan pada proyek. Saat ini, GitHub Pages tidak menawarkan solusi penanganan rute; sistem Halaman dimaksudkan sebagai mekanisme datar dan sederhana untuk menyajikan konten proyek dasar.

Jika Anda tidak mengetahuinya, GitHub menyediakan satu bagian penyesuaian untuk situs web proyek Anda: kemampuan untuk menambahkan file 404.html dan menjadikannya sebagai halaman kesalahan khusus Anda. Saya melakukan percobaan pertama pada peretasan SPA hanya dengan menduplikasi file index.html saya dan mengganti nama salinan menjadi 404.html . Ternyata banyak orang telah mengalami masalah yang sama dengan Halaman GitHub dan menyukai ide umumnya. Namun, masalah yang diangkat oleh beberapa orang di Twitter dengan benar adalah bahwa halaman 404.html masih disajikan dengan kode status 404, yang tidak baik untuk perayap mesin telusur. Tantangannya telah dijatuhkan, dan saya memutuskan untuk menjawab — dan menjawab dengan penuh semangat!

Sekali Lagi, Dengan Perasaan

Setelah tidur di atasnya, saya berpikir, "Diri sendiri, kita berada jauh di wilayah peretasan yang kotor, jadi mengapa saya tidak membuat peretasan ini lebih kotor lagi?!" Untuk itu, saya mengembangkan peretasan yang lebih baik yang menyediakan fungsionalitas dan kesederhanaan yang sama, sambil juga mempertahankan jus perayap situs web Anda — dan Anda bahkan tidak perlu membuang waktu untuk menggandakan file index.html dan mengganti namanya menjadi 404.html lagi ! Solusi berikut akan berfungsi di semua browser desktop dan seluler modern (Edge, Chrome, Firefox, Safari) dan di Internet Explorer 10+.

Template dan Demo : Jika Anda ingin melewatkan penjelasan dan mendapatkan barang, inilah repo template, dan URL uji untuk melihatnya beraksi.

Begitulah Meta

Hal pertama yang saya lakukan adalah menyelidiki opsi lain untuk membuat browser mengarahkan ulang ke halaman index.html . Bagian itu cukup mudah. Anda pada dasarnya memiliki tiga opsi: konfigurasi server, manipulasi location JavaScript, atau tag meta refresh . Yang pertama jelas tidak boleh digunakan untuk halaman GitHub. Dan JavaScript pada dasarnya sama dengan penyegaran, tetapi bisa dibilang lebih buruk untuk pengindeksan perayap. Itu meninggalkan kita dengan tag meta. Tag meta dengan nilai penyegaran 0 tampaknya diperlakukan sebagai pengalihan 301 oleh mesin telusur, yang berfungsi dengan baik untuk kasus penggunaan ini.

Anda harus mulai dengan menambahkan file 404.html ke repositori gh-pages yang berisi dokumen HTML kosong di dalamnya. Dokumen itu harus berjumlah lebih dari 512 byte (dijelaskan di bawah). Selanjutnya, letakkan markup berikut di elemen head halaman 404.html Anda:

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

Kode ini menetapkan URL percobaan masuk ke variabel pada objek sessionStorage standar dan segera mengalihkan ke halaman index.html proyek Anda menggunakan tag penyegaran meta. Jika Anda melakukan situs Organisasi Github, jangan masukkan nama repo di teks pengganti atribut konten, lakukan saja ini: content=“0;URL='/'”

Menyesuaikan Penanganan Rute

Jika Anda ingin penanganan rute yang lebih rumit, cukup sertakan beberapa logika JavaScript tambahan di tag script yang ditunjukkan di atas. Anda dapat mengubah beberapa hal: komposisi href yang Anda berikan ke halaman index.html ; halaman mana yang harus tetap berada di halaman 404 (melalui penghapusan dinamis dari tag meta); dan logika lain yang ingin Anda terapkan untuk menentukan konten apa yang ditampilkan berdasarkan rute masuk.

512 Byte Ajaib

Ini, tangan ke bawah, salah satu kebiasaan aneh yang pernah saya temui dalam pengembangan web. Anda harus memastikan bahwa ukuran total halaman 404.html Anda lebih besar dari 512 byte, karena jika tidak, Internet Explorer akan mengabaikannya dan menampilkan halaman 404 browser generik sebagai gantinya. Ketika saya akhirnya menemukan ini, saya harus memecahkan bir untuk mengatasi jumlah waktu yang dibutuhkan.

Mari Membuat Sejarah

Untuk menangkap dan memulihkan URL yang awalnya dinavigasi pengguna, Anda harus menambahkan tag script berikut ke head halaman index.html Anda sebelum JavaScript lain bertindak pada status halaman saat ini:

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

Sedikit JavaScript ini mengambil URL yang kami cache di sessionStorage di halaman 404.html dan menggantikan entri history saat ini dengannya. Bagaimana Anda memilih untuk menangani hal-hal dari sini terserah Anda, tetapi saya akan menggunakan popstate dan hashchange jika saya jadi Anda.

Nah, itu dia. Sekarang rayakan dengan menulis beberapa aplikasi satu halaman di Halaman GitHub!

Artikel ini adalah bagian dari seri pengembangan web dari penginjil dan insinyur teknologi Microsoft tentang pembelajaran JavaScript praktis, proyek sumber terbuka, dan praktik terbaik interoperabilitas, termasuk browser Microsoft Edge.

Kami mendorong Anda untuk menguji di seluruh browser dan perangkat (termasuk Microsoft Edge — browser default untuk Windows 10) dengan alat gratis di dev.microsoftedge.com, termasuk alat pengembang F12: tujuh alat berbeda yang terdokumentasi lengkap untuk membantu Anda men-debug, menguji, dan mempercepat halaman web Anda. Juga, kunjungi blog Edge untuk tetap mendapat informasi dari pengembang dan pakar Microsoft.

Bacaan Lebih Lanjut tentang SmashingMag:

• Alur Kerja Sederhana Dari Pengembangan Hingga Penerapan
• Membuat Aplikasi Web Lengkap Sebagai Dasar Untuk Aplikasi
• Bangun Blog Dengan Halaman Jekyll Dan GitHub