How do I trigger the 'Add to homescreen' prompt for a PWA? - progressive-web-apps

I have a PWA setup with a manifest and service worker such that I can manually add to the homescreen on Chrome in Android if I select the 'add to homescreen' button under the menu. I also verified on the Desktop that I can add it as a webapp in Chrome.
However, it seems that the installation banner only pops up based on some heuristics that Google selects e.g. user must interact with the site for 30 seconds etc.
What I would like is a button on my homepage, such that when I trigger it, the add to homescreen banner will automatically pop up in Chrome. How do I do this?
I want something similar to the 'Install' button on this example site: http://airhorner.com, which manually triggers the banner. However, what I would like is a minimal working example that demonstrates this.

The first thing to check is with the Chrome Audit tools.
Run the Progressive Web App audit
Under Passed Audits, you should see
--- "User can be prompted to Install the Web App"
Notes I have for A2HS
Source code links there for my working example
https://ng-chicago.github.io/2018/06/18/add-2-home-screen/
There are also reference articles I used
Most of the work when testing your A2HS is constantly clearing out your browser and previous installs (Chrome desktop and mobile) to test again.

Related

G Suite App : Continue button on the "Domain wide install" stop working

I have configured a G Suite market place application and it's still in the test level. After filling the configuration page of the market application I got a button named "Integrate with Google" in the top of the Marketplace SDK configuration page
After clicking the button I get a pop up with the title "Domain wide install" there we have the "Continue" button. Previously that button redirected users to the consent screen, but it doesn't redirect to anything now. I did not change anything in the configuration so I guess this is probably a change from Google side.
Please let me know what the issue is?
There is an open Issue on Google's Issue tracker about this at:
https://issuetracker.google.com/153243016
You should add a start next to the issue number, for it to get more visibility.

PWA - Chrome Add-To-Home-screen adds as WebAPK but not to home screen

I have a Progressive Web App that meets all the Google Chrome criteria for installation and passes the Audit tests. Using Chrome, when I surf to the PWA's URL and select "Add To Home screen" (either from the menu or from the popup) it will install as an app via WebAPK - as expected. The correct icon shows in the app list. However, the app icon is not added to the Home screen - it is not on any of the home screens.
Shouldn't it also be added to the home screen as that is the expectation of "Add to Home screen"?
This SO thread suggests adding to both is the usual functionality. But that is not happening for me. PWA add to home screen does not work as expected
If it should also be added to the home screen, any suggestions as to what I may be doing wrong or where to investigate?
If it doesn't also add to home screen - shouldn't it? Or change the menu item to "Install App" - so the user expectation is set correctly?
EDIT 2021-09-18:
It's been 2 years since this post and I've been distracted with other things (as many have the last 18 months). But coming back to this project, I still have this issue. Thanks to CherryDT for suggesting to update this post instead of creating a new one.
I created a minimal PWA (called PWATest) that successfully registers a service worker and shows the browser prompt to install the PWA. The browser prompt in Android Chrome (now Version 91.0.4472.124) shows at the bottom of the mobile screen and says "Add PWATest to Home screen". When I tap that prompt, the "Install app" dialog shows and I select "Install". I see "Adding PWATest...". After it is installed, the app icon is in the applications area with all the other app icons but there is no PWATest icon on the home screen (any of them).
I have cleared the cache and asked a friend to try with no difference.
I just went to bmw.com and installed their pwa. Same thing. The app icon showed only with the other application icons - no icon on the home screen.
I tried my pwa using Samsung Internet and again same result.

Make google actions development project preview persist longer

I want to make google voice actions app for my Google Home. But, based on quick research, as of Dec 11, google does not allow private projects for Google Home.
References:
Can I develop a private action only accessible via my google home or linked account?
How can I run my development action on my Google Home?
I understand that I can preview the app from API.ai project, and it deployes to the linked Google Home device.
But the issue is, the deployed app does not persist. It is no longer available after hour or so.
How can I make it permanent (if there is a way)?
UPDATE
Based on Leon's answer, I just wanted to extend the steps on how to enable the sample for 24 hours.
Click on the "Google Home Web Simulator" link on bottom right corner.
Then you will be presented with google home device - click on "Start" button on that page
On next page, top right corner you have the "ACTION PACKAGE" button Leon is talking about. Click on that and extend expiration time by clicking on "Preview for 24 hours" button. See screenshot below:
I have found a way to create the Action on API.ai and then preview it indefinitely.
From API.ai:
Open browser dev console (Network tab)
Go to Integrations
Turn on "Actions on Google" integration
Click "Authorize"
Click "Preview"
Inspect the XHR response from https://console.api.ai/api/agent/googleassistant/preview in the Network dev console
{
"status":{
"code":401,
"errorType":"unauthorized",
"errorDetails":"You are not authorized for this operation. ",
"webhookTimedOut":false
}
}
Copy/paste the content of the response into a file called action.json
Then, download and install the gactions CLI from here - gactions CLI and then run this command:
gactions preview --action_package action.json --preview_mins 9999999 \
--invocation_name [your_own_invocation_name_here]
The preview_mins value of 9999999 makes the preview effectively indefinite.
Here is a video demonstrating it:
As of today, May 17 2017, the highest voted answer to this question no longer works for new API.ai projects due to the upgrading of the Actions on Google SDK to v2. A similar methodology to #Brady's answer does work still, but they've made it more difficult in some ways (more information needs to be provided to Google, globally unique invocation name despite being a local only test), and better in others (gactions CLI docs now explicitly state that indefinitely timed previews are accepted, and actually is the default if not provided as a argument to the gactions test call).
Create your API.ai agent as normal.
Under the "Integrations" side menu, open the "Actions on Google" settings.
Select "Test" from the bottom of the dialog box that appears (you may need to jump through a few hoops here, signing in, authorizing account access, etc.)
This is where it gets a little different. You now need to create a project on the Actions on Google console. Create or import a project to the console.
The first required step is to supply an action package, which can come from either API.ai or the SDK directly. For API.ai, you have to go back to the Integrations page we were at and press "Update" on your Actions on Google settings. (On the previous version of the SDK, this was labeled "Deploy" and would have made your app public, but don't worry - all this does now is update the AoG console. You publish publicly from the AoG console later if desired).
This new console requires more information outright than was necessary before. I found that the "Assistant app name" can be whatever you want, but the "Pronunciation" is strictly limited to a few conditions (globally unique, reserved keywords, non-brand violating). I also found that I could still invoke using the app name and not just the pronunciation, but I suspect that will be fixed.
Once you've filled out all the necessary information, you can test
from API.ai. Return to the AoG settings menu in API.ai and retrieve
the response content from the HTTP request preview (just like in
#Brady's answer above). Here we hit another difference. The content
of the request response can't be used directly in the action.json
file as it is wrapped in another object. You want to use only the
object from the property actionPackage. (i.e. remove
{
"actionPackage":
from the beginning of the content and
}
from the end). You should end up with a object of a structure similar
to this (but maybe not exactly, it depends on the content of your
API.ai agent):
{
"actions": [...],
"types": [...],
"manifest": {...},
"conversations": {...}
}
Put this into your action.json file.
Execute the new gactions CLI command:
gactions test --project <your_project_name_from_aog_console> --action-package action.json
Enjoy your local v2 Actions on Google SDK project! And pray Google does not alter the deal any further...
I tried my best to recall what I had to do from memory, so there may be some mistakes in this write up. Hopefully this helps someone.
You can extend the time the development action can be previewed on the web simulator or Google Home device. After you preview the action from API.AI, click on the list of action packages in the web simulator. Then select the "Preview for 24 hours" link for your action package.

How do I open any app from my web browser (Chrome) in Android, automatically?

I am struggling a little bit. I have a common url like www.domain.com/test.html
and i want Android users to get my app open if "test" is included, otherwise if they don't have the app their should be directed to the play store. I got everything implemented and it works with mozilla browser. But using chrome on Android it should be forbidden to automatically open the app if it is available!?. Now if the user enters www.domain.com/test.html and i recognize he is using Android and Chrome i tried the intent stuff in a script in a redirected www.domain.com/android_chrome.html:
<script> window.open("intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end","_self")
</script>
But the App won't open automatically. If i use a regular Link:
Take a QR code
it works. But i want to let it open automatically!
Google restricted starting intents from javascript apps, that's why it isn't working. Security reasons I guess. You should just display nice big link to let user switch to your app instead of website - or let him continue if he doesn't want to launch the app.
Forcing users into using app is bad, IMO. Splash screen suggesting to use it is okay, but don't push it.

How do I show a popup in my Crossrider browser plugin

How can I show a popup programmatically in my Crossrider.com browser plugin? It works fine to click the button and show it, but I want it to show automatically on certain pages. I do not see any api method available like appAPI.browserAction.showPopup(), which would be ideal. I also do not see how to trigger the button click event. TIA.
First of all, I would recommend you to familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
Now, as for triggering the browser button "window open" right from the code - this is not supported through the API as it bad for user experience and in any case not supported in Chrome, so building such support only for Internet Explorer and Firefox seems futile.