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 :)
Related
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.
My ruby on rails website does not load on safari 15. It works fine on older versions as well as other browsers. The below is what I see in Safari 15
There is nothing in the console logs or any indication of what the "problem" is. Interestingly this is also an issue for my site if I run it locally on localhost:3000 which leads me to think it's an issue with something in my sites code.
If I disable Javascript the site will then load, what in my Javascript could cause this?
I have a similiar problem with my matured React app. Some users of my web application are using Safari 15 and they report that some fragments of the application are not loaded.
I also got screenshots from them. There is nothing indicated in the console.
But interesstingly all the HTML canvas elements are not rendered. Even the small ones.
Some examples:
Leaflet map in canvas (map tiles somehow not rendered):
A chart in a canvas (chart stays blank):
I mean it is working in every other browser since years and also Safari 14 and Safari on iOs.
Must be something Safari 15 realted.
For me this ended up being an issue with Three.js, I needed to upgrade it's version then the site worked in safari. If you're not using Three.js, then I'd recommend checking the other JavaScript packages you are using.
I have an aging PWA that uses App Cache for an offline mode. Today, when I browse with safari 14, my App Cache manifest never loads. In the Network tab of web inspector, it just sits there with the spinner spinning forever. If I request the url directly in a new tab, it loads no problem. CanIUse says safari still supports App Cache, and this was working at one time. An old Iphone 5s with Safari 10.3.3 still works fine. Does anyone have any tips?
This is my manifest declaration...
<html manifest="static.manifest">
I have 2 webapplications build in vue. One application is some sort of wrapper for all the applications a company has and it loads several projects via an iframe (And one of them is the other web-application build in vue).
Both projects have the vue-pwa plugin installed.
When opening the wrapper project in the safari browser on a mac and browsing to the iframe with the other vue application the screen is blank and i'm seeing that there are an unlimited count of console.logs: Service worker has been registered. from the register hook in the registerServiceWorker.js
The moment i open the contents of that iframe in a seccond tab of safari, these console.logs stop and the page is normally loaded and functioning.
Does anyone have an idea for a solution, or how to debug what the issue is?
The issue was that i needed to set the header X-Frame-Options: ALLOW-FROM https://example.com/
Weird thing is that the code was executed, it was just not visible. And other browsers don't seem to bother that since there was no X-Frame-Options that blocked it.
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.