I have a WebApp and it works alright in both Android and iOS environments. The problem is, in one of the screens, the WebApp generates (and displays) a PDF file, which should be shareable through Email, WhatsApp, Telegram, etc.
Android does allow the share option in the standalone display mode, but iOS just doesn't. I need to know if there's any way I can actually exit the WebApp mode into plain good-old-browser mode when opening the pdf file, so that the user can actually share it with his/her contacts through the browser's native share dialog.
These are the contents of the manifest.json file
{
"name": "Test App",
"short_name": "TestApp",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "https://example.com?a2hs=1",
"scope": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000"
}
So far, I've tried:
using Display PDF in the pdf link.
using javascript to force-open a new window:
test
<script>
$(function(){
$('#pdf').click(function(e){
e.preventDefault();
window.open($(this).attr('href'), '_blank');
return false;
});
});
</script>
None of those solutions worked out.
Also, I tried changing the display: property in the manifest.json file to minimal-ui - that does allow to share the file/url but that removes the WebApp look & feel, so it's not an option.
Any ideas? Thanks!
I managed to find a solution. I created this alias subdomain:
pdf.example.com
Then, I linked the pdf to the alias subdomain:
Display PDF
iOS recognizes this as another server, so it automatically forces the load of the file in a new tab in Safari, exiting the current standalone mode of the webapp.
Related
A user should be able to click on a link like app:this/is/some/link?with=information and the desired app opens and does some action.
This question is similar but just the other side to
KaiOS - Share using WhatsApp. Another application should link to my application.
Is this possible in KaiOS?
Deeplinks do exist on KaiOS 2.5.3 or newer, but there is no documentation on them. For example, this is from the KaiStore app manifest:
"deeplinks": {
"regex": "^(app://)(kaios-store|kaios-plus)(.kaiostech.com)($|/$|/\\?(apps|postResult)=)",
"action": "open-deeplink"
},
"activities": {
"open-deeplink": {
"href": "./index.html",
"disposition": "window",
"filters": {
"type": "url",
"url": {
"required": true,
"pattern": "(app|rtsp|data):.{1,16384}"
}
},
"returnValue": true
},
}
The action under deeplinks points to one of the activities, which must accept a required URL parameter. An app can then register using navigator.mozSetMessageHandler to handle this activity (see B2G's Web Activities API).
That said, there is no way to deep-link to arbitrary apps. Apps must expose Web Activities in their manifest in order to be open-able by other apps.
My project is in reactjs progressive web app. When i do
Add to home screen for iphone app displays 404 on opening.
While in android it is working fine.
In my local project it is working fine in iphone and android.
for live it is working fine in android but not working in iphone.
Here is my manifest.json file :
{
"short_name": "My App",
"name": "My App",
"icons": [
{
"src": "MY_App_Icon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "login",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Setting start_url to "start_url": ".", should work
If you want to redirect to /login you will need to handle that in your application.
I have created an Addon and uploaded it to addons.mozilla.org and it works ok, but it's displaying a default icon instead of my icon. I don't get this problem with Chrome.
My manifest.json file looks like:
{
"manifest_version": 2,
"name": "Handcash handle converter",
"version": "1.4",
"description": "Get a receiving address for a Handcash $handle",
"icons": {
"48": "handcash48.png",
"64": "handcash64.png",
"128": "handcash128.png"
},
"browser_action": {
"default_title": "Handcash handle converter",
"default_popup": "./popup/popup.html"
},
"homepage_url": "https://www.handcash.io",
"short_name": "HandcashConv",
"content_security_policy": "script-src 'self' https://api.moneybutton.com ; object-src 'self'",
"permissions": [
"storage",
"clipboardWrite"
]
}
I tried putting the icons in their own directory and at the root of the extension but no joy. The extension looks like this in Firefox:
Full source code in case you're interested: https://github.com/markallisongit/handcash-chrome
The icons entry of the manifest.json refers to icons used in the addon listing, addon management page, etc. What you want here is to set the icon of the browserAction button in the toolbar. If you have a look at the browser_action page on the MDN, you'll notice a default_icon setting, and I believe this is what you're looking for :
Use this to specify one or more icons for the browser action. The icon
is shown in the browser toolbar by default.
Icons are specified as URLs relative to the manifest.json file itself.
You can specify a single icon file by supplying a string here:
"default_icon": "path/to/geo.svg"
To specify multiple icons in different sizes, specify an object here.
The name of each property is the icon's height in pixels, and must be
convertible to an integer. The value is the URL. For example:
"default_icon": {
"16": "path/to/geo-16.png",
"32": "path/to/geo-32.png"
}
In the end, you should update your manifest.json so that it includes this default_icon setting, something like this:
{
"manifest_version": 2,
"name": "Handcash handle converter",
...
"browser_action": {
"default_title": "Handcash handle converter",
"default_popup": "./popup/popup.html",
"default_icon": {
"48": "handcash48.png",
"64": "handcash64.png",
"128": "handcash128.png"
}
},
...
}
With the new firefox webextensions: Is there a way to save the current page (or a part of it) as html (or text) to disk? If not, how are the chances, such an API will be implemented in the future?
I didn't find any suitable API and appreciate any help.
Regards
There are probably several ways to do this. The following will get you started. It saves the webpage in the currently focused tab in the active window to the browser's default downloads path. The file name is set to 'samplePage.html' (you can change that by modifying the filename value in the downloads.download() options; or you can remove that field entirely and leave it to the default naming).
You will need to store icon images in your webextension package for the user to be able to click on. Also, be sure to navigate to a webpage you want to save before you try to use the webextension; webextensions are not active on the Firefox about:debugging page.
manifest:
{
"name": "SavePage",
"version": "1.0",
"description": "Clicking browser icon saves page html",
"manifest_version": 2,
"icons": {
"48": "icons/clickme-48.png"
},
"permissions": [
"tabs",
"activeTab",
"downloads"
],
"browser_action": {
"default_icon": "icons/clickme-32.png"
},
"background": {
"scripts": ["background.js"]
}
}
background script:
/* BACKGROUND SCRIPT
Clicking on browser toolbar button saves the webpage in the
current tab to the browser's default downloads path with a
filename of "samplePage.html". The "tabs" and "downloads"
permissions are required.
*/
browser.browserAction.onClicked.addListener((tab) => {
var currentUrl = tab.url;
function onStartedDownload(id) {
console.log(`Started to download: ${id}`);
}
function onFailed(error) {
console.log(`Something stinks: ${error}`);
}
var startDownload = browser.downloads.download({
url : currentUrl,
filename: 'samplePage.html'
});
startDownload.then(onStartedDownload, onFailed);
});
An alternative approach might be to try to save the webpage to local storage rather than to disk. I have not explored that option.
These pages may be helpful:
downloads.download()
browserAction.onClicked
There may be security risks in giving a webextension these permissions. You will have to weigh the risks for your own usage pattern.
I want to create an extension for Google Chrome, and it will be real simple.
I will have a database on my website's server, it will check if a URL is in the "blacklist" table, and warn the user if it is.
But I don't know where to start. I tried putting all the files on my web server, and changin the manifest.json file as such:
(changed the "default_popup" line)
{
"manifest_version": 2,
"name": "My Extension",
"description": "This extension warns you if you are trying to open a blacklisted URL",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "http://www.mysite.com/my_extension/popup.html"
},
"permissions": [
"https://secure.flickr.com/"
]
}
Note : this file resides on my computer, I load it from the "Extensions" menu of Chrome.
but when I tried to install this extension, I got the error :
This web page could not be found:chrome-extension://hgfdjnsakhkijfmdnadmlacgjggggkpf/http://www.mysite.com/my_extension/popup.html
Instead of trying to hard code it in the manifest file, try putting something like this in a background page:
chrome.browserAction.setPopup({popup: "http://www.mysite.com/my_extension/popup.html"});
However, it may not be possible to specify an external popup page at all.
Nevertheless, it would be better to include the popup in the extension files and then get just the data from your server.