Do you have an idea what is this "Install this web app" bubble called? I want to know whats the name of that thing so I can research more about it.
Do you also have an idea on how to implement it? I need it to function exactly like the one on the image.
Any useful links related to it will be a great help.
see this .
is very simple to use
<link rel="stylesheet" href="path/to/add2home.css">
<script type="application/javascript" src="path/to/add2home.js"></script>
Related
I am just beginning to dip my toes into the PWA waters and have started by playing with the manifest.json on a site I am building. My goal is to get it to open up in fullscreen.
I am getting some very strange behavior on iOS.
I add the PWA to the home screen fine and it correctly uses the short name as specified by the manifest. But when I try to open it things go off the rails. The app seems to attempt to load in fullscreen per the manifest but then stops and the website instead opens in a new Safari tab, twice. I have two new tabs both pointing to the URL of the PWA.
Does anyone have any idea what is causing this strange behavior?
Hopefully this is not too late for you.
I had the same problem and I realize it is course by manifest link tag in the header:
<link id="manifest_link" rel="manifest" href="/manifest.json">
The moment you have this, any link or redirect from your PWA will launch Safari regardless of internal or external link.
One solution is to have the link remove from header with javascript after you load the file:
var manifestlink = document.getElementById("manifest_link");
document.head.removeChild(manifestlink);
However that might course some issues for android. You have to test your scenario with on both thoroughly.
I've been having trouble for quite some time. I need to get the canvas working on a mobile web app of mine but it seems to be having trouble with paper.js.
I have set my viewport to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
And the canvas element:
<canvas id="canvas" resize="true"></canvas>
But the canvas never seems to render at ALL.
I hope I've given enough information. I'm almost certain that I have no problems from the JavaScript side.
Go easy on me please!
Thanks
Did you know it's possible to debug javascript issues by stepping through your code running on the iphone in safari using safari on your mac?
Usually when I run into issues like this, it saves me!
Here's a link that will help you do this: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/
If you would like to learn more about paperjs, check out this screencast I created: http://tagtree.tv/canvas-with-paper-js
I'm a newbie in BB10 Webworks... I am doing some experiments with the dev alpha's magnetometer...
how can I put these to work? I tried
function magCallback(sensor, data) {
$("#xvalueut").html(data.x);
$("#yvalueut").html(data.y);
$("#zvalueut").html(data.z);
}
blackberry.event.addEventListener("devicemagnetometer", magCallback);
and didn't worked, I also put <feature id="blackberry.sensors" /> in the config file, and inserted a <script src="local:///chrome/webworks.js" type="text/javascript"></script> in the index.html
I hope you can help me...
We have a really good sample app in our GitHub repo that you'll probably want to check-out. It deals with all of the sensors you can access via BlackBerry WebWorks.
Here's the link: Sensors Sample App
I found out that
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
is a way to make an icon on iPhones.
What is the way to make an icon on androids?
Also are there other ways to implement creating an icon which is linked to simply a mobile website?
You actually can't. This functionality is unique to iOS devices.
EDIT:
However, some browsers may use the standard favicon used by most browsers.
Now I've seen loads of websites that look great on the iphone, such as http://twitter.com and http://deviantart.com however I can't for the life of me get the right structure within my mobile web application to make it show up as if it was an iphone application.
I've discovered iphone jquery ( http://jqtouch.com ) which seems to be the most promising javascript lib for developing nice effects to make everything look authentic. However I'm still having issues with getting the website to fill the screen on iphone safari.
I can never find any resourceful websites that actually explain how to get the effect of having it fully zoomed in and filling the screen.
Are there any libraries that help develop websites for mobile devices such as iphones.
To run fullscreen the webpage needs to be run as a webapp (bookmaked on the homescreen). You also need to indicate in your HTML that it is a web app.
Taken from this website :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
The one I've used this in the past is the iui library and it worked well for my case. The example code makes it pretty easy to understand.
Or checkout JQTouch. You can get up and running very quickly.