I want my PWA to periodically update itself while it is running, not waiting for the user to refresh the page (e.g. on iOS 12 it is actually quite hard to trigger page reload of a PWA).
I know there is ServiceWorkerRegistration.update() method, but it's not supported by Safari.
So, are there any workarounds to get my ServiceWorker to self-update without page reload on iOS?
Additional information:
Currently I periodically poll version.json file in which I put current app's version, compare it, and force a page reload. It works fine, but it requires two page reload to get the new version (this + after the activated event to load the new app's assets).
Here's my current solution, if you need more context: https://github.com/dimaip/calendar/blob/master/app/serviceWorker.js#L31
ServiceWorkerRegistration.update() is supported by all browsers that support service workers, and should accomplish what you want.
If you wanted to confirm for yourself that it's actually supported in Safari, try running
reg = await navigator.serviceWorker.ready
reg.update()
in Safari's JS console, with the Network panel open. You should see a request made for your service worker after you run that.
Related
I am developing an app that uses Server Sent Events (SSE - basically one-way websockets). If the user uses the site on their mobile chrome browser and then tabs out for about a minute, the SSE connection breaks. If the user then tabs back into the site, it doesn't refresh the page (this is good). But I still need to re-establish the SSE connection so that the server can resume sending messages to them without a refresh.
I'm trying to debug my implementation but having to do it on mobile is very tedious. I have to grab my phone, refresh the page, then tab out, wait 1 minute (so the connection can break), and then tab back in to determine if my code for re-establishing the connection worked properly.
I would much rather be able to debug this on desktop, but I haven't found a way. I have tried the following:
Tried 5 different Chrome extensions for sleeping a tab. Unfortunately, when you navigate back into the tab it just refreshes the page rather than resumes it.
Tried using USB Debugging, but the desktop keeps the tab open at all times even if you tab out on mobile, so the tab never sleeps.
Tried running debugger; in the Chrome Developer Tools console, but even if I let the Javascript sit with its execution frozen for 5+ minutes, it never breaks the SSE connection, so I can't test if reconnecting works.
Tried using an extension to kill the internet for Chrome, but miraculously, this still maintains the active websocket/SSE connections. Apparently Google engineers have deprioritized this effort?
Basically, I am looking to simulate the behavior that happens on mobile when you tab out of your web browser, wait a minute, and then tab back in (the Javascript execution is frozen, the SSE connection is broken after a minute or so, and then tabbing back in resumes Javascript and attempts to reconnect the SSE connection).
Is this possible?
I think that best change you have by emulating your android device. You can do so by installing android studio from https://developer.android.com/studio and then here you have all you need to start and manage your virtual android env https://developer.android.com/studio/run/managing-avds
This it the way I debug my whole mobile development
The most obvious solution to me would be to attach a listener that tracks the events related to tab activation and build some custom solution upon that.
Simply:
window.onfocus = () => {
// Restore SSE session
};
window.onblur = function () {
// Inactive
};
Just for info, SSE is a different protocol from websockets.
In case you are interested in using websockets implementation, I suggest the following library which works very well in my experience: https://www.npmjs.com/package/#stomp/stompjs
Stomp is an abstraction over the websocket protocol, but it also means you would need to implement this on the server side as well.
You can use the chrome://discards to freeze your tab.
You should close and restore the connection based on the Page LifeCycle events.
You Can Try to use pause execution
goto:
Chrome javascript console (Ctrl+Shift+J) > sources > pause script (press f8)
This simulates like a mobile tab switching so you can debug easily
I think this is the simple and easy solution. thanks
I currently have a PWA built using the Vue CLI - this uses the workbox-webpack-plugin under the hood. More info here.
My app update process was quite simple, and worked until about a week ago. I wrote a 'Service Worker Manager' - a global object that handled the service worker state changes. When the updated event fired, I would pop up a dialog asking the user to update. If they agreed, I would fire off a standard looking window.location.reload(true) and the new service worker would be installed and running.
Recently, window.location.reload(true) does not appear to force reload the page in Chrome (v79, desktop and mobile) or Safari (mobile, not sure which version). It does work as intended in Firefox.
Is there some alternative method for forcing a reload or otherwise updating a PWA in Chrome or Safari? The only 'user friendly' method I have at the moment is asking them to close the app, clear it from recent apps, and open it again. Not ideal at all.
Thanks!
i have self-hosted ASP.NET web service and small HTML5 application that communicates with that service
when i try open this page in IE, browser show me notification that it has blocked ActiveX components and scripts. allowing browser to execute dynamic components, HTML/JS code working fine - queries reaches web-service, it generate needed data, send data that page needs
but when i open page in another browsers (Chrome, FF, etc), page does not reacts to the any data that server sends as callback. queries reaches web-service but all communication with page and host is stopping
all JS-libraries that i connect to page: 'jquery-2.1.0.min' and my own 'common.js'
so, how i can determine, what element is not working correctly in not-IE?
Here are some things you can try to avoid these kinds of issues:
Use jQuery 1.11.1 instead of jQuery 2.1.0 to improve compatibility between browsers.
In Chrome, right click anywhere on the page and select Inspect element. You should see a debug window open at the bottom half of the page. Navigate to the Console tab in this window to see any JavaScript errors.
In Firefox, install the Firebug add-in and use that to debug.
Make sure that you are not using any ActiveX. That is only compatible with IE.
You can use sites such as browsershots.org to test browser compatibility
Don't use browser / platform specific technologies such as Flash, Silverlight etc.
I'm wondering if anyone has run into new problems with using the HTML5 application cache in Mobile Safari on iOS 5 devices? I had previously written an offline web app that worked well in iOS 4, but as devices that use this app are being moved over to iOS 5, I am discovering problems when devices are offline and attempting to access what should be cached resources.
I can confirm that the application caching procedure is working as expected, as I can track the hits to my webserver as resources are downloaded while the device is online.
The problem manifests itself in the form of the "Cannot Open Page: Safari cannot open the page because it is not connected to the Internet" dialog box when I attempt to follow a link to a page that should be cached while I am offline.
Interestingly, around the same time this error pops up, in the Debug Console one also gets the "JavaScript execution exceeded timeout" error, similar to what is mentioned in this thread. I'm not doing any computation nearly as complicated as what was posted there, but the suggestion to kill and restart Safari seems to fix both problems, at least for now.
So maybe this question is less a request for help and more of a landing place for future searchers to share their experiences.
Please check if you have added the cached page itself into the manifest file, in below example they are HTMLPage1.htm & HTMLPage2.htm. I have the same problem but it works after adding the cached page link.
CACHE MANIFEST
CACHE:
images/cover.png
HTMLPage1.htm
HTMLPage2.htm
NETWORK:
*
What does the browser do when a web page is going to be closed?
How does it deal with the loaded components(css js flash etc.). What is going to be cached?
Caching is decided as items are loaded, not when they are disposed - so an item will be in the cache before the page is unloaded.
When you navigate away from a page, the browser will call the events:
onbeforeunload (custom implementation started by Microsoft)
And then
onunload (all browsers)
It will then attempt to end any processes in use on the page, such as flash videos. Different browsers handle this in different ways as for some browsers the flash plugin runs under the same process as the browser and in others they run it under its own process.
I'm not exactly sure if this is what you're asking due to the grammar of the question, but if you are asking how to run some code when a web page is being closed or navigated away from in a browser, you can either bind to the JavaScript window.onunload event, or window.onbeforeunload if you want to possibly cancel the event.
See some documentation for onunload or onbeforeunload (the latter not being supported by all browsers).