PWA Install promt on iOS with Vuejs - ios

i have a PWA with VUEJS i need help making this code to work on iPhones. On Android it works perfect. The button appears if the person has not yet installed the application, but if it is already installed, the button disappears. IOS does not have a prompt, but I would like to add a button that, when clicked, takes the user to the installation of the pwa.
data() {
return {
installBtn: 'block',
installer: undefined,
},
created(){
const self = this;
let installPrompt;
window.addEventListener("beforeinstallprompt", e => {
e.preventDefault();
installPrompt = e;
this.installBtn = "block";
});
this.installer = () => {
this.installBtn = "none";
installPrompt.prompt();
installPrompt.userChoice.then(result => {
if(result.outcome === "accepted") {
console.log("User Accepted");
} else {
console.log("User denied");
}
installPrompt = null;
});
};
},

I don't think iOS Safari currently support web app install banner right now. See https://stackoverflow.com/a/51160938/4472488

Related

Focus tab and change page with service worker

We need a little help with a service worker. What we want to do is to click on notification, to execute service worker code and to check if the site is yet opened in a tab: if the site is not opened, we want to open a new tab and to navigate to a predefined url, if it is opened, we want to focus tab and then to navigate to a predefined path of the site.
We tried the code below but it doesn't work, cause we get some errors such as 'the service worker is not the active one' and so on.
Any help is really appreciated
Thanks
event.waitUntil(clients.matchAll({type: 'window' }).then(function (clientList) {
let openNewWindow = true;
for (let i = 0; i < clientList.length; i++) {
const client = clientList[i];
if (client.url.includes('localhost') && 'focus' in client) {
openNewWindow = false;
client.focus()
.then(function (client2)
{ return client.navigate(openUrl)});
// });
}
}
if (openNewWindow) {
return clients.openWindow(openUrl);
}
}));
I don't know if you still need a solution, but we did it like this.
After click, we look for the right registration by a lookup. Because our solution has many different customers, and there can be multiple registrations.
When we found it, we send a message. Somewhere else we have a listener on those messages to handle the rounting with the angular app.
If there is no tab opened, we use winClients.openWindow(url)
self.addEventListener('notificationclick', event => handleClick (event));
const handleClick = async (event) => {
const data = event.notification.data
const winClients = clients;
const action = event.action;
event.notification.close();
event.waitUntil(
clients.matchAll({includeUncontrolled: true, type: 'window'}).then(clients => {
let found = false;
let url = data.fallback_url;
if (action === 'settings') {
url = data.actions.settings;
}
clients.every(client => {
if (client.url.includes(data.lookup)) {
found = true;
client.focus();
client.postMessage({action: 'NOTIFICATION_CLICK', message_id: data.message_id, navigate_url: url});
return false;
}
return true;
});
if (!found) {
winClients.openWindow(url);
}
})
);
};

Is there anyway to open a TWA from a notification tap? (client.focus() fails for TWA but works for chrome tab or installed PWA)

I have a PWA with web push notifications that is warped in a TWA.
if the TWA is open in the background, then tapping on the notification does nothing.
if i close the TWA, then tapping on the notification opens a new chrome tab or focuses an expecting tab as expected.
here is my service-worker code
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(
clients
.matchAll({
type: 'window',
includeUncontrolled: true,
})
.then(function(clientList) {
for (let i = 0; i < clientList.length; i++) {
const client = clientList[i];
const isChatAppUrl =
client.url.includes('.com/messages') ||
client.url.includes('.co/messages');
if (isChatAppUrl && 'focus' in client) {
client.postMessage({
type: 'NOTIFICATION_CLICK',
payload: event.notification.data.link,
});
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow(event.notification.data.link);
}
}),
);
});
when debugging the issue with the TWA opened in the background I noticed that client.focus() fails with Not allowed to open a window

Electron, how open app from tray instead start a new one?

How to create a single instance of an Electron app? If it's already running in the tray and user starts it again, how to open the running app from tray instead of starting a new one?
thank you!
I found this in docs, https://electronjs.org/docs/api/app#apprequestsingleinstancelock:
const { app } = require('electron')
let myWindow = null
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', (event, commandLine, workingDirectory) => {
// Кто-то пытался запустить второй экземпляр, мы должны сфокусировать наше окно.
if (myWindow) {
if (myWindow.isMinimized()) myWindow.restore()
myWindow.focus()
}
})
// Создать myWindow, загрузить остальную часть приложения, и т.д.
app.on('ready', () => {
})
}
Use app.makeSingleInstance(), to make sure the user does not open multiple instances of electron. Once you share your code I will make an edit to show you how to properly implement it.
var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) {
// Someone tried to run a second instance, we should focus our window.
if (myWindow) {
if (myWindow.isMinimized()) myWindow.restore();
myWindow.focus();
}
});

iOS 9: cannot open the page when launch the local ios app by browser

if (isIos) {
if (isIos9) {
window.location = 'bdwm://';
iosGo();
} else {
createIframe();
iosGo();
}
}
function createIframe() {
var iframe = document.createElement('iframe');
iframe.style.cssText = 'display:none;width:0;height:0';
document.body.appendChild(iframe);
iframe.src = 'bdwm://';
}
function iosGo() {
var t = Date.now();
setTimeout(function () {
if (Date.now() - t < 600) {
location.href = "https://itunes.apple.com/cn/app/....."//the iOS app url
}
}, 500);
}
I want to solve this question "when exists your app on your iPhone, you can first launch the local your app,but when not exists, you must go to download the iOS app".
The above is my code. When in iOS 9.3, the app will alert the dialog "cannot open the page because the address is invalid", how can i solve it?

Hashchange causing phonegap app to crash?

I'm using ajax within my phonegap app to load the content for different pages. I'm also using the onhashchange to enable back button functionality.
All works fine initially but if I click 3 different links (and trigger 3 hash changes) then my app completely crashes, becomes unresponsive and then eats up all my memory.
The code of the hash change is below, anyone got any ideas why it might be crashing/memory leaking?
$('a.ajax').click(function () {
location.hash = $(this).attr('href').match(/(^.*)\./)[1]
return false
})
function hashChange() {
var page = location.hash.slice(1)
if (page != "" && window.location.hash) {
wrap.load('pages/' + page + ".html .page-wrapper", function(){
closeMenu();
})
}else{
wrap.load('pages/Welcome.html .page-wrapper', function(){
closeMenu();
})
}
}
// check for hash change
if ("onhashchange" in window) {
$(window).on('hashchange', hashChange).trigger('hashchange')
} else { // lame browser
var lastHash = ''
setInterval(function () {
if (lastHash != location.hash)
hashChange()
lastHash = location.hash
//contentScroller.scrollTo(0,0);
}, 100)
}
Just to note, I'm getting the following error within the xCode console and I'm running version 2.9 of phonegap
CDVWebViewDelegate: Navigation started when state=1
Thanks!
I wasn't entirely sure what was causing the crash but I decided to use this plugin http://benalman.com/projects/jquery-hashchange-plugin/ and now everything works fine
var wrap = $('#contentScroller .scroller');
$('a.ajax').click(function () {
location.hash = $(this).attr('href').match(/(^.*)\./)[1];
return false;
});
$(window).hashchange(function () {
var page = location.hash.slice(1);
if (page !== "" && window.location.hash) {
wrap.load('pages/' + page + ".html .page-wrapper", function () {
closeMenu();
});
} else {
wrap.load('pages/Welcome.html .page-wrapper', function () {
closeMenu();
});
}
});

Resources