Configuring Android Web Applications

Configuring Android Web Applications

This is a dated question, as such the answer has changed.
Chrome on newer androids has it's own meta tags for this.
Make sure you Add to the Homescreen, and launch from the homescreen.
A normal bookmark is not sufficient. Chrome currently uses a few of the apple directives, but the three at the bottom are the android magic.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="apple-touch-icon" href="youricon.png"/>
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">

<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
<link rel="shortcut icon" sizes="128x128" href="youricon.png">

How to configure web app fallback for instant app

Alright, I've managed to find a solution, it is pretty easy one. My deep links most of the time have data passed as path such as /type/value. The solution is to create clear index.html file with javascript attached like this:

  <script>
    window.location.href = '<FALLBACK WEB APP URL>' + 
    window.location.pathname;
  </script>

This code extracts path from the deep link and adds it to web app link. Next, index.html needs to be served for every folder of deep domain, but domain needs to also allow to read assetlinks.json file if needed. This solution work pretty well with instant apps - it is not breaking invocation process, and is is also compatible with iOS AppClips.

Invoke android settings from web page URL?

You cannot invoke Android Settings from web unless you have app which handle custom uri scheme.

to invoke application in android from Webpage there needs to be app which handles call from particular Uri Scheme in android app on android device.

you can create android app which handle custom uri scheme like below for activity to be invoked when url is visited in browser.

<activity android:name=".MyUriActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" android:host="path" />
    </intent-filter>
</activity>

myapp://opensettings

if application is exist on android device which handle above uri scheme then you can call setting dialog from your android app after user redirect to myapp://opensettings url in browser.

Manage Android Device through web browser from a laptop using WiFI

Giving a look at the i-jetty example application you can see that it's possible to retrieve the Context and ContentResolver objects:

android.content.ContentResolver resolver = (android.content.ContentResolver)config.getServletContext().getAttribute("org.mortbay.ijetty.contentResolver");;
android.content.Context androidContext = (android.content.Context)config.getServletContext().getAttribute("org.mortbay.ijetty.context");

through which you can access system services, read and write preferences, execute queries to retrieve contacts etc. as if it was a normal android application.

How to configure icon for my flutter web application?

Glad you ask! As the owner of that project I can tell you how I did it:

UPDATE: With PWA support and Flutter 3

1- Inside your /web folder (to be pushed to the server), add a /icons folder (if your don't have it already).

2- Once you're there, you need to upload your set of images with websites like this one.

3- Is going to look something like this:

4- You should have a manifest.json and is going to look something like this:

{
    "name": "Tap Hero",
    "short_name": "Tap Hero",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#000000", // any HEX color works
    "theme_color": "#000000", // any HEX color works
    "description": "anything you want here",
    "orientation": "portrait" // or changed as you wish
    "prefer_related_application": false,
    "icons": [
        {
            "src": "\/icons/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/icons/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/icons/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/icons/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/icons/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/icons/android-icon-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

5- Once you did all that, add the rest of the icons inside your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tap Hero</title>
    <meta name="description" content="Tap Hero">
    <meta name="keywords" content="Flutter, Tap, Hero, Game">
    <meta name="author" content="Mariano Zorrilla">
    <meta name="theme-color" content="#6200EA" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">

    <!-- Main Favicon -->
    <link rel="icon" type="image/pg" href="favicon/png"/>

    <!-- ALTERNATIVE <link rel="icon" type="image/x-icon" href="favicon.ico" /> -->
    
    <link rel="manifest" href="icons/manifest.json">
    <meta name="msapplication-TileColor" content="#6200EA">
    <meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
    <script>
       if ('serviceWorker' in navigator) {
         window.addEventListener('flutter-first-frame', function () {
           navigator.serviceWorker.register('flutter_service_worker.js');
         });
       }
    </script>
    <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

6. IF (by any chance) your /web and or manifest.json files are corrupted/broken/etc you can delete the entire file and do "flutter create ." that will generate everything again for you and can do a new try every single time.

Android's Add to Homescreen basics

Found that the instructions on this site provided the required manifest file and inclusion directions:

https://realfavicongenerator.net/

---

Related Topics