How can i create a html 5 page that still works even if internet being disconnected and user press REFRESH (F5) on the browser.
I am referring to this http://html5demos.com/offline page,
it will show Offline when i disconnected my internet, but when i press refresh on browser, it is not working anymore and show page not found.
I want my page to work 100% offline even if user press refresh on browser.
If you want to create an 'offline' HTML5 web application, for example by using androids webview, i would suggest using something like phonegap this will allow you to create web applications while not necessarily being connected to the internet. As far as the html5demos go... im not sure what you are trying to get at...
-hope this helps
Related
I have a simple app deployed in GitHub pages (my web-app). The app has some inputs and I tried to use it offline on my Android phone, by clicking the download button on Chrome, which downloads the HTML; but all the inputs and buttons are disabled.
If I click the file that was downloaded in 'Files' and try to open it on Chrome or Brave, all the inputs appear to be disabled, but when I refresh (or enter online mode again), they return to be available.
Is there a work around to this?. I want to build an offline web-app, but it seems that forms can't be incorporated.
I tried to test this error in dev tools using my computer, since there is an option to emulate being disconnected from the internet. But the doesn't go very far, since the website only appears with 'No internet' and not really with the offline view that I get from my cellphone.
Problem:
Web page with sms: and mailto: links fail on ios mobile safari browser. A click on the link redirects you to:
Safari cannot open the page because it cannot redirect to locations
starting with "sms:"
or
Safari cannot open the page because it cannot redirect to locations
starting with "mailto:"
These used to work just fine up until around two or three months ago. Now these fail on Apple mobile devices using the Safari browser.
Background:
I create responsive web pages for activity based teams. One of the things we do is provide a team roster. The roster includes links for telephone numbers, SMS text pages and Email.
To keep things simple, we are using simple web pages.
Because of security and privacy concerns, this content is only served via ajax call via node.js server after login. We're using a single node.js Express server to host the website content and manage http/api calls.
Generally a click on the link pushes the mobile device into the appropriate native app for a phone call, SMS text message or email.
This has been working great for a couple of years, on all devices.
Lately we're seeing the problem on iPhones... but...
Here's the really weird part. I've got three teams using this technique.. The failure is only on TWO of the three teams. SMS link works just fine there.
The "tel:" link works fine on all devices.
The failures only occur on two of the three sites for sms: and mailto: on the iphone. Things still work just fine on Android devices, on Windows and on MacOS. The problem is Apple mobile devices.
The two sites that have the failures are Progressive Web Apps, with a manifest.json file and service_worker.js. The site that works fine has neither of those. When I remove the manifest, and turn off the service worker there is no improvement.
All three sites hosted via App engine at Google Cloud. The two sites that fail are only using web_app.appspot.com addressing. The site that functions well is using a real URL, pointing to the app engine location.
Typical Code:
<li>
<div class="userName">Jane Doe</div>
<div class="phoneNumber">321-555-1234</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
I wonder if this will show the issue, if you open this up in the browser of your Apple mobile device:
Click here to create a SMS message.
<br>
Click here to create an email message.
Apparently that's a fail. You don't even get to see the run snippet button on my mobile device.
Testing, more testing...
I just figured out... if I save the site to my mobile device homepage, such that an icon is added to home screen and in display mode, you can NOT see the top URL address bar, nor the Safari options bar on the bottom then the SMS: will fail. If you just open the address in Safari, but don't save the file, then it will work great.
Again, when I'm in Apple Web Application mode, the SMS link fails.
One hack... open the site via Safari mobile browser on the iphone. Save the site to Home Page. Verify the Icon is on the mobile phone. Go to Settings --> Safari --> Advanced --> Website Data, then Delete the site by sliding the content left. Cache storage is clean, but the Icon remains on the mobile screen. Use the Icon to aid in login, but don't save the site again. Note the URL line is visible. SMS will work.
Still testing here...
I tried to build a simple example to show the issue. I was totally unable to get the sample to fail with the error messages above. For reference the test site is here. The test source code is here.
I'm suspecting that the issue revolves around the fact that the two sites in question are both located at a subdomain site. (mywebapp.appspot.com) When the manifest includes all "valid" content the site does appear as a ios Apple Web app without visible URL line... but whenever I'm in that mode, SMS links are a total fail.
With that said, you can control the storage mode via <meta name="apple-mobile-web-app-capable" content="yes"> .
During my testing, I also noticed that whenever the manifest.json file contains // comment marks anywhere the file is ignored by Safari. Normally // comments are not allowed in a .json file, but according the MSN source, they are fine in a manifest.json file.
The choice is
a bit ugly and functional, or
pretty and non-functional
Currently I'm running <meta name="apple-mobile-web-app-capable" content="no">... I get the advantage of a custom icon on the home screen, even though the web app is still obviously inside a mobile browser with top/bottom info lines visible, sigh.
So I have a website with functional redirects to both the Google play store and the itunes store. Using the WeChat messaging application I can open an in-app browser to view the webpage and do everything I normally would.
The problem surfaces when using WeChat on an iPhone. I can see both links and click on either of them, but the itunes link does redirect as desired. Keep in mind that this is not a problem on Android, both links redirect properly inside the app on my Android phone.
The goal is to have the button open up the actual itunes store app, and not link to the itunes webpage but even using itms itms-apps the connection doesn't go through. On said iPhone in Safari and Chrome, these buttons link properly. It is only in WeChat that the itunes redirect button does not work.
I've tried adding an additional page that the button redirects to, which is
<meta http-equiv="refresh" content="0; URL='http://itunes.apple.com/us/app/myapp/myappid'" /> but it just loads the blank the page and freezes because of the failure to redirect. In fact, simply trying to load http://itunes.apple.com in the app results in failure.
Perusing StackOverflow I found this post about linking to the app-store but none of the answers really helped.
So I'm hoping some one has some idea of what to do or has some experience with a workaround for a situation like this since WeChat is integral to my app's performance.
Update:
I still haven't found a solution to my problem, but I've managed to get a lead. The only link to iTunes that works in any way is http://mzstatic.com, but the problem is that I can't seem to find the proper parameters to link to an app. Everything that I've seen online seems to show using the link to grab images.
check this issue
Guiding your user to scan QR code , you can generate your QR code by using this service , adding your appsto url to the QR code (open App Store , find your app , click share , click copy link , you can get your app redirect url offered by Apple);
Register your mobile application on Tencent's Application Treasure,click the Micro Download to apply for you app , add your app store url to generate your Micro Download url which will redirect to app store , the offical document are here mobile application access
so , have a try , hope it helps.
I have this site http://consyn.com/ in Joomla 2.5
I am having big trouble figuring out that why this site is too slow to load in Firefox, everytime browser hangs for 2 or seconds then loads it.
It loads normally in Google Chrome.
I have tried disabling Maps on the homepage but it has no affect.
Can someone suggest me what can i do?
As i analyze your problem in Firefox each and every website before the load not apply the style(css,js etc..)
but the other browser applied it that's why this website hang in Firefox but not other at starting time.
As you mention in your Question in chrome this website not load but after some time its also load in my computer.
As a solution in your Joomla 2.5 anywhere you search
QuotaService.RecordEvent
named javascript file are there and that is the problem,this file always send to request to something get,actually that which type of data always want that i can't locate but you search this file and check your code and change it.
I have a HTML 5 app which works with offline storage. It only needs to work in Chrome at the moment. I want the user to be able to access the app both online and offline. At the moment I am asking the user to bookmark the page to come back to it when offline.
I would like to have a link: "Click here to create a desktop shortcut". Does anybody know if this is possible?
Thanks in advance.
I encourage you to get your app in the Chrome Web Store and it will be installed to the users Chrome. Any app that is created to work offline will work offline regardless of it having a desktop icon or not.
If the user is on Windows they can also create an application shortcut that will be placed on to the desktop.