I'm trying to build mobile web applications using p5js, and I want to host them on my personal website. In particular I want to use the phone's gyroscope sensors to influence parts of my sketch. However I find that the sensors don't return anything useful when testing on my own site. Please can anyone find the solution, or else advise me how to troubleshoot?
Some details
My website is hosted on github pages (link to repo)
My phone is an Oppo A9 2020
Android version 11
I'm testing these websites in android chrome
Example 1:
I've got this sketch called GyroscopeTest. The program hosted on the p5.js web editor works just fine (the device orientation values are updated). However the same program hosted on my personal website doesn't update the values properly.
Hosted on p5.js web editor
Hosted on my website
Example 2:
This is a simpler example. Here's someone's example of using the gyroscope sensors on their website, which works fine on my mobile. I copied the html and javascript sketch over to my own website (removing a few lines of html that were causing minor problems). And on my website it doesn't work.
Hosted on someone's website
Hosted on my website
After more digging I found that the issue was because my website was served with http, not https, which has extra security stuff!
Clearly these other websites were served with https, which is why the sketches wored o nthose sites and no my own.
Because I had not enabled https, chrome deemed the website unsecure, and thus did not allow the website access to the phone's sensors. Changing the site to https also allowed other sketches to access the phone's camera.
Related
Chrome desktop application for web based product. Is this possible in chrome web apps
Product has following items
Angular JS --- Front-end framework
Rails --- JSon Communication
I have created the chrome desktop apps, which will directly open the site with icon. It's more feel like desktop application. In any OS it will run. The thing is working fine.
Problem:
It will always download the js and css files.
How i want to develop the chrome desktop apps
When launching the chrome desktop app, save all the assets locally.
Whenever chrome desktop app launched, it should refer the locally saved assets (I mean angular js files and css)
Before launching the chrome desktop app, it should request the server whether the assets are changed or not. If changed delete the locally saved files and save the latest one.
If assets are not changed use the old assets files. In this way, we can avoid the initial loading of all the files from the server.
Anybody did it previously or chrome provide any options for this?
Ideas are welcome!
Its totaly possible.
Read these docs: https://developer.chrome.com/apps/offline_apps
By myself i pack the css and javascript into the chrome app so you never have to download them on startup. But in your context its more like a webview app with caching functions.
You can use indexeddb or other local storage APIs to store assets in the client computer.
You can solve this on the web app side by employing ApplicationCache, which specifically fits what you describe.
Using the cache interface gives your application three advantages:
Offline browsing - users can navigate your full site when they're offline
Speed - resources come straight from disk, no trip to the network.
Resilience - if your site goes down for "maintenance" (as in, someone accidentally breaks everything), your users will get the offline experience
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.
While it is primarily an offline-fallback technique, it allows you to cache resources locally just for speedup purposes. Actually having an offline fallback is a bonus in this case.
Actually building a Chrome app for this will probably not help - you cannot update local resources from your web app side, you'll need to update your app through WebStore channels only.
I want a scenario where in I have a website and when I connect my mobile device to my pc or laptop, the website must be able to detect the phone and not the phone browser. As in it should detect if my phone is an iphone or any other mobile device. How can I achieve this?
Basically if I have a downloadable application and a list of compatible devices and when a device is connected, a compatibility check needs to be done and the software has to be downloaded directly! Is this possible?
you must build an APP and not a WebAPP or website.
the browser cant send relevant information such MacAddress or IMEI then you cannot do it with a simple website.
In javascript you can detect navigation browser and it has some extra information about the kind of device (like Android, Motorola, etc). For example this.
here is my what I am trying to do.
I have a .mobi site wayfieldfoods.mobi that is set up on a wordpress format. I am using a plugin that make the site mobile with custom menu wayfieldfoods.mobi/mlp/home.
my clients website is wayfieldfoods.com . How do I add (or redirect) wayfieldfoods.mobi to my clients site? if someone is using a mobile device and types in the url wayfieldfoods.com, I want the mobi site to display instead of the regular wayfieldfoods.com desktop site.
I spoke with someone earlier and they said that it's a code that has to be installed on the index page of my clients wayfieldfoods.com website in order for mobile access to the mobi site.
What is the special code needed to redirect to mobile traffic to my wayfieldfoods.mobi site.
(as a side note wayfieldfoods.mobi shows up on a desktop computer as a regular wordpress site with the default twenty eleven theme, but wayfieldfoods.mobi displays on a mobile phone with the mobile friendly website I set up. It works fine displayed on a mobile phone).
You can use Handset Detection to redirect mobiles to your mobile site (disclaimer : my startup). Browse on over and create a free account. There's a javascript snippet you paste into the of your homepage.
Hope that helps.
Please help me with one thing: I need to be able to forward a bada device to a certain application store page. This page should let the device to install the application using its native installation method, just like Android market or iTunes.
Granted that I know the link to my application on the web, where do I get the link to forward the device to?
I've tried to use the simulator's WebViewer application on the Samsung Apps site, but it can't even find the application that I want to link to.
please take a look at the links below.
using the namespace Osp::Commerce::Store, you can call the Samsung Apps within the app and encourage users to install apps via Samsung Apps. Hope it works for you.
http://developer.bada.com/article/Try-Purchase-using-In-App-Purchase
http://developer.bada.com/article/Implementation-Guide-for-Samsung-Apps-Try-and-Purchase-Feature
I want to implement "mobile website provider" tool. Basically, It intake desktop website url and generate a mobile version of website without edit/add additional content to the desktop website. I am planning to design a product like (what mofuse.com does. This website create mobile websites). This tool should be hassle free to client(who are not tech savvy.)
1.Q) I want to know kind of functionality involved in this process.
2.Q) In Java Technology, I need the tool set and functionality of this actitity.
As I am new to this mobile application environment. Any information(web links) regarding this will be appreciated.
Update:
its not like skweezer.com.
I had a website and I want to "mobile"ize it. 1) What kind of java tool set I have to use to create mobile web site? 2) How to test in multiple mobile devices 3) How the domain name will be created for mobile websites.
Check out our Wapple Architect tech (http://wapple.net) - we allow you to use the same content from web to mobile, but if it's mobile, instead of outputting the html, use a web service to turn it into the right content for that particular handset.
Mobilizes the same domain, no need for m.yourdomain.com or anything like that.
Check http://wapple.net on a mobile for example!
there are certain plugins which mobilise your website .
they check user agent and if user agent is of mobile browser they load another css of mobile and if you want to redirect some another redirect it ther.
you dont have to buy separate domain make sub domain or cname like
m.yourdomain.ccom
wap.yaourdomain.com
try some javacripts code which detect browser type and redirect accordingly.
The best place to learn about mobile toolkits are
WURFL - The open source community built around profiling devices and managing their capabilities (http://wurfl.sourceforge.net/)
Mobile Elements - A tool to help you build mobile sites using a proxy type approach (http://www.mobilelements.com)
Device Atlas - A device profiling tool (http://www.deviceatlas.com)