ionic 3 - popToRoot not destroying page - ios

I am using ionic 3 and when I popToRoot() the current page still executes and does not gets destoryed. I thought popToRoot() is suppose to destroy the current page as it goes to the root page? Here is the code:
ionViewDidLoad() {
this.menuCtrl.swipeEnable(false);
this.navCtrl.swipeBackEnabled = false;
this.loop();
}
loop() {
this.API.doGet(URL)
.then((data) => {
if (data == 'Yes') {
...
}
else {
// Wait on timer and call again - 10 seconds
this.Timeout = setTimeout(() => { this.onLoopTimeout() }, 10000);
}
})
.catch((err) => {
this.errorTimeout = setTimeout(() => { this.loop(); }, 3000);
})
}
onLoopTimeout() {
this.loop();
}
notInRepair() {
// Clear timers
clearTimeout(this.Timeout);
clearTimeout(this.errorTimeout);
// Go back to home page
this.navCtrl.setRoot(ServicesPage);
this.navCtrl.popToRoot();
}
Do you guys know what I am doing wrong here?

Related

why is ipcRenderer.sendSync() causing crashing the application?

In the onbeforeunload-Event, I use in my renderer-process ipcRenderer.sendSync() to notify the main-process to show a dialog:
window.onbeforeunload = (e) => {
const response = ipcRenderer.sendSync('askForSavingChanges');
if (response == 0) {
// save ...
} else if (response == 2) {
e.returnValue = false;
}
}
Here is the code in the main-process:
app.whenReady().then(() => {
initSettings().then(() => {
ipcMain.on('askForSavingChanges', (event) => event.returnValue = require('electron').dialog.showMessageBoxSync(this,
{
type: 'question',
buttons: ['Yes', 'No', 'Cancel'],
title: 'Closing',
message: 'Do you want to save changes?'
}));
})
createWindow();
});
Now, when I close the window, the event onbeforeunload will be called, but when calling ipcRenderer.sendSync() the window will be closed immediately. Do I something wrong?

Cordova Plugin Purchase - redirect after successful subscription

I am using this plugin (https://github.com/j3k0/cordova-plugin-purchase) to handle a in app subscription.
iap.validator = "https://validator.fovea.cc/v1/validate?appName=XXX";
//initiate initInAppPurchase function
useEffect(() => {
const init = async () => {
await initInAppPurchase();
}
init();
}, []);
//if on an ios or android device, then get product info
const initInAppPurchase = () => {
if ((isPlatform('ios')) || (isPlatform('android'))) {
iap.verbosity = iap.DEBUG;
iap.register({
id: "tpmonthly",
alias: "Monthly",
type: iap.PAID_SUBSCRIPTION
});
iap.ready(() => {
let product = iap.get('Monthly');
setPrice(product.price)
setProduct(product)
})
iap.refresh();
}
}
//if user clicks purchase button
const purchaseProduct = () => {
if (product.owned) {
alert('A subscription is currently active.')
} else {
iap.order('Monthly').then(() => {
iap.when("tpmonthly").approved((p: IAPProduct) => {
p.verify();
});
iap.when("tpmonthly").verified((p: IAPProduct) => {
p.finish();
history.push("/ios-signup/");
});
})
}
}
return (
<Button size="large" variant="outlined" onClick={purchaseProduct}>Subscribe Monthly for {productPrice}</Button>
);
What I am hoping to get is that once the subscription is verified that it then redirects the app to /ios-signup/ .. this is not happening.
Is this code correct? And why would it not redirect after p.finish?

Ionic 4 Popover, Alertsheet etc... on iOS scrolls back content and not the popover itself

I hope you all having a great day.
I am facing an issue on iOS with ActionSheets and Popovers, while a popover is appeared, the user can scroll when swiping inside the popover, and it scrolls the back content on which i open the popover from, if i click outside of the popover it closes the popover and it does not let me swipe at all but when i click inside the popover it scrolls the back content of the popover not the popover itself.
here is a video of it:
sorry had no option to upload video, here is a link:
Video of popover/actionsheet
here is code of opening the popover
async openCreateNewFolder(type, folder?) {
const popover = await this.popoverController.create({
component: NewFolderComponent,
componentProps: {
folderId: this.folderId,
parentId: this.parentId,
type,
folder
}
});
popover.onDidDismiss().then((dataReturned) => {
console.log(dataReturned);
if (dataReturned.data !== undefined) {
if (dataReturned.data === 'cancelClicked') {
} else if (dataReturned.data === 'confirmClickedFolder') {
this.deleteFolder(dataReturned.role);
} else if (dataReturned.data === 'confirmClickedFile') {
this.deleteFile(dataReturned.role);
} else if (dataReturned.data === 'newFolderCreated') {
this.getFolders();
}
// this.dataReturned = dataReturned.data;
//alert('Modal Sent Data :'+ dataReturned);
}
});
return await popover.present();
}
here is a code for the actionsheet:
async confirmChangeLanguageDialogue(selectedLanguage) {
let languageClass: any;
if (selectedLanguage === 'English') {
languageClass = 'alertControllerEnglishLanguageIcon';
} else if (selectedLanguage === 'Deutch') {
languageClass = 'alertControllerGermanLanguageIcon';
} else if (selectedLanguage === 'French') {
languageClass = 'alertControllerFrenchLanguageIcon';
} else if (selectedLanguage === 'Italian') {
languageClass = 'alertControllerItalianLanguageIcon';
}
const alert = await this.alertCtrl.create({
header: this.translate.instant('confirm'),
mode: 'ios',
message: this.translate.instant('change_language_confirm_message', {selected_language: selectedLanguage}),
buttons: [
{
text: this.translate.instant('cancel'),
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: this.translate.instant('okay'),
cssClass: languageClass,
handler: () => {
this.requestChangeLanguage(selectedLanguage);
}
}
]
});
await alert.present();
const result = await alert.onDidDismiss();
console.log(result);
}
Any help would be appriciated, thank you.
fix can be found here, check it out:
https://forum.ionicframework.com/t/popover-alertsheet-etc-on-ios-scrolls-back-content-and-not-the-popover-itself/180122

Video as a background image not working in Gatsby PWA on iOS

I created a opt-in app for potential interims for our company, i worked with Gatsby and for now am quite satisfied with the result. I made it an Progressive Web App as that is fairly easy with the gatsby plugin.
The PWA works great on Android and shows the background video as expected, but on iOS the video doesn't show.
I updated all the packages and dependencies to the last versions but that doesn't change a thing. I tried googling the issue but got a lot of search results off people trying to let a PWA play video in the background when the app is closed (not my case).
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Afstuderen bij Arcady`,
short_name: `Afstuderen`,
start_url: `/`,
background_color: `#FFF`,
theme_color: `#00a667`,
display: `standalone`,
icon: `src/images/bear_green.png`,
},
},
'gatsby-plugin-offline',
And the content of the service worker
importScripts("workbox-v3.6.3/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "workbox-v3.6.3"});
workbox.core.setCacheNameDetails({prefix: "gatsby-plugin-offline"});
workbox.skipWaiting();
workbox.clientsClaim();
/**
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
* requests for URLs in the manifest.
*/
self.__precacheManifest = [
{
"url": "webpack-runtime-aec2408fe3a97f1352af.js"
},
{
"url": "app-5b624d17337895ddf874.js"
},
{
"url": "component---node-modules-gatsby-plugin-offline-app-shell-js-b97c345e19bb442c644f.js"
},
{
"url": "offline-plugin-app-shell-fallback/index.html",
"revision": "ac0d57f6ce61fac4bfa64e7e08d076c2"
},
{
"url": "0-d2c3040ae352cda7b69f.js"
},
{
"url": "component---src-pages-404-js-cf647f7c3110eab2f912.js"
},
{
"url": "static/d/285/path---404-html-516-62a-0SUcWyAf8ecbYDsMhQkEfPzV8.json"
},
{
"url": "static/d/604/path---offline-plugin-app-shell-fallback-a-30-c5a-BawJvyh36KKFwbrWPg4a4aYuc8.json"
},
{
"url": "manifest.webmanifest",
"revision": "5a580d53785b72eace989a49ea1e24f7"
}
].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
workbox.routing.registerRoute(/(\.js$|\.css$|static\/)/, workbox.strategies.cacheFirst(), 'GET');
workbox.routing.registerRoute(/^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/, workbox.strategies.staleWhileRevalidate(), 'GET');
workbox.routing.registerRoute(/^https?:\/\/fonts\.googleapis\.com\/css/, workbox.strategies.staleWhileRevalidate(), 'GET');
/* global importScripts, workbox, idbKeyval */
importScripts(`idb-keyval-iife.min.js`)
const WHITELIST_KEY = `custom-navigation-whitelist`
const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
const { pathname } = new URL(event.request.url)
return idbKeyval.get(WHITELIST_KEY).then((customWhitelist = []) => {
// Respond with the offline shell if we match the custom whitelist
if (customWhitelist.includes(pathname)) {
const offlineShell = `/offline-plugin-app-shell-fallback/index.html`
const cacheName = workbox.core.cacheNames.precache
return caches.match(offlineShell, { cacheName }).then(cachedResponse => {
if (cachedResponse) return cachedResponse
console.error(
`The offline shell (${offlineShell}) was not found ` +
`while attempting to serve a response for ${pathname}`
)
return fetch(offlineShell).then(response => {
if (response.ok) {
return caches.open(cacheName).then(cache =>
// Clone is needed because put() consumes the response body.
cache.put(offlineShell, response.clone()).then(() => response)
)
} else {
return fetch(event.request)
}
})
})
}
return fetch(event.request)
})
})
workbox.routing.registerRoute(navigationRoute)
let updatingWhitelist = null
function rawWhitelistPathnames(pathnames) {
if (updatingWhitelist !== null) {
// Prevent the whitelist from being updated twice at the same time
return updatingWhitelist.then(() => rawWhitelistPathnames(pathnames))
}
updatingWhitelist = idbKeyval
.get(WHITELIST_KEY)
.then((customWhitelist = []) => {
pathnames.forEach(pathname => {
if (!customWhitelist.includes(pathname)) customWhitelist.push(pathname)
})
return idbKeyval.set(WHITELIST_KEY, customWhitelist)
})
.then(() => {
updatingWhitelist = null
})
return updatingWhitelist
}
function rawResetWhitelist() {
if (updatingWhitelist !== null) {
return updatingWhitelist.then(() => rawResetWhitelist())
}
updatingWhitelist = idbKeyval.set(WHITELIST_KEY, []).then(() => {
updatingWhitelist = null
})
return updatingWhitelist
}
const messageApi = {
whitelistPathnames(event) {
let { pathnames } = event.data
pathnames = pathnames.map(({ pathname, includesPrefix }) => {
if (!includesPrefix) {
return `${pathname}`
} else {
return pathname
}
})
event.waitUntil(rawWhitelistPathnames(pathnames))
},
resetWhitelist(event) {
event.waitUntil(rawResetWhitelist())
},
}
self.addEventListener(`message`, event => {
const { gatsbyApi } = event.data
if (gatsbyApi) messageApi[gatsbyApi](event)
})
I expect the iOS PWA (safari) to show the video as it does on Android but instead it gives a grey screen.
I hope some one can help me out or point me in the right direction.
How big is your video ?
Last time I checked, iOS has a limit of 50MB for the cache of a PWA, so if your video is bigger than 50MB, that may be the reason it works only on Android (which doesn't have such restrictions).
I found this blog post that helped me fix this problem
To add Range request handling to gatsby-plugin-offline, I added a script called range-request-handler.js with the following:
// range-request-handler.js
// Define workbox globally
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
// Bring in workbox libs
const { registerRoute } = require('workbox-routing');
const { CacheFirst } = require('workbox-strategies');
const { RangeRequestsPlugin } = require('workbox-range-requests'); // The fix
// Add Range Request support to fetching videos from cache
registerRoute(
/(\.webm$|\.mp4$)/,
new CacheFirst({
plugins: [
new RangeRequestsPlugin(),
],
})
);
Then in my gatsby-config.js I configured the plugin to append the above script:
// gatsby-config.js
module.exports = {
// ...
plugins: [
// ...plugins
{
resolve: 'gatsby-plugin-offline',
options: {
appendScript: require.resolve('./range-request-handler.js'),
},
},
// ...plugins
],
// ...
};
Videos now work in the Safari browser for me. If there is a better way to implement this, I am all ears. For now it works as intended

How to call downloadItem.pause() and downloadItem.pause() from outside of session.on(‘will-download’)?

I am trying to implement pause and resume functionality with electron libraries. how could i call item.pause out of session.on(‘will-download’) because it is function of item inside session.on(‘will-download’) or from any other way?
var url, path, filename;
ipcMain.on(‘item:file’, function(e, file) {
if(file.msg === ‘d’){
console.log(file);
url = file.url;
path = pathLib.join(__dirname, file.path);
filename = file.filename;
contents.downloadURL(url);
}
if(file.msg === ‘p’){
item.pause();
}
if(file.msg === ‘r’){
item.resume();
}
contents.session.on('will-download', (event, item, contents) => {
// Set the save path, making Electron not to prompt a save dialog.
path = `${path}${filename}`;
item.setSavePath(path);
item.on('updated', (event, state) => {
if (state === 'interrupted') {
console.log('Download is interrupted but can be resumed');
} else if (state === 'progressing') {
if (item.isPaused()) {
console.log('Download is paused');
} else {
console.log(`Received bytes: ${item.getReceivedBytes()} out of ${item.getTotalBytes()}`);
var percentage = (item.getReceivedBytes()/item.getTotalBytes())*100;
var progress = {'rBytes':item.getReceivedBytes(), 'tBytes':item.getTotalBytes(), 'p':percentage};
contents.send('item:progress', progress);
}
}
});
item.once('done', (event, state) => {
if (state === 'completed') {
console.log('Download successfully');
} else {
console.log(`Download failed: ${state}`);
}
});
});
});
https://github.com/sindresorhus/electron-dl/blob/master/index.js
Following, given above, link Worked for me!

Resources