I've set a website up as a PWA. When browsing with Android Chrome I am prompted to add a shortcut to the home screen which I do. When I launch from the shortcut I see a screen like this with a X and site information, as well as a menu of Chrome options:
View after launching PWA from shortcut
When I click on the cross a blank white screen is displayed like this:
Blank white screen after clicking cross
The manifest.json includes:
"start_url": "/default.aspx",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#428BCA",
"background_color": "#428BCA"
If I remove the shortcut, clear the browser cache and reinstall when prompted again the behaviour is unpredictable. Sometimes what I have described above happens but on other occasions a shortcut is created which launches standalone and without the X and site information bar.
I have 3 questions.
1) Why does tapping the X result in a blank white screen being displayed?
2) Why does adding a shortcut (to the same PWA) sometimes result in a standalone launcher and sometimes one which adds the X and site information above the PWA screen?
3) Is it possible to see the url which the shortcut on the home screen is using? When the PWA launches with the X and site information bar it is not possible to grab the url as far as I can tell.
Thanks
Brian
I'll answer to your question number 3:
You can programmatically check the url from JavaScript by accessing the document.location property. For debugging purposes you can eg. write that to the screen or log it to your server or whatnot. Also, if you're able to access your web server's logs, just open your web app from the home screen and watch the logs at the same time.
3) Is it possible to see the url which the shortcut on the home screen is using? When the PWA launches with the X and site information bar it is not possible to grab the url as far as I can tell.
You can try to use this: "start_url": "/default.aspx?utm_source=homescreen"
Related
I'm not sure if this is the right location to ask...
I am frequently using Chrome DevTools for debugging. Now I saw that there was a new tab "Lighthouse" and I started to generate a report.
It turned my Webpage into a mobile view. When I close DevTools it resets but every time I restart my Chrome DevTools it automatically turns the Webpage into mobile view.
How do I stop this lighthouse report while still using DevTools?
Although this is about using software (so should probably be on superuser.com) it is an easy one to answer so I will answer then vote to close the question.
In the very top left of the developer tools window you will see two icons. The second icon is for mobile emulation, the one located right next to the "Elements" tab.
On your screen this will be blue as you have it activated, simply click this to remove mobile device emulation.
On Lighthouse itself if you want to test the Desktop version of the site you will see some options before you run the report, you will see "Device" and two radio buttons, just change it to "Desktop"
I am using Android Emulator (LDPlayer 4.0.23).
The "Show Taps" option from Developer Options (Setting-> Developer Options-> Show Taps), doesn't work. It's activated/ON.
Normally when it's activated you will see simple transparent circle when you tap your screen. But it doesn't show in LDPlayer.
Anyone know how to make it work? Or is there any other apps that can be use as replacement?
FYI, I want to create some video tutorial, thus I need to show where I taps on it.
you can try [NoxPlayer] (also an Android Emulator)to show taps and meet your needs. Here is a guide:
First, click Setting in the tool
Second, click About tablet and slide the page to find the Build Number
2
Third, Tap the Build Number 7 times to open the developer option
Fourth, Open the developer option, and then open the Show Touch
I need a way to highlight the icon of Desktop PWA in windows toolbar.
This feature is available in hangout when any new message arrives, the colour changes of hangout icon. Also google chrome is changing the colour of chrome icon in toolbar when it completes the downloading.
Tried below code, but chrome.app.window is going undefined
var appWindow = chrome.app.window.current();
appWindow.drawAttention();
(reference link:-StackOverflow)
Tried below code as well, but chrome.windows going undefined
chrome.windows.update(windowId, {drawAttention: true});
windowId will be -2 for current window
(reference link:-StackOverflow)
Did reading about manifest.json on:
https://developer.mozilla.org/en-US/docs/Web/Manifest
and
https://developers.google.com/web/fundamentals/web-app-manifest/
but did not find anything for highlighting the icon.
Need this feature for only chrome browser for version 68 and above
The reason - I made a Progressive web app, opened in the browser - all is fine and browser offered me to add it to home screen.
Now, I want to demonstrate this on a presentation, and so - removed the icon from home screen. But for the last whole day I've been playing with the website in chrome a lot, and the banner never appears back.
Is it really a once-in-a-lifetime thing? Or is there something specific I need to do?
The app-install banner prompt is normally presented after you've visited the site at least twice with at least 5 minutes between each visit. Using a Chrome flag, you can bypass these checks so that the banner always appears on every visit:
Open Android Chrome.
Go to chrome://flags/#bypass-app-banner-engagement-checks
Click Enable
Click Relaunch Now
You can also simulate an Add To Homescreen event from Chrome DevTools:
Open Android Chrome on your phone, and navigate to a PWA (e.g., the Paper Planes app from https://paperplanes.world).
Connect to your Android with a USB cable.
From desktop Chrome DevTools, select Menu > More Tools > Remote Devices. OR CTRLSHIFTP (or CMDSHIFTP for macOS), and enter "Remote devices".
Select your phone by name.
Click the Inspect button next to the list item corresponding to your PWA (e.g., Paper Planes).
In the new DevTools pop-up for your PWA, go to the Application panel, and click Add to homescreen. This should cause the app-install banner to appear in Android Chrome. Note the banner won't appear in the Chrome DevTools screen mirror.
(steps above verified with Chrome 55 on macOS Sierra, and Android Chrome 57)
I found another solution - when I go to the settings of chrome mobile and choose History -> Clear browsing data (make sure that the option to clear Cookies is ticked) then click the Clear Data button - after that I get again the app install banner to add the app to the home screen.
Apparently - it clears not only the data itself, but also makes the browser forget everything about this website.
(Strangely - the old icon doesn't go away ... so now I have a few icons on the home screen :D ...)
In Chrome (version 32.0.1677.0 canary Aura), I can't find the overrides tab/page in the Developer Tools settings. (It used to be placed between the "General" and "Workspace" tabs. Did they move it, or did I forget to enable something?
Hit Esc to open the console drawer, then you can open the Sensors tab via the drawer menu on the left.
Sensors provides geolocation and accelerometer settings.
Additionally, the newer Device Mode captures the basics of mobile device emulation.
Seems like the "Emulation" button only is available from Console, when Console is opened from one of the other tool tabs. Ex. "Source" or "Elements".
Go to "Elements" , click on the "Show console" icon. The "console drawer" will open in bottom part of the window with Console, Search, Emulation tabs. If this is a bug or not is hard to say.
This thread is quite old and everything is now changed with the new "device mode". You cannot use any of this anymore.
As stated here by #paul-irish (from the Chrome DevTools team) on twitter :
one should just activate the device mode, and then use the shift key + drag the mouse around to emulate pinch zoom, with no particular setup.
this pinch to zoom emulation doesn't seem to work very good with JS libs like Hammer.
For now, it is better to test pinch to zoom on actual devices, or with http://browserstack.com