Optimalkan PWA dengan mode tampilan yang berbeda – Beragampengetahuan

Aplikasi Web Progresif (PWAS) adalah cara terbaik untuk mengubah aplikasi web menjadi pengalaman mandiri seperti lokal. Mereka menjembatani kesenjangan antara situs web dan aplikasi asli, tetapi konversi ini dapat dengan mudah memperkenalkan tantangan desain untuk dipertimbangkan.

Kami mendefinisikan PWA menggunakan file manifes. Dalam manifes PWA kami, kami dapat memilih dari kumpulan mode tampilan, masing -masing memberikan berbagai tingkat visibilitas antarmuka browser:

• fullscreen: Gunakan seluruh tampilan untuk menyembunyikan semua browser UI.
• standalone: Sepertinya aplikasi asli, menyembunyikan kontrol browser, tetapi menjaga sistem UI.
• minimal-ui: Menampilkan elemen UI browser terkecil.
• browser: Pengalaman browser web standar dengan antarmuka browser lengkap.

Biasanya, kami ingin PWA kami merasa seperti aplikasi, bukan situs web di browser, jadi kami mengatur anggota tampilan manifes ke salah satu opsi untuk menyembunyikan antarmuka browser, mis. fullscreen atau standalone. Ini bagus untuk membantu aplikasi kami mendapatkan lebih banyak di rumah, tetapi dapat memperkenalkan beberapa masalah yang biasanya tidak kami pertimbangkan saat membangun di web.

Sangat mudah untuk melupakan apa yang diberikan browser kepada kami. Fitur seperti tombol jarak jauh/belakang, halaman yang menyegarkan, mencari di dalam halaman, dan bahkan memanipulasi, berbagi atau menyalin URL halaman adalah semua fitur yang disediakan oleh browser, dan pengguna dapat kehilangan akses ketika UI browser disembunyikan. Kami juga menampilkan konten di situs web yang tidak perlu diterjemahkan ke dalam pengalaman aplikasi.

Bayangkan pengguna menyelam ke tabel tanpa tombol di belakang, mencoba berbagi halaman produk tanpa menyalin URL, atau memukul kesalahan tanpa menyegarkan tombol untuk melepaskannya!

Sama seperti kami memiliki pertimbangan yang berbeda ketika merancang web dan pencetakan, kami perlu berhati-hati ketika merancang pengalaman independen daripada pengalaman berbasis browser untuk menyesuaikan konten dan pengalaman pengguna dengan media.

Untungnya, kami menawarkan banyak cara untuk menyesuaikan jaringan.

Gunakan kueri media untuk menemukan mode tampilan

Kami telah menggunakan kueri media saat menulis CSS. Apakah itu beralih gaya cetak atau mengatur breakpoint untuk desain yang responsif, mereka umum di toolkit pengembang web. Setiap mode tampilan yang dibahas sebelumnya dapat digunakan sebagai kueri media untuk mengubah penampilan dokumen berdasarkan penampilannya.

Kueri media, mis. @media (min-width: 1000px) Atur breakpoint yang populer berdasarkan ukuran viewport, tetapi mereka memiliki fungsionalitas paling banyak. Mereka dapat menangani gaya pencetakan, orientasi peralatan, preferensi kontras, dan satu ton dari mereka. Dalam kasus kami, kami display-mode Fitur Media.

Tampilan Mode Media Query sesuai dengan mode tampilan saat ini.

catatan: Meskipun kita dapat mengatur mode tampilan di manifes, mode tampilan aktual dapat bervariasi tergantung pada dukungan browser.

Kueri media ini secara langsung merujuk ke pola saat ini:

• @media (display-mode: standalone) Hanya berlaku untuk halaman yang diatur ke mode mandiri.
• @media (display-mode: fullscreen) Cocok untuk mode layar penuh. Perlu dicatat bahwa itu juga berlaku saat menggunakan API layar penuh.
• @media (display-mode: minimal-ui) Cocok untuk mode UI minimum.
• @media (display-mode: browser) Berlaku untuk mode browser standar.

Juga layak untuk diperhatikan window-controls-overlay Dan tabbed Mode tampilan. Pada saat penulisan, kedua mode tampilan ini bersifat eksperimental dan dapat dikombinasikan dengan display_override. display-override Menjadi anggota kinerja PWA kami, displaytetapi menawarkan beberapa opsi dan kekuatan tambahan.

display Ada rantai cadangan yang dipesan (fullscreen -> standalone -> minimal-ui -> browser) Kami tidak bisa berubah, tapi display-override Memungkinkan untuk mengatur urutan fallback yang kami pilih, seperti berikut:

"display_override": ["fullscreen", "minimal-ui"]

window-controls-overlay Hanya tersedia untuk PWAS yang berjalan di sistem operasi desktop. Itu membuat PWA menempati seluruh jendela dan tombol kontrol jendela ditampilkan sebagai overlay. pada saat yang sama, tabbed Penting ketika ada beberapa aplikasi dalam satu jendela.

Selain itu, ada picture-in-picture Mode tampilan (Anda dapat menebaknya) Mode Picture.

Kami menggunakan pertanyaan media ini sepenuhnya, sama seperti kueri media lainnya. Tunjukkan elemen -elemen kelas .pwa-only Ketika mode tampilan independen, kita dapat melakukan ini:

.pwa-only {
    display: none;
}

@media (display-mode: standalone) {
    .pwa-only {
        display: block;
    }
}

Jika kami ingin menampilkan elemen saat mode tampilan independen atau minimal-uikita bisa melakukan ini:

@media (display-mode: standalone), (display-mode: minimal-ui) {
    .pwa-only {
        display: block;
    }
}

Namun, terkadang CSS tidak cukup. Dalam hal ini, kami juga dapat merujuk ke mode tampilan dan membuat penyesuaian yang diperlukan menggunakan JavaScript:

const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
// Listen for display mode changes
window.matchMedia("(display-mode: standalone)").addEventListener("change", (e) => {
  if (e.matches) {
    // App is now in standalone mode
    console.log("Running as PWA");
  }
});

Aplikasi praktis

Sekarang kita tahu cara menggunakan keterampilan yang baru dipelajari ini berdasarkan apakah pengguna menggunakan aplikasi web kami sebagai PWA atau menampilkan modifikasi di browser atau kami dapat melihat cara menggunakan keterampilan yang baru dipelajari ini.

Konten khusus untuk pengguna PWA

Pengguna yang telah menginstal aplikasi sebagai PWA telah dikonversi ke PWA, sehingga Anda dapat menyesuaikan aplikasi untuk menurunkan presentasi pemasaran dan fokus pada pengalaman pengguna. Karena pengguna ini telah menunjukkan komitmen dengan menginstal aplikasi Anda, mereka mungkin tidak memerlukan konten promosi atau petunjuk instalasi.

Tampilkan lebih banyak opsi dan fitur

Anda mungkin perlu mengekspos lebih langsung dalam mode PWA, karena ketika browser UI disembunyikan, orang tidak akan dapat dengan mudah mengakses pengaturan browser. Fitur seperti mengubah ukuran font, beralih di antara mode cahaya, bookmark, berbagi, tag, dll. Mungkin memerlukan alternatif dalam aplikasi.

Fitur yang cocok untuk platform

Anda mungkin tidak ingin menggunakan fitur tertentu pada aplikasi web karena mereka tidak merasa pantas, tetapi Anda mungkin menginginkan fitur di PWA. Contoh yang baik adalah bilah navigasi bawah, yang umum dalam aplikasi seluler asli, berkat aksesibilitas yang lebih mudah disediakan, tetapi tidak umum di situs web.

Orang terkadang mencetak situs web, tetapi jarang mencetak aplikasi. Pertimbangkan apakah fitur seperti tombol cetak harus disembunyikan dalam mode PWA.

Tips Instalasi

Gangguan umum adalah prompt untuk menginstal situs sebagai PWA, yang muncul ketika pengguna telah menginstal situs. Idealnya, jika PWA kami dikonfigurasi dengan benar, tetapi tidak semua browser dapat menyediakan PWA mereka sendiri, browser akan memberikan tip instalasi sendiri dan mungkin pilih -pilih. MDN memiliki panduan yang sangat baik untuk membuat tombol khusus untuk memicu pemasangan PWA, tetapi mungkin tidak memenuhi kebutuhan kita.

Kami dapat meningkatkan hal -hal dengan menyembunyikan prompt instalasi melalui kueri media atau mendeteksi mode tampilan saat ini melalui JavaScript dan terlebih dahulu mendeteksi mode tampilan saat ini.

Kami bahkan dapat mengaturnya sebagai kelas utilitas yang dapat digunakan kembali sehingga apa pun yang tidak ingin Anda tampilkan saat menginstal aplikasi sebagai PWA dapat dengan mudah disembunyikan.

/* Utility class to hide elements in PWA mode */
.hide-in-pwa {
  display: block;
}

@media (display-mode: standalone), (display-mode: minimal-ui) {
  .hide-in-pwa {
    display: none !important;
  }
}

Kemudian di html Anda:

<div class="install-prompt hide-in-pwa">
  <button>Install Our App</button>
</div>

<div class="browser-notice hide-in-pwa">
  <p>For the best experience, install this as an app!</p>
</div>

Kami juga dapat melakukan yang sebaliknya dan membuat kelas utilitas untuk membuat elemen hanya muncul di PWA, seperti yang kita bahas sebelumnya.

Ruang lingkup strategis penggunaan dan peluncuran URL

Cara lain untuk menyembunyikan konten dari situs web Anda adalah dengan mengatur scope Dan start_url ciri. Ini tidak menggunakan kueri media seperti yang kita bahas, tetapi harus dianggap sebagai cara untuk menyediakan konten yang berbeda, tergantung pada apakah situs diinstal sebagai PWA.

Berikut adalah contoh daftar properti ini:

{
    "name": "Example PWA",
    "scope": "/dashboard/",
    "start_url": "/dashboard/index.html",
    "display": "standalone",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

scope Inilah level PWA tertinggi. Ketika pengguna meninggalkan ruang lingkup PWA, mereka masih memiliki antarmuka seperti aplikasi, tetapi memiliki akses ke elemen UI browser. Ini bisa berguna jika Anda masih ingin menjadi bagian dari PWA tetapi tidak harus mengoptimalkan atau menghasilkan pertimbangan yang diperlukan.

start_url Tentukan URL Pengguna akan diperkenalkan saat membuka aplikasi. Misalnya, jika aplikasi Anda masuk example.com dan dasbor example.com/dashboard/index.html. Orang yang telah menginstal aplikasi sebagai PWA mungkin tidak memerlukan konten pemasaran, sehingga Anda dapat mengaturnya start_url tiba /dashboard/index.html Jadi ketika aplikasi membuka PWA, aplikasi dimulai dari halaman itu.

Transisi yang ditingkatkan

Melihat transisi akan terasa asing, tidak pada tempatnya, dan beberapa hipnosis online, tetapi fitur umum dari aplikasi asli. Kita dapat mengatur transisi tampilan khusus PWA dengan membungkus CSS yang relevan dengan benar:

@media (display-mode: standalone) {
  @view-transition {
    navigation: auto;
  }
}

Jika Anda nyata Ambisius, Anda juga dapat sepenuhnya menyesuaikan cek dengan sistem desain asli dengan memasangkan mode tampilan dengan perangkat giro dan/atau perangkat dan/atau browser yang Anda gunakan sesuai kebutuhan agar sesuai dengan sistem desain asli.

Dukungan dan pengujian browser

Browser mendukung Mode Display Media diminta dengan baik dan luas. Namun, perlu dicatat Firefox tidak memiliki dukungan PWAFirefox untuk Android hanya menunjukkan PWA browser pola, jadi Anda harus mempertimbangkan pertimbangan yang diperlukan. Untungnya, peningkatan kemajuan ada di pihak kita. Jika kita berurusan dengan browser yang kekurangan PWA atau kueri media ini, kita akan dipertimbangkan Degenerasi yang elegan.

Menguji PWA dapat menjadi tantangan karena setiap perangkat dan browser menanganinya secara berbeda. Di setiap browser dan kombinasi sistem operasi, setiap mode tampilan berperilaku sedikit berbeda.

Sayangnya, saya tidak memiliki peluru perak untuk ditawarkan kepada Anda. Browser tidak memiliki cara yang nyaman untuk mensimulasikan mode tampilan untuk pengujian, jadi Anda harus menguji PWA pada perangkat, browser, dan sistem operasi yang berbeda untuk memastikan semuanya harus berfungsi di mana saja.

tinjauan

Menggunakan PWA secara fundamental berbeda dari menggunakan aplikasi web di browser, sehingga harus dipertimbangkan. display-mode Kueri media memberikan cara yang kuat untuk membuat aplikasi web progresif yang benar -benar adaptif yang merespons dengan bijak terhadap instalasi dan konteks tampilan mereka. Dengan memanfaatkan pertanyaan ini, kita dapat melakukan hal berikut:

• Sembunyikan tip instalasi yang berlebihan Untuk pengguna yang telah menginstal aplikasi
• Menyediakan alat bantuan navigasi yang tepat Saat kontrol browser tidak tersedia,
• Konten dan fitur yang disesuaikan Untuk mencocokkan harapan pengguna dalam situasi yang berbeda,
• Ciptakan lebih banyak pengalaman lokal Menghormati perjanjian platform, dan
• Secara bertahap meningkatkan pengalaman Cocok untuk pengguna yang loyal.

Kuncinya adalah mengingat bahwa pengguna PWA dalam mode mandiri memiliki kebutuhan dan harapan yang berbeda dibandingkan dengan pengunjung situs web standar. Melalui mode Deteksi dan Tampilan Respons, kita dapat membuat pengalaman aplikasi yang lebih halus, bertujuan dan benar.

Saat PWAS terus matang, implementasi dan penjahit yang bijaksana akan menjadi semakin penting untuk menciptakan pengalaman aplikasi yang benar -benar menarik di web. Jika Anda gatal untuk informasi lebih lanjut dan tips dan tips PWA, lihat “Panduan Perluas Ankita Masand untuk Aplikasi Web Progresif”.

Baca lebih lanjut tentang SmashingMag

Dapatkan $ 200 seminggu
Dari artikel di Smashing Magazine – untuk desainer dan pengembang web