0

How to mimic the add to home screen functionality used by google chrome. When clicked that shortcut, it opens in fullscreen.

I tried in Android to add a shortcut, but could not find anything to open in full screen, but I think Flipkart was able to do it. Is there any method to do like chrome does.

Arun Prasad E S
  • 9,489
  • 8
  • 74
  • 87
  • 1
    It might be possible to build shell_apk after updating the json config files appropriately. https://cs.chromium.org/chromium/src/chrome/android/webapk/shell_apk/ – Josh Lee May 24 '18 at 17:49

2 Answers2

2

When you click on "Add to Home screen" in chrome, two tings happens.

1) If your site meets minimum PWA criteria (valid Manifest.json, service worker, served though HTTPS with a valid certificate)- Chrome uses WebAPK component which is part of Chrome browser itself to create a .APK file and sign it on the fly and install it in your phone, like a app installed from a play store. Even the app info will show the app is installed from Play store(though its not exactly, Google may rephrase it later I guess) and signed by Google.

If you want to mimic the APK generation part, there is no way currently. You can extract this .apk file using file explorer tools like ES file explorer and use it to port to other phones though(not recommended for general public distribution as you may not know if the user have supported version of Chrome)

2) If your app is not PWA compliant(use Chrome lighthouse audit for Progressive web app to see if your app is qualified to be installed to home screen), when you try to add to home screen, an icon will still be added. But when you open, it will open in the browser with the address-bar. Think of it like a bookmark shortcut. It works that way.

Flipkart has minimum PWA compliance, which makes Chrome to generate .APK file and install it like a regular app and open in full screen.

You have to state what all PWA components you have created your app with, what are the criteria your app pass in lighthouse audit, what happened when you try to add to home screen and open it for us to help further.

Update: Below is the lighthouse audit report for your site. Out of failed ones, manifest.json not having a valid start_url is the issue that you need to solve to get install banner and add it as an app to home screen which will open in full screen.

I could see your manifest at https://locoshift.com/manifest.json, with start_url as 

  "start_url": "https://locoshift.com",

try changing it to, so it can locate manifest from there. I have "/index.html" as the start_url and that works as well for me. 

  "start_url": "https://locoshift.com/",

You can add theme color manifest entry and meta tag to solve other two issues it reports. But they are cosmetic and not causing the issue that you are trying to solve.

enter image description here

Anand
  • 9,672
  • 4
  • 55
  • 75
  • thanks for the help, this is my site, https://locoshift.com/, I have added everything I could find for PWA, let me try the methods – Arun Prasad E S May 24 '18 at 17:16
  • Look at the update. I've added what seems to be the issue. – Anand May 24 '18 at 18:35
  • I've tried to generate the manifest.json using https://www.pwabuilder.com/ and it have the URL as I've give above. With the trailing "/" at the end of URL. – Anand May 24 '18 at 18:37
  • @ArunPrasadES Did the start_url fix solve the issue? – Anand May 25 '18 at 15:05
  • Still working on it, start url was already there, something wrong with add to home screen prompt – Arun Prasad E S May 25 '18 at 16:39
  • @ArunPrasadES I'm also saying start_url is there, but its not valid... it just needs a small change as I mentioned in the "update" section in my answer. That is what making your site not qualify for Install prompt. I don't see any other issue. It has to be 100% Start_url, which needs adjustment to point to manifest. – Anand May 25 '18 at 17:58
  • Please look at my site, cannot find the error, still A2HS is not supported, after that I will transfer the bounty – Arun Prasad E S May 26 '18 at 07:57
  • 1
    You site now passes all criteria for PWA, I'm able to get the "Add to home screen" prompt in my Chorme for Android, added icon to home screen successfully and was able to open it in full screen like flipkar which you have refereed. You might not have got the prompt because of the reason explained here.. https://stackoverflow.com/a/50495567/1057093. Try with this flag or some other device, or create another user in same android phone and try from that browser. – Anand May 26 '18 at 19:44
  • 1
    As such, your site is PWA complaint and you are good with that. There are two isolated JS error, which seems to be effecting your page load. Got these ReferenceError: CheckIfMobile is not defined and LoadPage is not defined in developer console. – Anand May 26 '18 at 19:46
  • There was also a hidden symbol at the start of the file, which was not visible in visual code editor but appeared in the a2hosting editor. – Arun Prasad E S May 26 '18 at 21:19
0

Getting your app or site fullscreen

There are several ways that a user or developer can get a web app fullscreen.

  • Request the browser go fullscreen in response to a user
  • Install the app to the home screen.

  • Fake it: auto-hide the address bar.

    gesture.element.requestFullscreen()
document.documentElement.requestFullscreen();

For more details:- https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

nandal
  • 2,544
  • 1
  • 18
  • 23