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?

avatar dembilesmana
@dembilesmana

11 Kontribusi 1 Poin

Diperbarui 2 tahun yang lalu

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>

avatar insanz01
@insanz01

90 Kontribusi 56 Poin

Dipost 2 tahun yang lalu

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:&nbsp;<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 --&gt; <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 &amp; innerWidth --&gt;<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>

avatar NauraFaradisa
@NauraFaradisa

12 Kontribusi 10 Poin

Dipost 2 tahun yang lalu

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>&nbsp; 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>

avatar syahid246
@syahid246

70 Kontribusi 160 Poin

Dipost 2 tahun yang lalu

Login untuk ikut Jawaban