Vue favicon doesn't change in ios chrome & safari browser - vue.js

I alredy change the favicon.ico to the logo file which I want to use In Vue-cli's public folder, and named it the same file name.
In web browser the Favicon and title be changed successful
but in the mobile browser neither safari or chrome are fail
I didn't use pwa so probably not have manifest.json problem
And I already tried to clean both browser's cache or open it on Incognito Windows, but still the same, is anything I neglect to do with my index.html or vue-cli config?

You can add <link rel="apple-touch-icon" href="/custom_icon.png"> so that your favicon is shown when you favorite the page or view it in that tabs view. This is mentioned here.
For the webpage itself its very likely your iPhone is still caching the old icon regardless of your attempts to clear said cache. In my experience trying to load the page with no network connection, waiting for the time out error and then connecting to the network and reloading the page is the best way to "force" the device to clear its cache. Alternatively with the dev tools open and a keyboard attached type command + option + r. If not, patience, it'll update... eventually.

Related

Why does my Vue Spa not work in mobile offline mode?

i run into a (at least for me) strange issue with vue.
I created an SPA without any remote content. Just a .html file, some css and vue to "jump" between content divs.
The SPA was created for mobile devices.
When i visit the page with internet connection everything works fine.
Now is "add the page to homescreen".
When i open the "app" (homescreen page) without internet connection the click event does no longer work.
When i open the "app" with internet connection, again everything does work as expected.
Does anyone have a clue what's wrong in here?
UPDATE:
The issue seems to appear only on tablet. I have tried on a smartphone and the app does work even in offline Mode.
Maybe relevant:
Tablet: Nexus 7
OS: Android 6.0.1
Browser: Chrome 75.0.3770.67
SOLVED
The issue was, that the JS Code was not stored when adding the Page to the Homescreen. I have added a service worker to cache the assets. Now everything works like a charme :)

How to preview a static site?

With Ruby on Rails I can run rails s -p 3000 and preview my site at localhost:3000.
With React I can run npm start and view the site at localhost:8080.
What if I just have html and CSS files, how do I preview that?
On OSX, you can run a simple web server from any directory using this command:
python -m SimpleHTTPServer 8000
Then, you can hit the directory in your browser by going to http://localhost:8000/path/to/file.html
You can try click 2 times in index.html to open the file in browser.
Every time you update the code in sublime text, you need to reload the browser and the updates will be aplied.
This usually depends on your device/OS and what your eventual goals are, but usually you can either use (online) software that renders the HTML and the CSS for you (such as Brackets.io, etc.) whilst you are typing it (to live preview any modifications/additions), or you can put the documents live using a local webserver such as Xampp or OSXs built in simple web server, and check their respective localhost locations every time you save changes using your code editor.
You could also simply use online applications like Codepen, which can also render HTML and CSS, and even JavaScript. Codepen just today launched Codepen Projects which allows you to create entire website projects at their website. It is however, a pro (paid) feature.
Here's a short overview of code playgrounds that offer the functionality you requested (by no means an exhaustive list):
JSFiddle
CSSDeck
CodePen
JSBin
And ofcourse you can insert Snippets here on StackOverflow, which is also able to render HTML and CSS (and JS).
If you really only use HTML and CSS, previewing in a browser is also possible, opening the .html file by double clicking and opening in Internet Explorer, Chrome, etc.

Chrome dev tools site gets stuck in mobile view when exiting emulation mode

When using chrome dev tools to emulate mobile devices, sometimes when toggling emulation from mobile back to desktop the user agent spoofing gets stuck in mobile. I've tried hard cache reset, closing browser completely, restore to default.... but anything I do the site still renders in mobile (even when emulation is turned off).
This happens in Canary, beta, and regular Chrome.
Also a note i've only seen this happen in Sharepoint.
Anyone know how to resolve? Nothing seems to get the dev tools to change user agent back to default when exiting emulation.
Have you tried deleting your chrome settings?
Windows: C:/Users/%username%/AppData/Local/Google/Chrome/User Data
Mac OSX: ~/Library/Application Support/Google/Chrome/
Ubuntu: ~/.config/chromium/
Also make sure you aren't ZOOMED! Gets ya everytime
I ran into this same problem previously when using dev tools in Chrome to look at mobile resolutions that got me permanently stuck in mobile for SharePoint only. I solved it originally with the recommendation above of deleting my Chrome settings folder, however, that meant I had to sign in again, sync my extensions, etc.
After forgetting that this would happen again, I ran into the same issue, but this time I discovered that if you append the following to your SharePoint URL it will reset this back to non-mobile. I verified that it is not temporary as I have closed my browser, reopened, visited SharePoint, and it still loads in desktop mode.
/?mobile=0
So, you would use your site url, e.g. https://siteurl/?mobile=0
Weird, this just started happening to me. It persists in new tabs and new windows. Only fix is to open DevTools and switch to Responsive mode and then pull it way out. As soon as I turn off Responsive / Mobile view, Chrome snaps right back to a mobile view by default (appears to be iPad size).
The solution for me (so far) was to quit Chrome and open it back up.

Why Firefox 33 shows "is not fully secured" on the first load?

I am trying to setup my HTTPs website with Apache 2.2 and Firefox 33.
On the first load Firefox shows that warning.
But on the next page load (i.e. F5, another tab, etc until firefox restarts) everything on this URL is secure.
The page is just plain HTML, no javascripts, no images. I put robots.txt and favicon.ico into the /var/www/site/htdocs/ (I thought firefox loads them from http:// instead of https://). But this did not helped.
So, why firefox shows this warning on the first view after launch and don't does that later?
(I tried to ask this question on server fault, but don't have enough reputation to upload pictures)
UPD: Tools -> Web Development -> WebConsole says
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mc.yandex.ru/webvisor/26570853?rn=493111185&page-url=http%3A%2F%2Fstart.calculate-linux.ru%2F&wmode=0&wv-type=0&wv-hit=372504783&wv-part=1&wv-check=34794&browser-info=z%3A240%3Ai%3A20141022210348%3Arqnl%3A1%3Ast%3A1413997437. This can be fixed by moving the resource to the same domain or enabling CORS. 26570853
Everything becomes ok, when I set about:blank as homepage.
But the question remains - how (in this scenario) scripts from previous page can affect next page?

IE 10 not using AppCache after browser closed

I wrote an application using the HTML5 Cache Manifest and I'm having a problem using it in IE 10.
I used Fiddler to witness the manifest file being downloaded and all resources fetched on the initial load of the application. If I disable my network adapter to force the machine offline, the application continues to work as expected as long as I don't close the browser window.
However, when I close the browser window, then attempt to re-open the page from a favorite, IE 10 tells me "You're not connected to a network". Obviously I know that, I'm trying to use the app offline. These exact steps work in Chrome.
Is this behavior by design? Is there a workaround? I can't test with IE 11 right now...is this different in IE 11?
Hearing of some issues of the appcache clearing if your company utilizes gpo settings and has "empty temporary internet files folder when browser is closed" enabled.
Did you find the answer to this? I have the same problem. I did get a bit further though. I found that if you go to the IE10 File menu option and tick Work Offline then try and access your cached app it loads the page but I still have an issue as it does not appear to be using the javascript file that should also be cached. All works ok on Google Chrome but our clients are restricted to IE so Chrome is not an option.