Wie erstelle ich eine "Add to Home Screen" -Anweisungsseite für iOS-Web-Apps

Question

Ich habe eine Web-App, die einfach mit einem ausgefallenen Symbol auf dem Startbildschirm eines iOS-Geräts hinzugefügt werden kann.

Ich habe jedoch festgestellt, dass einige Anwendungen eine vollständig separate Seite laden können, wenn sie in Safari angezeigt werden, bevor der Benutzer sie zum Startbildschirm hinzufügt.

Diese "spezielle" Seite weist den Benutzer an, wie er zum Startbildschirm hinzugefügt wird. Wenn dies der Fall ist, handelt es sich um eine andere Seite.

Notely, http://darksky.netverwendet dies zu tun, bevor sie eine tatsächliche App gemacht. Die Workflows-App führt dies aus, wenn Sie einen Workflow zu Ihrem Startbildschirm hinzufügen. Siehe Screenshot unten.

Am Verständnis ich die Dinge nicht richtig, oder ist es eine Möglichkeit, eine andere Seite zu laden, wenn sie von Safari und eine andere, wenn es zu dem Home-Bildschirm gesehen haben?

Answer 1

können Sie erkennen, wenn der Besucher auf einem iOS-Gerät ist mit some JavaScript dann entweder zeigen oder den Anweisungen verstecken auf einem Cookies in Ihrem Browser:

1. prüfen, ob das Gerät mit iOS ist:

   if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; } 
   

wenn aktuelle Ansicht

2. Check ist bereits in Webapp:

   if(window.navigator.standalone == true){ return false; } 
   

3. Überprüfen Sie, ob Sie ein Cookie für diesen Benutzer bereits erstellt haben:

   if(document.cookie.search("alreadAsked") >= 0){ return false; } 
   

4. Prompt Benutzer durch die Anzeige eines „In den Startbildschirm“ auf der Seite Element oder auf eine andere Seite umleiten:

   document.getElementById("hiddenPrompt").style.display = 'inherit'; 
   

5. Speichern Sie einen Cookie, damit Sie den Benutzer nicht nach dem Hinzufügen fragen. Sie können auch das Cookie speichern, nachdem der Benutzer eine Schaltfläche „Fertig“ klickt stattdessen so der Benutzer aufgefordert werden, bis sie es auf den Bildschirm zu Hause hinzuzufügen, oder klicken Sie auf eine „zeigt dies nicht wieder“ Button:

   document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC"; 
   

Alle zusammen jetzt, wird diese Funktion beim laden der Seite ausgeführt wird:

// On page load 
(function() { 
    // Check if iOS 
    if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; } 

    // Check if already in webapp 
    if(window.navigator.standalone == true){ return false; } 

    // Check if you already asked them to add to homescreen 
    if(document.cookie.search("alreadAsked") >= 0){ return false; } 

    // Ask user to add to homescreen 
    document.getElementById("hiddenPrompt").style.display = 'inherit'; 
}); 

// After clicking a button to dismiss prompt 
function hidePromptInFuture(){ 
    // Do not show prompt again 
    document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC"; 
}