I am trying to build an offline-data persistent web application with Service Workers. I managed to have it working on my laptop Chrome (51) and it loads the cached files and displays an offline message when I simulate being offline via the Chrome DevTools - Network tab.
I uploaded the application to github to make sure it is available with https (https://mguardos.github.io/index.html)
However, when I try to test it with my Android Chrome (Nexus 5 - Android 6.0.1 - Chrome 51), the application loads fine when online, but if I set the plane mode on and reload the page, the browsers is not checking the service worker but displaying the offline message directly
"You are offline.
Your devide is offline.
Try: ...
ERR_INTERNET_DISCONNECTED"
Is there any option that I have to enabled in my Android Chrome for Service workers to work?
Thanks for any tip
PS (edited): Same issue occurs with Opera 37 on Android 6.0.1. However, the Registration service happens properly for both Chrome and Opera in the background (validated via an alert upon the registration method is successfully completed)
PSS: The link above tries to be a very basic example of combining service workers with AppCache, to retrieve localStorage and IndexedDB data so any constructive critic would be very much appreciated on top of the original question
The problem in Chrome seems to be that it requires the entry '/' to be added to the files to be cached for the Service Worker. I added that entry and I could see the application working fine while offline with my Android
However, the problem with Opera remains the same, I can even replicate it with the https://airhorner.com app
Just Open Opera (make sure you clean the cache before)
go to https://airhorner.com (the application loads fine - although it does not sound)
Activate airplane mode
Reload the page (the application still loads because it is reading from local cache)
Close the browser or simply go to a different address
Then go back to https://airhorner.com (The Offline message I added to the original question appears)
I will continue my investigation and will potential create a new question just for the Opera browser, as this question has been answered for Chrome
Related
I installed a custom progressive web app via safari and its "Add to Home Screen" option.
If I navigate to a specific page without an internet connection I get the native offline page of safari, as expected. The page shows the following message:
Safari cannot open the page because your iPhone is not connected to the Internet.
If I turn the internet connection on again, the PWA still shows the native safari offline page, giving the user no possibility to reload the page or navigate to another page.
To put in a nutshell, if I access my PWA without an internet connection once, the PWA shows native offline page of safari forever.
Is this the expected behavior of progressive web applications on iOS 12.2?
My service worker looks like this:
self.addEventListener('fetch', (evt) => {
return;
});
Even if I serve a custom offline page as described in this article, the PWA is still stuck on the offline page, if I turn on my internet connection again.
That is the expected behaviour when there is no default offline fallback page. Instead, I'd recommend creating a proper offline fallback page. There's a complete sample you can copy/paste in Create an offline fallback page.
It includes the service worker code you need, and a basic offline page that will attempt to reload the page once the network or server is back. You can see a working demo at https://basic-pwa.glitch.me/
I am working on a web page, which I want to test on my iPhone. However, when I visit the website from my phone in either Firefox or Safari it is an old version of the website that opens. I have tried to clear cache and history as described here, but it is still the old website that appears. I have also tried to de-connect my Firefox account and restart both the app and the phone. I have checked in a browser on my computer and here I see the new website and any changes implemented instantaneously.
Do anyone have similar experiences with such an issue and how to solve it?
Edit 1: After a while (couple of hours) I tried again and it was indeed the new page in the mobile browser. I still don't however understand why there is latency in a mobile browser and not elsewhere, i.e. where and why is the old page cached on a mobile device even though history and cache has been cleared?
Edit 2: I have now also discovered that the same issue applies to all other non-mobile browsers than FirefoxDeveloperEdition, so this browser must be doing something the others don't.
I faced similar issues in past. It depends upon your hosting provider. Usually it takes no time to update web pages but sometimes average hosting sucks.
Try opening webpages in incognito mode/private mode.
My problem was solved by running cache-purge from my provider's SSH service.
I am making a chrome app. It is for a kiosk type application. At times the computer will be offline when it starts up. So I'm looking to make an application that a user can navigate to a website and then the entire website is cached. Then when they turn on the Chromebox/Chromebook the website will come up as it was. Including JS/CSS/dynamically loaded content.
Overall I'm looking to save the state of the entire webview and have it keep going after the machine reboots. I looked into saving the JS/CSS/HTML but then the dynamically loaded content (ajax calls) is not available. Is there a higher level function for saving the ENTIRE state of the webview in a google chrome app?
Zebradog's Kiosk Chrome App recently added "Serve local content" support. It works by using Web Server for Chrome in the background. It loads the content in a webview. You may not want a whole kiosk app, but this could at least be a starting point for you to use as reference.
One way of actually getting all the files, if you don't have them already, would be to use wget -r -k
I've setup a Captive Portal with dd-wrt, wifidog, authpuppy and some plugins from authpuppy as well as my own web app.
I am wondering what's the exact thing that will trigger a
browser on the client device to popup?
Is the popup browser from iPhone/iPad a regular browser mode?
It seems some JavaScript will fail on the browser mode, like the shake.js,
event though iOS Safari version is > 4.2.1 from https://github.com/alexgibson/shake.js/
P.S.:
I've done the research like
http://en.wikipedia.org/wiki/Captive_portal
https://personaltelco.net/wiki/CaptivePortal
they don't talk much about the popup browser.
Could anyone help?
If you will try to see the network statistics [request/response] you will find out that devices like ios and android both of them continuously hits some particular urls [in case of android it is www.google.com/generate_204 , don't remember exact url for ios]. These url are generated by system internally. These pings let their server know about various details. So as soon as ios gets connected with a captive portal it tries to hit the system generated url, failing to which it understands that this is packet level protected network and open the browser.
Hope this helps.
I'm developing a small HTML5 web application for iPad that is intended to work in fullscreen mode (ie. it has the proprietary Apple meta tag, it is added to Home Screen):
<meta name="apple-mobile-web-app-capable" content="yes" />
The application basically fetches some data via AJAX and presents it to the user. The AJAX data are external (from a different domain, different server). I have the system setup for cross-origin requests, they work in online mode. In other words: the static data lie on server A, the dynamic data - on server B.
I created a proper cache manifest file, listing all static content of the site (HTML, CSS, images, JS) and then having the NETWORK: * section at the end - this way all the dynamic content (AJAX) is always retrieved from the network. The application fails "gracefully" if the requests fail, by displaying some fake content.
With the above setup, the following happens:
If I run the application while online, everything works ;)
If I disable the WiFi on iPad (pure offline mode), everything works as expected - the application falls back to the offline content
If I connect to the network again, but take the static-content server offline (the one that has everything cached), the application won't start; after spending a while in splash-screen, it shows me the a popup with <app> could not be opened because it could not connect to the server.; I can either choose Close or Retry.
The point 3 of the above is the one that drives me crazy because it was the only reason I started fiddling with application cache. Why doesn't the iPad web app fall back to cached content if the manifest file is not reachable? (not 404, the server is offline)
Is the answer to HTML5 iphone offline webapp completely incorrect? If not, how can I achieve this behavior on iPad?
Point 2 and 3 are completely different scenarios, so we cannot expect the same behavior.
In point 3, the device cannot fall back to the cached content when in online mode because if it do so, there will be no way to know for the user whether he is connected to the server or not.
I mean, in offline mode, the user knows it, and knows that he is with cached data. But in online mode, he expects to get the stuff from the server. If the server is not available, the user should be aware of this. If the server is not available and he is sent directly to cached data, the server error will be hidden to him, thinking that he is connected when he is actually not.
For example, web browsers can cache pages to be seen in offline mode. But if we are in online mode and try to open an unavailable page, we expect to see the error message, not a cached version of the page without any warning. We can go to offline mode to see the cached page if we want, but the correct behavior is to show the error to the user.