Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
teknologi tokopedia untuk membedakan tampilan mobile dan desktop?
teknologi apa yang digunakan tokopedia untuk mengubah tampilannya ketika user agen di set ke safari iphone/ipad atau membedakan tampilan desktop dan mobile?
apa ini yg disebut pwa? bagaimana mengimplementasikannya?
3 Jawaban:
<div>CMIIW<br><br>Saya pernah dengar kalau tim developer untuk view browser mobile dan browser desktop itu berbeda. sehingga mereka dapat membuat user interface nya secara berbeda<br><br>sehingga pada tampilan mobile dia akan langsung di redirect / arahkan ke subdomain m.tokopedia.com<br><br>kalau berbicara tentang pwa.. ini bukan termasuk pwa, kalau pwa itu sendiri berfokuskan pada metode caching, indexed db pada aplikasi sehingga aplikasi dapat dijalankan pada kondisi offline.<br><br>strateginya dapat dilihat pada link berikut <a href="https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures">https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures</a><br><br>untuk implementasi pwa dapat dilihat pada web developer google sendiri<br><br>kalau untuk implementasi auto redirect page web app tersebut, bisa dideteksi dari media screen dan user agent</div>
Tanggapan
kayanya bukan itu yang di pake tokopedia. soalnya dia ga ngeredirect halaman dari desktop ke mobile.
kalo di pwa untuk styling bisa pake file yang berbeda ga ya?
Kalau untuk styling berbeda mungkin bisa dengan cara import menggunakan javascript Jadi kita bisa deteksi user agent atau screen size kemudian import css nya langsung dari javascript nya
<div>cara yang saya tahu untuk membedakan tampilan mobile dengan tampilan desktop: <br>- menggunakan @media di css nya<br>- atau menggunakan innerHeight atau InnerWidth dengan javascript<br><br>mungkin masih banyak cara lain, tapi yang saya tahu hanya itu saja<br><br></div><div>semoga terbantu !!<br><br>css @media --> <br><a href="https://www.w3schools.com/cssref/css3_pr_mediaquery.asp">https://www.w3schools.com/cssref/css3_pr_mediaquery.asp</a></div><div><br>innerHeight & innerWidth --><br><a href="https://www.w3schools.com/jsref/prop_win_innerheight.asp">https://www.w3schools.com/jsref/prop_win_innerheight.asp</a><br><br></div>
Tanggapan
itu masuk ke kategori responsif, yang saya amati tokopedia ga pake design responsif.
Ada tapi tidak terlalu banyak
Kalau dilihat source-code nya, cari "@media" pasti ada beberapa
memang ada tp cuma dipake untuk nangani lebar layar yg berbeda (responsif). disini kasusnya dia manfaatin user-agent, jadi walaupun user pake browser desktop tapi user-agent di set ke mobile tampilan seperti mobile, dan sebaliknya.
keliatanya yg dipake js, tapi masih blm nemu cara kerja / toolsnya.
<div><strong>Pakai Regex :</strong></div><div><a href="http://detectmobilebrowsers.com/">http://detectmobilebrowsers.com/</a> : pakai regex<br>bisa dipilih pakai bahasa pemrograman apa, biasanya pada pakai javascript karena websitenya dibuat pakai javascript, misalnya shopee pakai reactjs.<br><br></div><div><strong>Pakai navigator.userAgentData.mobile :</strong> pakai javascript<br>buka saja console lalu beri perintah :</div><pre><strong>navigator.userAgentData.mobile</strong></pre><div>Hasilnya akan bernilai true atau false (boolean).</div>
