xF1 Guides - Web App Install Banner | NulledTeam UnderGround | The Best Scripts Site In The World
Resource icon

xF1 Guides Web App Install Banner 1.0

No permission to download
  • Read Our Rules

    Dont forget read our rules Nulled Team UnderGround Rules

  • You may not say thanks or replied bad language in a thread - Your reply will be removed and warning! You must be like us "overview" in the resource. You will be access to download in FREE SECTION ONLY! DO NOT PREMIUM SECTION! Is only upgrade to up account.
  • Please support our site and click on the advertised
  • Complete Installation Service

    Review Our XenForo Complete Installation Service
  • Multiple Accounts

    Dont forget we not allowed Multiple Accounts, so all of your accounts as well as your IP will ban

Compatible XF Versions 1.x
1.0, 1.1, 1.2, 1.3, 1.4, 1.5
What this does is add an install banner that shows under specific circumstances when someone visits your site using Chrome on an Android device. Your site must be https for this to work.

See: https://developers.google.com/web/u...p-install-banners-in-chrome-for-android?hl=en

Please note that you are doing this at your own risk. I cannot provide much support and am not responsible if you break your site.

The zip file download contains five files which should be uploaded to your forum root after editing: manifest.json, launcher-icon-2x.png, launcher-icon-3x.png, launcher-icon-4x.png, and sw.js.

manifest.json should be edited to replace the parts shown below in orange with your site details:

You don't have permission to view the code content. Please Log in or register now. Log in or register now.
The start_url refers to the page you want to be loaded when someone launches your web app. Yours may end with /forums or index.html depending on your home page URL.

The three PNG files (launcher-icon-2x.png, launcher-icon-3x.png, launcher-icon-4x.png) should be replaced with your logo in PNG format at those image dimensions (96x96, 144x144, 192x192px, respectively).

The sw.js file can be uploaded without editing. That is exactly as provided by Google here: https://github.com/GoogleChrome/sam...-worker/custom-offline-page/service-worker.js

I did not change anything except the file name (service-worker.js changed to sw.js).

Lastly, add the following to your PAGE_CONTAINER template immediately after the <head> tag.

You don't have permission to view the code content. Please Log in or register now. Log in or register now.
That was taken from the Google example here: https://github.com/GoogleChrome/samples/blob/gh-pages/app-install-banner/basic-banner/index.html with a slight change in the scope from './' to '/'

Currently Chrome is set to automatically show the banner if and only if someone visits your site at least twice, separated by at least 5 min. If someone dismisses or ignores the banner, it doesn't seem to show again unless they clear the browsing data from Chrome.

Some handy tools to test your banner:

1) Enable chrome://flags/#bypass-app-banner-engagement-checks to cause the banner to show without checking if you have visited twice separated by 5 min. Remember to disable this later, otherwise the banner will keep popping up.

2) If the banner is not working for you, test your URL in this manifest.json validator: https://manifest-validator.appspot.com/

3) If banner is not working for you, user Developer tools in Chrome, and look at the Applications tab. Check Service Workers and Manifest, which should look like this:

I can't provide much support for this. Just wanted to share the process since it took me a long time to figure out. You can find a lot more information as well as other examples here:



Addendum: This banner will only show to Android users browsing in Chrome. If you want to show a banner to iOS users browsing in Mobile Safari, this works nicely: http://kurtzenisek.com/p/smart-web-banner/

Both banner types can be seen in action on my site at https://www.seriouscompacts.com
  • Like
Reactions: Rashidkareem
First release
Last update
0.00 star(s) 0 ratings

More resources from RevisedSecurity

Share this resource

AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock