Pertanyaan Aplikasi Web iOS: Menampilkan konten hanya jika aplikasi itu berdiri sendiri


Jika seorang pengguna mengunjungi contoh situs web saya, dari Safari Mobile, bagaimana saya dapat menempatkan laman kosong yang bertuliskan "Tambahkan Ke Layar Beranda."? Setelah ditambahkan itu akan menunjukkan konten yang berbeda.


5
2017-11-11 07:51


asal


Jawaban:


Anda akan ingin memeriksa dua hal. Pertama, apakah itu berjalan di perangkat iOS? Kedua, adalah window.navigator.standalone == true?

window.navigator.standalone terutama digunakan oleh browser WebKit untuk menunjukkan aplikasi dalam mode layar penuh (atau mandiri). Banyak perangkat (seperti ponsel yang menjalankan Android), mendukung properti ini, tetapi tidak memiliki opsi untuk 'Tambahkan ke Homescreen' seperti perangkat iOS, jadi Anda perlu memeriksa keduanya.

Demo:  jsFiddle

Javascript:

function isIOS() {
    var userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test( userAgent );
};

function isStandalone() {
    return ( isIOS() && window.navigator.standalone );
};

window.onload = function () {
    if( isStandalone() || !isIOS() ) { //either ios+standalone or not ios
        //start app
    } else {
        //display add to homescreen page
    };
};

14
2018-06-19 21:20



Memeriksa window.navigator.standalone.


2
2017-11-11 08:04



Sedikit kode yang berbeda, berdasarkan solusi @ThinkingStiff, dan ini pertanyaan lain di Postingan ini, untuk mendukung deteksi IOS7 untuk menyediakan antarmuka CSS untuk menambahkan lebih banyak padding-top jika judul aplikasi transparan.

isIOS7 = function() {
  return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
};
isStandaloneAndIOS7 = function() {
  return isIOS7() && window.navigator.standalone;
};
if (isStandaloneAndIOS7()) {
  body = document.getElementsByTagName("body")[0];
  body.className = body.className + " standalone";
}

0
2017-11-01 14:01