I'm trying to turn my PWA (Progressive web Application) into an TWA (Trusted Web Acitivity) App for Android. In the beginning everything was working fine, until a user reported a problem to me.
He was unable to open the App at all, so we checked to see what could be the cause. Turns out he hasn't installed Google Chrome and is using Samsung Internet instead.
Now I did manage to get the App working with Samsung Internet so far, but with Samsung Internet the address-bar still appears.
There are a few tutorials to setup your TWA for Chrome OR Samsung Internet, but how can I combine these two? I guess we shouldn't force the user to download Chrome first. I haven't found any articles concerning this issue, so I'd be grateful if someone can link me some.
When using a Trusted Web Activity with the recommended android-browser-helper library, the application will check for an installed browser that supports Trusted Web Activity, giving preference to the user's preferred browser.
If there's no browser that supports the protocol available, it will fall back to using a Custom Tab and, if Custom Tabs is not available, open the browser.
The library also contains a WebView fallback for developers who prefer that to the Custom Tab / browser. A demo on how to use the WebView fallback is available here.
Regarding the Samsung Internet browsers, it added support for Trusted Web Activity in November 2020 (version 13.0.2.9). Currently, Chrome, Samsung Internet, Firefox, Edge and others support Trusted Web Activity, covering the vast majority of users. An updated list of browser support is maintained here.
After tons of wasted time trying to figure this out myself and lots of research I found this article:
https://medium.com/#firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc
Where you can find this info:
TWAs work only with Chrome today, but the API might be also cloned by other browsers, such as Samsung Internet, Edge or Firefox in the future.
*UPDATE 2/4: The TWA works over the Android Custom Tab protocol that other browsers are currently implementing, so if the user doesn’t have Chrome or has changed the default browser, another browser might take precedence and open the TWA with the PWA content. More testing is needed to understand how it works.
What happens if the user has an older version of Chrome and installs the app from the Play Store? In this case, your PWA will appear as a Chrome Custom Tab, not in a completely standalone mode.
What that means in a nutshell: TWA's are actually useless, as long as you need your App to be compatible with a lot of different devices (like most do). I also noticed many Apps don't work if you disable Chrome on your Device, why I guess these are using TWA's too (and getting bad reviews on PlayStore instead).
So what I did was to dump away everything I did with TWA, and simply started using Cordova instead. It would have been great to have something like TWA's working just that simple, but as long as it's not working without having Chrome installed, there's no point in using it at all.
And not having this stated on https://developers.google.com directly, but fuzzy and unclear, has probably ended in the waste of time of many dev's and/or tons of Users being unable to use some Apps.
I just checked my TWA and it is working for particular browsers as follows:
Chrome without any problem
Edge on first launch shows message running in edge, later works as expected
Opera working as expected
Samsung browser - asks to open in browser, but works fine in browser. hides address bar if opened in browser
Firefox(once a best browser around ...) asks to open in browser, if opened it still shows address bar
Related
It's a Capacitor app based on a React project. I have the opposite question to most people, it seems -- most ask how to get an external link (a link not from their domain) to open in their app. I ask how to open it outside the app, in a standard browser. Not that I prefer users to jump between applications, but, once the app opens up an external webpage, then the user can't get back into the app, since the external webpage doesn't provide a deep link back into the app. So it seems a lesser evil to necessitate jumping between applications.
What confuses me is that, based on others asking the opposite question, opening an external url in an external browser should be the default behavior, but my Android app does the reverse. The Capacitor ios app based on the same code correctly opens any external link in Safari. But my Android app opens it right inside the app, causing me to lose the app to the redirects. I didn't explicitly add any settings to result in this behavior. What gives?
Edit:
It helps to check out more simulators. The behavior occurred on a simulator, specifically the WXGA tablet with Android version 30, but not on all simulators, even those with version 30. The WXGA tablet seemed to close the app and run the web browser, since I couldn't find the app window anymore the moment the redirect to the webpage happened. It looked as if the app was running the browser content, but I now think the app was simply closed. I'm still confused why it does that, since most other simulators and the physical phone I tested on didn't behave that way.
I want to be able to open links in my app with chrome custom tab will that still work if the user doesn't have chrome or will it crash my app.
I tried to uninstall Chrome from my phone(i use my phone for testing) but I can't unless I root my phone which I don't want to.
Is it possible for android to ship without the chrome browser.
You can disable Chrome to emulate it not being installed: https://support.google.com/android/answer/2521768?hl=en-GB. There's not need to root the phone.
Many browsers, including Edge, Firefox and Samsung Internet support the Custom Tabs protocol, so your app should still be able to use Custom Tabs, as long as one of the browsers that support it is installed.
My problem is that in my mobile nexus5 with chrome browser, I can launch a native application with a schema or go to another page if failed, everything works well. But in some other mobiles still with chrome browser (in my case, there are mobiles made by manufactories from China like Huawei, they custom their android system like the way HTC and Sumsung do), the browser seems like treating the schema as a http request and open it, and then shows this page cannot be displayed. And also my Javasript code in previous page cannot work anymore.
Is this a bug with chrome or because the android system is modified manufactory so that chrome cannot handle the schema correctly.
So I am currently having this problem of trying to open up our web app on the official stock Android browser for Jelly Bean. I don't know how well I can elaborate this problem, but I will try my best.
For devices that run ICS or older, on any browser (stock, firefox, chrome) we can type in the URL for our web app, get taken to the login page, login, and view everything fine.
For devices that run Jelly Bean (4.1 and 4.2), if we type in the url into the stock browser, we get the following:
However, if we use Chrome or Firefox, its fine.
It's odd that we get this error because I am already authenticated on our network, and I only try to access the login screen so no other authentication would be required.
Our web app grabs information from a server, and it doesn't seem to be a problem on the server side.
So it seems like the culprit is the stock browser in Jelly Bean, and I tried looking up if there were any changes to the stock web browser from ICS to Jelly Bean, but I couldn't find anything yet.
Has anybody come up with an issue like this, or is aware of any big changes (maybe related to security?) that were made to the stock android browser on Jelly Bean?
EDIT: This web app is not available externally. Currently we have only tested internally where you would have to be connected to our internal network.
EDIT2: Just checked with Dolphin Browser and the same thing happened... so I'm really lost now as I am even less sure that it has something to do with the 4.1+ stock browsers. Also, something else that makes me feel even more lost is that, I just checked on the galaxy SIII's stock browser on 4.1.2 and the page loads fine...
EDIT3: Good news, further investigation has been done by our devs and apparently this is the problem:
the default browser adds an extra header to the request that makes our server think it is an ajax request and rejects it because the rest of the request is not actually an ajax request... This bug is caused because the default browser in Android 4.1+ has added a new header to all requests "X-Requested-With: com.android.browser".
So I'm guessing the Dolphin HD browser does this as well... further investigation is being done so will get back to this and put up an answer
According to our devs who did some research:
the default browser adds an extra header to the request that makes our
server think it is an ajax request and rejects it because the rest of
the request is not actually an ajax request...
This bug is caused
because the default browser in Android 4.1+ has added a new header to
all requests "X-Requested-With: com.android.browser".
At the moment we can't afford to spend more time trying to find good work around through code for this problem... so we decided to document this as a known issue and suggest people to use Chrome if they have a 4.1+ device
We have an existing web site, and I've been asked to test its compatibility with mobile browsers.
I've installed the Android SDK onto my desktop PC. I'm able to view my localhost site in the emulator, and I have identified a number of glitches in the page layout which occur in the Android browser.
But since none of these issues occur in any desktop browser, I've been struggling with how to debug them. For example, in Firefox, it's very easy to use Firebug to see what stylesheets have been appies and to adjust them on the fly to see how it affects the layout. But I haven't found a way to do anything similar on the Android emulator.
The question is, short of trial+error, how do I go about working out what is causing those layout issues? Does the Android browser (or the Android SDK) have any kind of tools that are useful for debugging CSS? If so, how do I use them?
[EDIT] I haven't found a solution to this, so I'm throwing open the doors to the bounty hunters...
Weinre is probably the closest to what you're looking for:
If what you're looking for is something that allows you to tweak layout in realtime it should make you happy.
https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US
https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US
https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US
I found several options that appear as though they should work for you if an emulator/simulator will suffice or at least get you started. The benefit to this is that the Chrome Developer Tools appear to work with the add-ons!
Personally, I would much prefer to do this on actual Android hardware. In usage a touch screen handset is quite different to even the most accurate emulator; things such as gamma, pixel density, performance, touch interaction (are your links big enough?), portrait/landscape orientation and even the fact you hold it in your hand makes it quite different to the desktop experience. If you want to see how well your site works on mobile/Android, get a cheap second hand device to test on!
As for the debugging; I always include my own "log" function which creates a div#console if the firebug/browser console is unavailable. This works reasonably well for debugging on a handset with the caveat that it covers part of the content. You can then print out the current style of an object with something like
log(window.getComputedStyle(document.getElementById("myobj"));
Note: The above will not work in IE.
You may have already seen this, but the SDK Documentation Site has some basic information on developing and debugging web apps on Android:
Web Apps Overview
Debugging Web Apps
Hope that Helps!
I don't know how you detect a mobile device but I detect a client with the user agent. Because of this I can simply send a different user-agent string to test CSS which works fairly well.
For Firefox I use User Agent Switcher. Additionally I use the Web Developer tool not only to view all settings but also the Resize option to simulate the viewport width.
Apple's Safari has a developer extension and within also a User Agent Switcher. You can add your own User Agent string.
Chrome provides tools for doing this now. Just visit:
chrome://inspect/
With your device connected and ADB running - you can then use all of the Chrome web element inspection tools. This works with the browser, but also with any app that renders in a WebView (e.g. Cordova).