I'm currently working on a webpage and I'd like to implement a function to share this website to friends of the website-visitor.
Therefore I've integrated the Whatsapp-sharing URL Scheme.
<a href="whatsapp://send?text=text-to-share" data-action="share/whatsapp/share">
share-button
</a>
But there is a better way in iOS - I'd like to open the iOS-share-menue:
iOS sharing-interface
Do you know, if there is any possibility to open this?
The iOS-Amazon-App does this within the product-pages.
I'm looking forward to your answers.
best regards,
Christoph
Google has introduced the Web Share API for Web applications in Chrome. I think your problem is similar to this question. https://stackoverflow.com/a/42081215/4711785
Here is a link to a page which provides information on how this can be done and also a link to an example of this working...
(I have not copied the code from the article or the W3C source into my answer in case this is some sort of copyright violation)
https://w3c.github.io/web-share/
I have tested this on safari, chrome, and edge on IOS and macOS as of Oct 2022 and it worked perfectly...
I also tested it on the Opera browser running on a Huawei phone running their OS (not android) and again it invoked the OS'es share menu...
I fully expect this to work just as well on Windows and Android devices but I don't have any to test with...
Info and code to make it work: Web.dev article
and,
An example page you can use to test your device/browser...
open device share menu using web page button demo
Related
Really Quick question:
Why does the Brave browser have Chrome's dev-tools?
Does this also mean that I don't need to test my website in Brave if it works in Chrome?
Thanks :)
Take a look at their github page. Especially the tags they added:
Notice the word "Electron", now I could explain to you what Electron is but they have an excellent explanation on their Electron Home page:
Electron is an open source library developed by GitHub for building
cross-platform desktop applications with HTML, CSS, and JavaScript.
Electron accomplishes this by combining Chromium and Node.js into a
single runtime and apps can be packaged for Mac, Windows, and Linux.
As you can see, Electron uses "Chromium". I could explain but.... you've guessed it they offer a great explanation themselves:
The Chromium projects include Chromium and Chromium OS, the
open-source projects behind the Google Chrome browser and Google
Chrome OS, respectively. This site houses the documentation and code
related to the Chromium projects and is intended for developers
interested in learning about and contributing to the open-source
projects.
So thats why you can access the chrome dev tools inside Brave.
On to your other question:
I don't need to test in Brave if my website works in Chrome?
Yes and no, you can be fairly certain that Brave will do everything Chromium does. But in the end we can't be certain what Brave does to the pages loaded through it. Having said that I won't be giving you a firm answer on this :)
(PS: if you set up automatic testing it doesn't really matter if you have to test another browser)
I have a webapp which is running perfectly well in most browsers, but I'm still trying to work out a few bugs which is preventing it from working correctly in iOS Facebook's in-app browser. Until I've got these sorted, I'd like to provide a message to give users the option to open the link in Safari.
The solution I have for now is to use javascript to detect the browser's user agent (similar to this question), and if it's the Facebook in-app browser, provide a message that the webapp is optimised for Safari and give instructions to copy and paste the link into Safari.
My question is this: is there a way to make a <a> tag open in a particular browser? I have seen questions like this one which seem to point to using target="_system" for Cordova apps, but is there a method to do this with html only?
There isn't a way to do this for Safari (using just HTML, anyway). For other browsers that have custom URL schemes, you could do it. For example, for Chrome you could have your link point to googlechrome://www.website.com.
The definitive answer: No, this is not possible.
As Andrew M mentioned, some browsers have some methods that do some things similar, but a pure html method to open a link in a generic browser does not exist.
I have been practicing angularjs tuts from various tutorials,
I ran across a video tutorial which shows/depicts the live edit of html+angularjs in chrome browser
I am bit amazed with the feature , i am searching for the same since a day and unable to get any such feature,
Alterntatively i tried with webstrom7 which is bit buggy not working with chrome properly on frequent occasions, I know that brackets.io does implement such feature but i would be appreciating the below chrome live edit.
can anyone identify this live editor feature from the pic and suggest the best way to grab it for windows box - is the below a plugin ?
Is Batarang. a Chrome Extension!
i want to develop apps for Firefox-OS but i simply cant understand where to start from. Okay i have firefox Os simulator installed, i got my notepad open, I know html 5, css3, JS, jQuery bla bla bla...I googled but simply couldnt find the tutorial for HELLO WORLD FIREFOX OS app. any help guys. thanks
As far as "Hello World!"-type of beginner-applications concerned, I think fxosstub is as close as it gets. Also as you will most definitely want to work with some of the Open Web API-s, so I'd recommend studying Robert Nyman's Firefox OS Boilerplate App, which itself, is based on the above mentioned fxosstub application, and is a great way to learn a thing or two about the Open Web API-s and about accessing the mobile device hardware through JavaScript API calls in Firefox OS.
Those two articles mentioned both appeared on Mozilla Hacks, mozilla's developer blog, which is treasure trove of - among other things - Firefox OS related articles and resources. Another great place to start would be the Quick start guide in the Developer section of the Firefox Marketplace.
For technical reference you should check out the Mozilla Developer Network - it contains a host of very useful information about Web Applications, Web API-s and general web development, too.
For Firefox OS UI-design samples, resources & best practices you might want to check out the Mozilla Brick Library (a successor to the former Building Firefox OS website) if you want your app to blend in visually with the core applications in Firefox OS.
Also there is a pretty active community at the Mozilla webapps mailing list where you might find lots of helpful chaps, well-versed in the intricacies of Firefox OS, and would gladly help you out whenever you might find yourself stuck during development.
This took me about a minute to find. A step by step guide. More info related to app development for FF OS can be found at their official page
Edit: A video tutorial with the use of the jQuery library.
Here is a BMI calculator webapp that follow Firefox OS build-in apps (Gaia) structure and use Firefox OS build-in styles. Check the demo to see how real hosted webapp looks like on any device.
(For a web platform, you can use whatever you are familiar with, but BMI calculator is a kind of hello world type app though...)
Or here is the webapplate project, which has preconfigured webapp template for hosted or package
reuse. BMI calculator webapp is modified from that.
(Note Firefox OS build-in styles are not cross-browser friendly yet. )
I think the above answers are a bit out of date. I think the fastest/easiest way to start development is to
1) Download Firefox Developer Edition and start it up
2) From Firefox developer edition, launch the WebIDE (click on the little spanner, and choose WebIDE). From there you can create a hello world application.
For more information see the WebIDE documentation
I've got site that is correctly displayed on desktop version but has few bugs on iPad. What's the simplest way to detect problems if my OS is Windows?
Option 1 - Free, local machine debugging
You may use Safari browser for Windows (download Safari 5.1.7).
Steps
Enabling Develop menu in menu bar (Press 'Alt' key to open menu bar. Then follow to Edit menu > Preferences > Advanced tab. Find this option at the bottom.)
Then, follow through Develop menu > User Agent. Select iPad, iPhone etc.
There are more options in the Develop menu (e.g. Show Web Inspector) to help with your JavaScript etc debugging.
Credits to How to debug iPhone and iPad web applications, using Safari.
Option 2 - Paid, browser-based access to target browser/OS/machine
I've personally used http://www.browserstack.com/ and it lets you test the functionality on a wide combination. However debugging may not be as convenient here as it would be on a local machine.
There may be more companies providing similar services.
Beware of basic online emulators
As mentioned in a comment, be wary of 'emulator' websites. Example: A website I ran into claimed to emulate iPhone, with a picture of iPhone, and inside it was an iframe, being dutifully rendered by the browser I opened that website in (Firefox).
The best way I can think of(depending of your implementation) is to use the firefox plugin
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
It allows you to switch to all sort of devices and see how they would appear on another device.
Here http://www.ampercent.com/test-website-design-iphone-ipad-mobile-devices/7075/ is a quick guide on getting you started.
There are also user-agent switchers for other browsers than FF like Chrome. Do a google search and try for yourself which one you like.