How do I create a shortcut for a HTML 5 app via chrome? - html

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.

Related

Why are my offline web-app inputs not working?

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.

How to open a local HTML file in Safari on an iPad

I'm teaching a Year7 class via Zoom on writing HTML, and I have one student on an iPad (the rest are on desktops/laptops), and they're not able to get their webpage to open in Safari (I'm using Chrome on Windows, which of course is simply a matter of double-clicking on the file). I'm trying to see what she sees, but I think Zoom is possibly not showing me the pop-up dialogues. She is using Notes to write the page (which looked to be the closest iOS equivalent to Notepad).
I Googled and sent her a few blogs, but still not working. I said she needs to click on Share and look for something like "copy path to file" or "copy link", and then paste that into the Safari address bar. She said when she did that Safari was showing the source code, not the rendered page. When she just taps the file it opens in Notes, not Safari. That made me suspect her file was actually index.html.txt (she tells me she has extensions switched on), but when I sent her my own file, which is definitely only index.html, she says the same thing is happenning.
Is anyone able to give me some definite step-by-step instructions (this is for a Year 7 student) on how to open their local HTML page in Safari?
thanks,
Donald.
Safari iPad no longer supports access to local or iCloud files. A number of iPadOS apps will however allow a user to view, edit, and test html code in files stored in local iPad, iCloud, or third party (e.g. Google or Dropbox) storage folders. One needs only to search in the App Store for “html editor” to see the list. Some of the apps have features that rival or exceed those found in tools on desktop (laptop) systems.
I had the same issue today on ios15.
There is a free app called Koder available on the App Store which will let you edit and view the HTML file. I’m no expert but the editor looks pretty fully featured at first glance.
Sorry to say but an iPad is obviously not the best place for simple HTML editing. At least not with the default apps available on iOS.
Given an existing HTML File one can use Files app to navigate to it and open it with double click. This will open the file in a very simple viewer wich is at least able to render the HTML. As a developer i bet its using WKWebView which is basically Safari's HTML View.
Turns out Microsoft Edge, unlike Safari, can still open local html files. Discovered in this answer. To wit:
Install Microsoft Edge from the App Store
Open Files (or whatever file browsing app you like).
Open the file, then tap the Share button to send to another app.
Scroll across to "More...", choose Edge, and voila!

How to display app download widget on mobile browser

I want to show app download widget on mobile browser when user visits my website on mobile devices. I'm not sure what exactly it is called so can't search for the same. Can anyone help me how to do it? Attaching an example of the same.
It's called Native App Install Prompt and google got an article about that on their page.

whatsapp html link not working on iphone 8, chrome

I have a html whatsapp link for users to share a website link via their whatsapp application.
I have used the following links to share:
<a href="https://wa.me/?text=https%3a%2f%2fwww.youtube.com" target="_blank" data-action="share/whatsapp/share">
or
https://api.whatsapp.com/send?phone=&text=https%3a%2f%2fwww.youtube.com
*Note that the shared links are already encoded
I understand that this link will automatically launch the whatsapp app if it is detected on their device, otherwise it would just redirect them to the app store.
However, I am only having an issue with chrome on iPhone 8.
The links work fine on other browsers (Safari, Firefox, Opera)
IOS, Chrome & Whatsapp are all up to date.
Even though whatsapp is installed on the device, it still redirects me to the app store.
the App store has a button which opens whatsapp, but the send shared link message window is not present. it just opens whatsapp like normal.
Is there a fix for this?
I think, as a temporary fix at least, try making the link copy to the clipboard, then give the user an alert that it has happened. I'm not sure of how to fix it, as when I tested it it worked fine, but I'm using a slightly older version of iOS. Perhaps that means the new version made some changes about how this works?
First: Official Whatsapp Sharing Documentation. Try one of the following formats...
https://api.whatsapp.com/send?text=YourShareTextHere
https://api.whatsapp.com/send?text=YourShareTextHere&phone=123
These seem to work for me!
If you are interested in watching a project that keeps track of these URLs, then check us out!: https://github.com/bradvin/social-share-urls#whatsapp

HTML 5 Offline Application, not working after disconnected internet

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