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.
Related
Following a super simple PWA tutorial, I'm interested in having an app in full screen mode while installed on desktop.
You can see the code here: github
And the live page here: hello world pwa
If you install it with chrome:
Everything works, except it looks like this:
I've included "display": "fullscreen", in my manifest.json. as explained here: pwa manifest docs
So whats wrong then? How to make this app go full screen for real?
I don't know if this is specific to the newest update of IOS 13, but I'm having some really strange PWA behavior. When I initially add it to my homescreen, links on the page open in safari rather than inline on the PWA (none of the links are set to __blank by the way), but when I sign in with oAuth on safari and then add it to my homescreen, it functions like it should and it works normally with links. (Currently using Passport with Node and Express for authentication) I don't know if there's some security infrastructure or something to do with packets, but it's really strange and I'd like to resolve this as soon as I can before my userbase gets frustrated.
I've tried looking through my manifest but everything is up to spec as far as PWA standards go. I have the display set to standalone, I have all my tags setup correctly, Lighthouse audit also says it should work. I've looked through the passport docs, traced my authentication code, but nothing seems to work.
It looks like Apple changed the home screen/standalone web app behavior in iOS 13, but I cannot find any official documentation on this. Now it seems that if you did not have a manifest.json setup before the web app was added to the home screen, it only treats the initial page as being in scope for the standalone view. Hence any other link/redirect opens in another window or the in-app browser.
We have a web app installed on our user's home screens that was written years ago and functioned just fine up until iOS 13 without a manifest.json file. I had to rewrite the WebSQL code in our app to use IndexedDB instead since they completely dropped WebSQL from home screen web apps in iOS 13, even with WebSQL re-enabled in the Safari advanced setting. When I started testing on an iPhone, any link or redirect, even using window.location.assign or any number of other methods would always open the next page in an in-app browser with a minimal UI. This also messed with the page geometry as what was a full height page with no scrolling, was now scrollable with our 'Next' button elements pushed off the bottom of the screen. Since we have some scrollable panels in the middle of some pages it wasn't obvious how to get to the end of the page (you have to scroll a fixed element to scroll the whole page) so that was not going to work for our users.
Long story short, adding a bare minimum manifest.json file to the web app (doesn't even need the scope setting) and deleting and re-adding the web app to the home screen then makes it behave as before with all pages showing in the standalone view. Adding a manifest.json to an already installed home screen app does not affect the behavior.
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 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!
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.