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
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'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"
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 ...)
There is a very useful tool built in chrome dev tool, that I have just discovered. I even don't know its name, and I am not able to find it on google. I would say it is a pixel inspector tool.
I find the following method how to use it:
1a. Inspect an html element with background color.
1b. Define background color of an element.
Click on the color picker.
Move your mouse over any element on the page (not on the dev tool)
See: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif
My questions:
What is this tool name?
How to use it easily? Most of the time I don't care the color, but I want to inspect the pixels of an icon.
Is there a hotkey of this tool?
To open the Eye Dropper simply:
Open DevTools F12
Go to Elements tab
Under Styles side bar click on any color preview box
Its main functionality is to inspect pixel color values by clicking them though with its new features you can also see your page's existing colors palette or material design palette by clicking on the two arrows icon at the bottom. It can get quite handy when designing your page.
It is just called the eyedropper tool. There is no shortcut key for it that I'm aware of. The only way you can use it now is by clicking on the color picker box in styles sidebar and then clicking on the page as you have already been doing.
Currently, the eyedropper tool is not working in my version of Chrome (as described above), though it worked for me in the past. I hear it is being updated in the latest version of Chrome.
However, I'm able to grab colors easily in Firefox.
Open page in Firefox
Hamburger Menu -> Web Developer -> Eyedropper
Drag eyedropper tool over the image... Click.
Color is copied to your clipboard, and eyedropper tool goes away.
Paste color code
In case you cannot get the eyedropper tool to work in Chrome, this is a good work around.
I also find it easier to access :-)
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