CODEWITHSUNDEEP
javascriptiphonemobile-safaribookmarkshomescreen
Kerrick
Kerrick

Reputation: 7478

Javascript for "Add to Home Screen" on iPhone?

Is it possible to use Javascript to emulate the Add to Home Screen option in Mobile Safari's bookmark menu?

Something similar to IE's window.external.AddFavorite(location.href, document.title); possibly?

Upvotes: 120

Views: 192905

Answers (8)

maxpaj
maxpaj

Reputation: 6791

In 2020, this is still not possible on Mobile Safari.

The next best solution is to show instructions for adding the website as a shortcut to the user's home screen.

// Check if the user has seen the message already
const hasSeenInstallPopup = localStorage.getItem("hasSeenInstallPopup");

// Detects if the device is on iOS 
const isIos = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test( userAgent );
}

// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);

// Checks if app should display the install popup notification:
if (!hasSeenInstallPopup && isIos() && !isInStandaloneMode()) {
  showInstallMessage();
  localStorage.setItem("hasSeenInstallPopup", true);
}

enter image description here

Upvotes: 9

Boopy
Boopy

Reputation: 553

It seems that it is still not possible on Mobile/Desktop Safari...

It's possible to trigger the install prompt using the beforeinstallprompt event. This feature is not supported on iOS. First, Making PWAs installable.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});


buttonInstall.addEventListener('click', async () => {
  if (!deferredPrompt) {
    return;
  }

  // Show the install prompt
  deferredPrompt.prompt();

  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;

  // We've used the prompt, and can't use it again, throw it away
  deferredPrompt = null;
});

Example of a React app context:

const AddToHomeScreen = () => {
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  const handleBeforeInstallPrompt = useCallback((e) => {
    // Prevent the mini-infobar from appearing on mobile
    e.preventDefault()

    // Store the event for later use
    setDeferredPrompt(e)
  }, [])

  const handleAddToHomeScreenClick = async () => {
    if (deferredPrompt) {
      // Show the install prompt
      deferredPrompt.prompt()

      const choiceResult = await deferredPrompt.userChoice
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the install prompt")
      } else {
        console.log("User dismissed the install prompt")
      }

      setDeferredPrompt(null)
    } else {
      console.log("Install prompt is not available")
    }
  }

  useEffect(() => {
    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt)

    return () => {
      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
    }
  }, [handleBeforeInstallPrompt])

  return (
      <button onClick={handleAddToHomeScreenClick}>
        Add to Home Screen
      </button>
  )
}

export default AddToHomeScreen

For iOS, there's an alternative approach. You can guide the user through the process of adding the app to their Home Screen, similar to what is done in the add-to-homescreen repo:

I just add some codes:

    // Detects if device is on iOS 
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)

 else if (isIOS) {
      // Here we could notify the user to guide them in order to add the app to Home Screen.
      // You can update your UI to render a notification, popin, alert...
      console.log(
        "To add this web app to your Home Screen, open this app in Safari/Chrome and tap the Share button, then select 'Add to Home Screen'."
      )
    } 


import { useEffect, useState, useCallback } from "react"

const AddToHomeScreen = () => {
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  const handleBeforeInstallPrompt = useCallback((e) => {
    // Prevent the mini-infobar from appearing on mobile
    e.preventDefault()

    // Store the event for later use
    setDeferredPrompt(e)
  }, [])

  const handleAddToHomeScreenClick = async () => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)

    if (deferredPrompt) {
      // Show the install prompt
      deferredPrompt.prompt()

      // Wait for the user to respond to the prompt
      const choiceResult = await deferredPrompt.userChoice
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the install prompt")
      } else {
        console.log("User dismissed the install prompt")
      }
      setDeferredPrompt(null)
    } else if (isIOS) {
      // Here we could notify the user to guide them in order to add the app to Home Screen.
      // You can update your UI to render a notification, popin, alert...
      console.log(
        "To add this web app to your Home Screen, open this app in Safari and tap the Share button, then select 'Add to Home Screen'."
      )
    } else {
      console.log("Install prompt is not available")
    }
  }

  useEffect(() => {
    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt)

    return () => {
      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
    }
  }, [handleBeforeInstallPrompt])

  return (
      <button onClick={handleAddToHomeScreenClick}>
        Add to Home Screen
      </button>
  )
}

export default AddToHomeScreen

I hope it could help someone. Have a good day!

Upvotes: 0

Reggie Pinkham
Reggie Pinkham

Reputation: 12708

TLDR: @Craig has a better answer above.

Below is my original answer, but I do not believe it answers the question adequately. Today I would say you'd have to try a library to emulate this effect, as A2HS is not supported in WebViews (PWAs).

@Kerrick I would like to delete my answer, but cannot as it has been accepted.

Old answer:

Yes. The majority of modern browsers support the Add to Home screen (or A2HS) feature for Progressive Web Apps. To quote the Mozilla Web Docs article:

Add to Home screen is a feature available in modern browsers that allows a user to "install" a web app, ie. add a shortcut to their Home screen.

See also: A2HS browser support at caniuse.com

Upvotes: 1

Rawan-25
Rawan-25

Reputation: 1883

In javascript, it is not possible but yes with the help of “Web Clips” we can create a "add to home screen" icon or shortcut in iPhone( by the code file of .mobileconfig)

https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html

http://appdistro.cttapp.com/webclip/

after create a mobileconfig file we can pass this url in iphone safari browser install certificate and after done it check your iphone home screen there is a shortcut icon of your Web page or webapp..

Upvotes: 3

Craig
Craig

Reputation: 679

Until Safari implements Service Worker and follows the direction set by Chrome and Firefox, there is no way to add your app programatically to the home screen, or to have the browser prompt the user

However, there is a small library that prompts the user to do it and even points to the right spot. Works a treat.

https://github.com/cubiq/add-to-homescreen

Upvotes: 67

Miuranga
Miuranga

Reputation: 2463

This is also another good Home Screen script that support iphone/ipad, Mobile Safari, Android, Blackberry touch smartphones and Playbook .

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble

Upvotes: 2

Philippe Laval
Philippe Laval

Reputation: 146

There is an open source Javascript library that offers something related : mobile-bookmark-bubble

The Mobile Bookmark Bubble is a JavaScript library that adds a promo bubble to the bottom of your mobile web application, inviting users to bookmark the app to their device's home screen. The library uses HTML5 local storage to track whether the promo has been displayed already, to avoid constantly nagging users.

The current implementation of this library specifically targets Mobile Safari, the web browser used on iPhone and iPad devices.

Upvotes: 8

Louis Gerbarg
Louis Gerbarg

Reputation: 43452

The only way to add any book marks in MobileSafari (including ones on the home screen) is with the builtin UI, and that Apples does not provide anyway to do this from scripts within a page. In fact, I am pretty sure there is no mechanism for doing this on the desktop version of Safari either.

Upvotes: 58

Related Questions