Command to create site shortcut on smartphone?

Asked

Viewed 10,928 times

4

Ask the user to create an icon of my website on your smartphone’s home screen. I need when the user enters the site to receive a notification to create the icon. I need to know the command that does this. I’ve searched and found nothing.

php javascript html

  • What do you mean create an icon? Shortcut or icon?

  • It can be done yes, what he wants is here in this site https://pushcrew.com the site asked ta if the user wants to insert a shortcut on the home screen and the user accept the site does it alone.

  • Yes, use manifest.JSON Follow link with tutorial for implementation: https://developers.google.com/web/fundamentals/web-app-manifest/? hl=en

2 answers

2

Inform the user

For websites there is no such command, the control of what happens on the device is on the user and not on what it uses.

You must present a popup or something to inform the visitor that you can access the X menu and add a shortcut to the home screen.

alert("Olá, adiciona-me ao teu homescreen fazendo uso do menu principal do teu navegador!");

You can also have a text detailing how to do the task in order to make life easier for the user:

How to add this website to the home screen

iOS
Click the icon that looks like a box with an arrow jump out of it (this also allows you to tweet, print or send the page you are on). Click "Add to Home Screen".

Android
On Android there are a few different ways to achieve this:

  • Add website to favorites
  • Go to the home screen where you want to add the / marker link
  • Tap continuously on an empty space until you open the "Add to Start Screen menu"
  • Select "Shortcuts"
  • Select "Favorites"
  • Choose the marker you just created

Depending on your device and Android version, this might work:

  • Add website to favorites
  • Open the bookmark management
  • Tap continuously over the bookmark of the website
  • Select "Add to Screen Home"

Prepare the page with Icon, name and colors to use

You can have your page with all the information necessary to make known to the smartphone the icon and name to use in case the user adds the website to the homescreen:

Apple

Link to complete documentation (English)

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Meu Site"/>

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />

Microsoft

Link to complete documentation (English)

<meta name="application-name" content="Meu Site"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-TileImage" content="http://www.example.com/windows_tile.png"/>

Other

<title>Meu Site</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Note:
Concenso is for browsers to locate the web page identification icons at the domain root: http://www.example.com/favicon.ico but you can specify other locations using the meta tags above.

To generate icons from a single file, this tool is excellent.

0

I’m sorry, but I don’t think the web.

The options would be:

  • The user using the smartphone features will do this manually
  • You will have to create a native android app that just opens your site, will have an icon and will open your site as an app, it would be as if your app were a 'browser' (there is this feature) and open your web page;
  • You would use some cross-platform framework (example phonegap) to create this 'app' to view your site;

I believe that using Phonegap or another cross-platform tool (which uses javascript, Html5, css and such) would be more practical, and would not be costly (smartphone hardware) because it would only open your web page (since normally this type of application is heavier). Also you could compile the same code for other platforms like windows phone, firefox, Ios, etc.

The native would be more laborious, but lighter (as already said, for proposal, will not interfere in performance) and exclusive for android.

http://phonegap.com/ http://docs.phonegap.com/en/3.5.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.