아이폰에서 "홈 화면에 추가"를 위한 자바스크립트?

아이폰에서 "홈 화면에 추가"를 위한 자바스크립트?

자바스크립트를 사용하여 모바일 사파리의 북마크 메뉴에서 홈 스크린에 추가 옵션을 에뮬레이트할 수 있습니까?

IE와 비슷한 것.window.external.AddFavorite(location.href, document.title);혹시?

Safari가 서비스 작업자를 구현하고 Chrome 및 Firefox에서 설정한 방향을 따를 때까지 홈 화면에 앱을 프로그래밍 방식으로 추가하거나 브라우저에서 사용자에게 메시지를 표시할 수 없습니다.

그러나 사용자에게 이 작업을 수행하라는 메시지를 표시하고 적절한 위치를 가리키기까지 하는 작은 라이브러리가 있습니다.효과가 좋습니다.

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

Mobile Safari에서 북마크(홈 화면에 있는 북마크 포함)를 추가하는 유일한 방법은 내장 UI를 사용하는 것이며 Apple은 페이지 내 스크립트에서 북마크를 추가할 수 있는 방법을 제공하지 않습니다.사실 데스크톱 버전의 Safari에서도 이 작업을 수행할 수 있는 메커니즘이 없다고 확신합니다.

관련된 것을 제공하는 오픈 소스 자바스크립트 라이브러리가 있습니다: mobile-bookmark-bubble.

모바일 북마크 버블은 모바일 웹 애플리케이션 하단에 프로모션 버블을 추가하여 사용자가 단말기의 홈 화면에서 해당 앱을 북마크할 수 있도록 하는 JavaScript 라이브러리입니다.라이브러리는 HTML5 로컬 스토리지를 사용하여 사용자의 지속적인 잔소리를 방지하기 위해 프로모션이 이미 표시되었는지 여부를 추적합니다.

이 라이브러리의 현재 구현은 특히 iPhone 및 iPad 장치에서 사용되는 웹 브라우저인 Mobile Safari를 대상으로 합니다.

2020년에도 모바일 사파리에서는 이 기능을 사용할 수 없습니다.

다음으로 가장 좋은 방법은 홈 화면에 페이지를 추가하는 단계에 대한 지침을 표시하는 것입니다.

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

// Detects if 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 should display install popup notification:
if (!hasSeenInstallPopup && isIos() && !isInStandaloneMode()) {
  showInstallMessage();
  localStorage.setItem("hasSeenInstallPopup", true);
}

자바스크립트에서는 불가능하지만 "웹 클립"의 도움으로 아이폰에서 "홈 화면에 추가" 아이콘이나 바로 가기를 만들 수 있습니다(.mobileconfig 코드 파일 사용).

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

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

모바일 구성 파일을 만든 후 우리는 이 URL을 아이폰 사파리 브라우저 설치 인증서로 전달할 수 있고, 그렇게 한 후 아이폰 홈 화면을 확인하면 당신의 웹 페이지나 웹 앱의 바로 가기 아이콘이 있습니다.

이것은 또한 iphone/ipad, Mobile Safari, Android, Blackberry 터치 스마트폰 및 Playbook을 지원하는 또 다른 좋은 홈 스크린 스크립트입니다.

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

TLDR: @Craig가 위에서 더 나은 대답을 했습니다.

아래는 저의 원래 답변입니다만, 질문에 대한 답변이 충분하지 않다고 생각합니다.오늘은 A2HS가 웹뷰(PWA)에서 지원되지 않기 때문에 라이브러리를 사용하여 이 효과를 에뮬레이트해야 합니다.

@케릭 저는 제 답변을 삭제하고 싶지만, 수락되었기 때문에 삭제할 수 없습니다.

이전 답변:

예. 대부분의 최신 브라우저는 Progressive Web Apps용 Add to Home screen(또는 A2HS) 기능을 지원합니다.Mozilla WebDocs 기사 인용하기

홈 화면에 추가는 사용자가 웹 앱을 "설치"할 수 있는 최신 브라우저에서 사용할 수 있는 기능입니다. 즉, 홈 화면에 바로 가기를 추가할 수 있습니다.

참고 항목: caniuse.com 에서 A2HS 브라우저 지원

언급URL : https://stackoverflow.com/questions/1141979/javascript-for-add-to-home-screen-on-iphone