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/
Related
This is an intermittent behavior with the progressive web app version of my site.
I made a website with React. Then I visited it with my iPhone 5 and saved it to my Home screen with Safari's "Add to Home Screen" feature. The behavior is different between (1) visiting the site using the home screen shortcut and (2) opening Safari and going to the page that way.
Doing (1) has the problem. If I do that and then go to the Home screen and touch the shortcut and go back to the website, the page turns all white for about 1-5 seconds, the internet connecting indicator spins and the page appears. Sometimes the page returns to the state I left it and sometimes it reloads entirely. Doing (2), the page doesn't reload at all and doesn't try to access the internet. Same with accessing the site using Chrome.
It seems to completely reload more often if more time has passed since I .
According to Chrome developer tools, a Service Worker is activated and Lighthouse gives the site a perfect PWA score.
I have questions... Why is the behavior different when accessing the page these two ways? Why is it trying to access the internet or doing anything at all every time I switch from the Home screen or another app to this app? Why is it totally reloading the page sometimes? How do I make it not do this? I want it to work offline and I want it to not attempt connect to the internet unnecessarily.
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
I have developed a web app using Angularjs. This app is intended to be used by company employees that have an iPad.
The application works great on Chrome, but Safari is causing problems. iOS Safari usually fails to execute first http request after wake up. If a user tries to navigate within the app after a wake up, the http request fails, the application shows the error to the user, then the user needs to refresh the page one or more times to get it working again.
Is there something I can do to workaround this problem other than recommend users to use Chrome instead of Safari?
EDIT: thanks to a friend that has a Mac I got the exact error message:
Failed to load resource: The network connection was lost
if I want to design an iPhone app to do this monitoring, is it possible? such as open the app and input web address, the app can call safari's function to request and render the webpage, so that i can monitor the page load event in the app. How can I achieve that?
or
create an app that monitors the time taken to load a web page by any browser on iPhone. let suppose i have button in my app on clicking the button my app will start monitoring the other apps, now if i start safari(or any browser) and try to open web page, than the time taken to load web page must be calculated by my app. is it possible to do??
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.