I don't get an 'add to home screen' banner when I go on my website.
My service worker is ok and my manifest.json too
When i try the add to homescreen in chrome dev with my desktop i have the banner but i don't have it automaticaly with my android phone
Can you help me please
The best thing you can do in this situation is to start by opening up Chrome Dev Tools on a desktop computer. Navigate to the "Audits" tab. The screen should look something like this:
Chrome Dev Tools Audit Tab (click to view image)
Make sure you have "Mobile" checked since this seems to only be an issue with mobile for you, then click "Run audits". It should come back with something like this:
PWA Audit Results (click to view image)
In this example, everything is correct so we see the green circle with "100". If there is anything wrong with how the PWA is implemented, it will be noted here with an error.
Hopefully you find this helpful, along with anyone else who runs into this issue!
Related
I am building a gatsby blog site. I have made it PWA. Service worker is installed and its working. The problem I am facing is that the install(plus) icon does not appear on the address bar which usually appears on PWA based websites as well as "add to home screen" icon is also not appearing when I visit the site on android.
So I perform a lighthouse test selecting "Desktop" category, all tests passes except for "Content is sized correctly for the viewport". The icon before this category remains greyout and not turns into green. However when I perform lighthouse test selecting "Mobile" category all tests passes.
Any idea what could be the problem?
Issue resolved. I was using
icon_options: {
purpose: "maskable",
},
I found out that purpose should be either "maskable any" or "any". So I used "maskable any" and it worked.
I have Chrome installing my PWA on Android - once it's installed I'd like to automatically close the browser window it was installed from, and open the PWA (so the user doesn't continue in the browser window, thinking they're using the PWA) - is this possible?
i was looking for a similar solution and have not yet found a way to do that. I try to describe my findings so far:
CLOSING THE BROWSER WINDOW:
as described in this answer window.close() can only be called on windows/tabs that the script opened itself. Some possible workarounds are being discussed there.
OPENING THE PWA RIGHT AFTER INSTALLATION:
Google describes in their WebApk Fundamentals Article it as follows:
When a Progressive Web App is installed on Android, it will register a set of intent filters for all URLs within the scope of the app. When a user clicks on a link that is within the scope of the app, the app will be opened, rather than opening within a browser tab.
I was hoping that would work also right after the installation/Adding to homescreen from the still open browser window.
Based on testing with two Android devices it seems as if at the moment the user has to manually open the PWA from the homescreen once for chrome/android to interpret the scope of the web apps manifest.json as intend to open the page in standalone.
This is sad for even iOS seems to handle that different.
Maybe I am overlooking something in the Google Article? I also do not fully understand androids intent API - so maybe there is some way to still achieve that (?)
Based from this blog post:
When the PWA is installed, it will appear in the home screen, in the
app launcher, in Settings and as any other first-class citizen app in
the OS, including information on battery and space used in the system.
There's a tracking event when the user opens the app from the home screen. That means the user has clicked the app's icon or, on Android with WebAPK support, also clicked on a link pointing to the PWA scope and need to close the browser.
start_url: '/?utm_source=standalone&utm_medium=pwa'
Also, the following script leaves us a boolean stating if the user is currently in a browser (true) or a standalone app mode (false)
var isPWAinBrowser = true;
// replace standalone with fullscreen or minimal-ui according to your manifest
if (matchMedia('(display-mode: standalone)').matches) {
// Android and iOS 11.3+
isPWAinBrowser = false;
} else if ('standalone' in navigator) {
// useful for iOS < 11.3
isPWAinBrowser = !navigator.standalone;
}
I had this problem on Android with Chrome. The change that made the difference is adding "target='_blank'" to the link. It looks like:
window.addEventListener('appinstalled', function(event){
setTimeout(function(){
presentToUser("<a href='https://myhostname.com' target='_blank'>Go to App</a>")
}, 10000)}
});
The ten second timeout is to give Android the time to set up the App on the home page.
I had made that adjustment earlier; possibly I can remove it?
But setting the target was what made this work.
The App opens over the top of Chrome, obscuring it.
So closing the browser is not immediately required but is recommended.
In the new versions of chrome, after installation in android it associate all the links in the "scope" to the PWA application, if you try to open a link in your chrome browser it open directly in the application.
hope that will answer your question
I'm using vidyo.io as videoconference solution in our platform. I'm having an issue with Vidyo's Chrome extension for screen sharing that is easily reproducible using the very own Vidyo's samples:
If you download Vidyo's web sample from developer portal, open samples/VidyoConnector/js/VidyoConnector.html in Chrome, choose 'Join via the browser', and click the 'Window share' select list (there is no need to start a conference to reproduce the error), Chrome will open the Vidyo Screen Share extension page twice, even if you already have the plugin installed. For this to work you have to uninstall the extension and reinstall it again. It will work until the end of the current session.
In the other hand if you go to Vidyo.io developer portal, choose "Demo" from "Developers" menu and start a conference using the "Join via the browser" button, click the same 'Window share' select list the Vidyo Screen Share extension works as expected, allowing you to pick a window or a screen to share.
In our implementation we're having the same problem as the code from web sample listed above, but if an example of our code would be of any help to clarify the issue, here you have an excerpt (we're using Angular, and here you have some TypeScript code):
private vidyoConnector: VidyoClientLib.VidyoClient.VidyoConnector;
(...)
selectedWindowShare(share: VidyoClientLib.VidyoClient.VidyoLocalWindowShare) {
this.vidyoConnector.SelectLocalWindowShare({localWindowShare: share})
}
This issue happens only on Chrome. When we use Firefox it works seamlessly. I'm using Chrome 69 on OSX High Sierra.
Any suggestion on how to solve this will be much appreciated. Thanks in advance!
If I am not mistaken, you are either running the VidyoConnector.html directly in the browser or hosting the sample on non-secured hosting (HTTP).
For the Vidyo Screen Share Chrome extension to work correctly, you need to host it on a secured hosting (HTTPS).
You can verify this by using our hosted sample here:
https://static.vidyo.io/latest/connector/VidyoConnector.html
Hope this helps.
Our company designs museum and visitor center exhibitory, and my main job is designing touch screen kiosk applications. Enamored by Vidya's introduction to Kiosk Apps using Chrome boxes, I quickly had my boss procure one for testing. I have since gained a firm grasp of Chrome App structure going though Google's tutorials (manifest files, MVC, etc) and have found the performance of our little HP Chromebox plus HTML5 development to be pretty impressive. I'm developing on my Macbook using Chrome Canary to run and test the apps.
I'm adding in this background information so you can better understand my goals. We of coarse need these apps to launch full screen upon power up. No login or user installation is desired. I prepare the boxes in my office, install them at the exhibit, the end. We certainly don't want our multimedia apps to be sitting up on the Chrome Web Store for others to download and install.
So, I've gotten to the point where I want to install a simple kiosk app on our HP Chromebox. Unfortunately Vidya did not go into detail on this part. The page from her article only touches upon adding kiosk_enabled" : true to the manifest file.
So here's what I've tried so far: I've moved my app folder onto an SD card and moved it from there onto our HP Chromebox into the "Downloads" folder (apparently the only folder). I sign into Chrome Browser on the box with my company account (do I have to do this?) and load up chrome:extensions. I click "load unpacked extension..." and select my app folder. The app installs and I am able to manually launch it by clicking "Launch". Next, I click the "Manage kiosk applications..." button and enter the app ID into the field. This is where I get stuck. Clicking "Add" produces an "Invalid Application" error.
Looking around the web I have found lots of confusing information:
I must "Wipe" the Chromebox in order to use a Ctrl+Alt+K key command to truly enable kiosk mode. (Google's instructions on how to do this stops with Samsung and Asus 'boxes, I have an HP, not to mention the "Manage Kiosk Applications" button is already visible to me).
I must upload my App to the Webstore as either public or unlisted, and then download and install it onto my Chromebox. Really? I don't want to sell my app or make it available to anyone. It is only meant to run in our exhibit. Our apps could be gigs of data with HD videos!
I must make my Chromebox "Managed" or "Enterprise" or "Enroll" it for Work and Education Administration. In most cases, we'll be installing one or two of the 'boxes to allow users to navigate though static HTML pages. I don't have a need to manage a fleet remotely (at least not yet). So, the aforementioned complications seem unnecessary, and expensive if I understand things correctly.
Can someone point me to the definitive process for achieving my goal of an auto starting, full screen kiosk application on my Chromebox?
I'm not an expert on this but kiosk apps are defined by "kiosk_enabled": true in manifest.json. What's important to know, though, is that from what I've seen they can work in three different modes:
If they are installed as an unpacked extension (for example, in development) they will be available as apps in your logged in environment and run but full screen mode. They're essentially "normal" apps except that they are full screen.
If they are installed using the "Manage kiosk applications..." button then they are available without logging in. On the log in screen at the bottom you'll be able to see the app and click to start it without logging in. However they won't start automatically. AFAIK you also can't load an unpacked extension in this way.
If you enable "kiosk mode" for Chrome OS then you can make kiosk apps auto start. At least on the Asus CB you do have to do the CTRL-ALT-K keystroke BEFORE you log in for the first time. This is for an unmanaged device. Now, when you load the app using "Manage kiosk applications..." in chrome://extensions and hover your mouse over it in the dialog you should seen a "enable auto-start" or similar button. You need to select this. Now, when you restart the system the app should automatically start. If you want to cancel this just as the app is loading you can press CTRL-ALT-S. A message indicates this on the screen, too.
Hope that helps,
Simon
Can't help you with anything related to kiosk, but you can generate a CRX file from the Extensions page on your development system, get that onto the Chromebox, put the Extensions page of the Chromebox into developer mode, and then drag the CRX to the Extensions page and drop it. You should see a dialog asking you if you want to install it. This is a completely different form of install than loading an unpacked extension and may get around whatever limitations you're seeing.
UPDATE: (1) Extensions page on Chromebox doesn't have to be in Developer Mode, (2) CRX to be dragged must be in the Downloads directory, not on Google Drive. Didn't test external device (SD card or USB drive).
In order to add your app from Manage Kiosk Applications, you will need to publish your app to the Chrome Web Store. If you don't want your app to be public you can publish it as Unlisted, which means that anyone with the link can install it. Unfortunately, if the app is published as Private you will not be able to add it as a kiosk app. [source]
Beyond that, the only thing you need to do to create a kiosk app is to include "kiosk_enabled": true in your manifest.json file.
normally what happens when you install an app is that it creates a shortcut from where you can launch it on desktop or start menu. However, chrome apps for now are places in chrome app launcher that is packed with all other chrome apps. It's all good and fine. But is there a way to place my app on desktop with user's consent if need be.
There is a way to do it manually. Like if user right clicks on the app in chrome app launcher and click create shortcut which has checkboxes showing places where shortcuts are going to be created ex: desktop, startmenu...
Without a icon of your app on desktop it still doesn't feel like a standalone app.
You can check out the chrome.management.createAppShortcut API that is added recently. Now it's only available on the dev channel:
chrome.management.createAppShortcut("app_id");
There is no way to do this. Users can also drag their app from the app launcher to the desktop to create a shortcut.
An API to prompt the user for this isn't something we're likely to support. Personally I think users would find it annoying, as it is simple and easy to create shortcuts where they want.
If you disagree please file a feature request at http://crbug.com. It would be there is some action we could take, e.g. educate users better that they can create shortcuts, but crbug.com is a better place to discuss.