Is it possible to check if DeviceMotionEvent permission has already been granted or not? And how we can change the request alert text from "localhost would like to access motion and orientation" to "App name would like to access motion and orientation"?
public requestDeviceMotion() {
if typeof (DeviceMotionEvent as any).requestPermission === 'function') {
(DeviceMotionEvent as any).requestPermission()
.then(permissionState => {
if (permissionState === 'granted') {
window.addEventListener('devicemotion', () => { });
}
})
.catch(console.error);
} else {
// handle regular non iOS 13+ devices
console.log("not iOS");
}
}
Could you clarify what is meant by "Is it possible to check"?
You code is valid for such a purposes. i.e. If permission state is not granted.
Note that your else block won't be triggered by "regular non iOS13+ devices" if they also have DeviceMotionEvent. For this you should use Platform.is like so:
public requestDeviceMotion() {
if (typeof DeviceMotionEvent.requestPermission === 'function') {
DeviceMotionEvent.requestPermission().then(permissionStatus => {
if (permissionState === 'granted') {
// window.addEventListener('devicemotion', () => { });
// I commented this out because you should not do this.
// This will cause a memory leak. You should make the listener
// a function which can then be removed in destroy lifecycle event
// but that is outside the scope of your question
}
}
} else if (!this.platform.is('ios')) {
console.log('not ios');
}
}
As for customizing the message, as far as I know, this is only an option for iOS.
Add the following to your config.xml at the base of your Ionic project folder. NOTE: You will probably only need to add the actual config-file entry but complete object is shown for clarity
<platform name="ios">
<config-file parent="NSMotionUsageDescription" target="*-Info.plist">
<string>This is your new message</string>
</config-file>
</platform>
Related
I have a PWA which works fine both online and offline (but only with the initial files). However, the offline cache (let’s say a javascript file) is not being refreshed so whenever I am offline the old javascript file is used, but when online the new version is used.
On an iPad I can use Safari to go to the website and add the PWA to the home page.
If I then go offline, it works fine – all pages work etc.
But if I make a change to say a javascript file (something like adding an alert) and also change the version in my service worker, when I am online the change is reflected but when offline it remains at the older version
To clarify let’s say from the start, on going into a page it alerts “A1”
I then change the javascript to alert “A2” and change the version in the service worker.
If I run the app when online, sure enough the app says New Update Available and All Good (some alerts from the main.js file)
Then when I go into the actual page o the alert says “A2” – so all good.
Then go offline.
The alert still says “A1”
It seems that when online it uses the server latest files but when it tries to use cache the files are old and at the moment seem to be the original files.
I have read many sites on this with no success – some suggest it will sort itself in 24 hours. Some suggest setting the maxage of the service worker to 0 (but how do you do this?). Some say the files need renaming each time they change which seems very clunky.
The service worker is definitely working
main.js
$(document).ready(function () {
'use strict';
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register("/sw.js")
.then(res => {
console.log("service worker registered");
res.onupdatefound = () => {
const installingWorker = res.installing;
installingWorker.onstatechange = () => {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller){
alert("new update available");
forceReload();
}
else {
alert("all good");
}
break;
}
}
}
})
.catch(err => console.log("service worker not registered", err))
}
});
const forceReload = () =>{
console.log("ForceReload");
navigator.serviceWorker
.getRegistrations()
.then((registrations) =>{
console.log(registrations);
//alert("reg");
Promise.all(registrations.map((r) => r.unregister()))
caches.keys().then(function(names) {
for (let name of names)
caches.delete(name);
});
},
)
.then(() => {setTimeout(() => {
location.reload();
}, 500);
})
}
sw.js
let version =5; // update this to send update.
var cacheName = 'cacheV5'
var filesToCache = [
'/',
'/manifest.json',
'/index.html',
'/sales10.html',
'/getdata.html',
....
....
'/js/siteJS/sales10.js',
'/js/siteJS/getdata.js',
'/js/jquery/3.4.1/jquery.min.js',
'/js/bootstrap/bootstrap.min.js',
'/js/bootstrap/popper.min.js'
];
/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
self.skipWaiting();
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
})
);
});
/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(stripQueryStringAndHashFromPath(e.request.url.replace(/^.*\/\/[^\/]+/, ''))).then(function(response) {
return response || fetch(e.request);
})
);
});
function stripQueryStringAndHashFromPath(url) { //added this so when url paramerters passed grabbing the cashed js works
return url.split("?")[0].split("#")[0];
}
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
return true;
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
I'm trying to implement a Blazor app that listens to keyboard input all the time (some kind of full screen game, let's say).
I can think of a key down event listener as a possible implementation for it, since there's not really an input field to auto-focus on.
Is there a better solution to just react to key-presses in any part of the screen?
In case that's the chosen one, how can I add an event listener from a client-side Blazor app? I've failed trying to do so by having a script like this:
EDIT: I modified a little bit the code below to actually make it work after fixing the original, key mistake that I was asking about.
scripts/event-listener.js
window.JsFunctions = {
addKeyboardListenerEvent: function (foo) {
let serializeEvent = function (e) {
if (e) {
return {
key: e.key,
code: e.keyCode.toString(),
location: e.location,
repeat: e.repeat,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
metaKey: e.metaKey,
type: e.type
};
}
};
// window.document.addEventListener('onkeydown', function (e) { // Original error
window.document.addEventListener('keydown', function (e) {
DotNet.invokeMethodAsync('Numble', 'JsKeyDown', serializeEvent(e))
});
}
};
index.html
<head>
<!-- -->
<script src="scripts/event-listener.js"></script>
</head>
Invoking it through:
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await jsRuntime.InvokeVoidAsync("JsFunctions.addKeyboardListenerEvent");
}
and having the following method trying to receive the events:
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
namespace Numble;
public static class InteropKeyPress
{
[JSInvokable]
public static Task JsKeyDown(KeyboardEventArgs e)
{
Console.WriteLine("***********************************************");
Console.WriteLine(e.Key);
Console.WriteLine("***********************************************");
return Task.CompletedTask;
}
}
I manage to get the script executed, but I'm not receiving any events.
The name of the event is keydown, not onkeydown.
Brief Explanation of what is happening: When I open the app on mobile, it directly takes me to dashboard.html from login.html
What I am trying to achieve: When app is opened for the 1st time, after giving username and password, on success response username and password information is saved in local storage. From the next time when app is opened, app goes to login.html, in its ngOnInit() it checks if user is already logged in then it navigates to 'dashboard.htmlelse stays atlogin.html` page.
But it takes me to dashboard.html even at the very first time after app is installed. What am I doing wrong ?
login.ts code:
ngOnInit()
{
if(this.storage.get('user').then((val) => {
if(val===''){
console.log("this key does not exists");
this.storage.set('user','');
}
else {
this.navCtrl.setRoot(DashboardPage);
console.log('user::',val);
}
console.log("i am out of if");
}))
{
}
{console.log('user',val);});
}
Please check my if condition and let me know what needs to be done.
There's no need for all your storage.get code to be inside of an if statement, it's not even possible (as far as i know, maybe if you return a boolean), you just need this
ngOnInit(){
this.storage.get('user').then((val) => {
if (val === '') {
console.log("this key does not exists");
this.storage.set('user', '');
} else {
this.navCtrl.setRoot(DashboardPage);
console.log('user::', val);
}
console.log("i am out of if");
});
}
Also you'll need to set your user as '' the first time your app is opened, if you don't do this your val will be null and it'll fall to your else and your user'll gain access to DashboardPage everytime even without beeing logged or having an account at all.
So it would be better if you don't set your user as '', just don't set it and leave it to be null, then you can do as this
ngOnInit(){
this.storage.get('user').then((val) => {
if (val) {
this.navCtrl.setRoot(DashboardPage);
console.log('user::', val);
} else {
console.log("this key does not exists");
}
console.log("i am out of if");
});
}
Hope this helps.
I use Firebase with VueJS (and VueRouter).
I have a problem with redirecting. I want to redirect between two pages. The first page is used for authentication and the second one for content that should only be visible to logged-in users.
My state holds the firebase user key (which will be populated through a mutation, that calls firebase):
state: {
user: { key: null }
}
The authentication page these lines:
beforeCreate() {
if (this.$store.state.user.key !== null) {
this.$router.replace('/')
}
}
And the secret page these:
beforeCreate() {
if (this.$store.state.user.key === null) {
this.$router.replace('/new')
}
}
But: the redirect from the authentication page to the secret page doesn't take place.
My Vue-dev-tools show that the user-key is set.
What could be the solution to this problem?
EDIT:
This is the mutation that calls Firebase and sets the user-key:
updateSession(state) {
auth.onAuthStateChanged((user) => {
if (user) {
state.user.key = user.uid
}
})
}
Here is the action:
UPDATE_SESSION({ commit }) {
commit('updateSession')
}
I call the action in my root component (App.vue):
beforeCreate() {
this.$store.dispatch('UPDATE_SESSION')
}
EDIT 2:
Now my routes array:
routes: [
{ path: '/', component: Secret },
{ path: '/new', component: Authentication }
]
Take a look at the Per-Route Guards section of the docs: https://router.vuejs.org/en/advanced/navigation-guards.html
You might want to try something like the below. By putting the beforeEnter guard on the route, you are telling Vue to do that first. The next argument tells VueRouter what to do next, and can redirect if needed or continue on to the original route.
beforeEnter(to, from, next) {
if (this.$store.state.user.key === null) {
next('/new')
}
}
EDIT
You may also want to try using push instead of replace
As per the conversation we had in the comments looks like you require this:
store.dispatch can handle Promise returned by the triggered action handler and it also returns Promise. See docs.
So you can setup the login action to retirn a promise like this:
a_logInUser: ({state, commit}, userInput) => {
return new Promise((resolve, reject) => {
firebase.auth().signInWithEmailAndPassword(userInput.email, userInput.paswword);
resolve();
});
}
Then in your authentication page where you tale the login input details and click the login button , set this up as the click handler of your login button
loginUser(){
this.$store.dispatch('a_logInUser', {email: this.email, password: this.password})
.then((result) => {
this.$router.replace('/');
}, (err) => {
// stay on this pageS
//handle login error
});
}
}
I'm trying to fix an issue with Candy.js (which uses Strophe.js) in which we use Candy.core.attach (after server side prebind).
There is an issue I can resolve. I'd really like to have access to the strophe.js logs (not just the packet logging that candy captures from strophe). I know strophe has low level logging, how can I get candy to make use of it?
In the init, set debug to true
Candy.init($('BoshPath').val(), {
core: { debug: true, autojoin: [chatroom] },
view: {
resources: '/scripts/Candy/res/', crop: {
message: { nickname: 18, body: 250 },
roster: { nickname: 21 }
}
}
});
Also, in Candy, find the "self.init = function (service, options)" line (around line 130ish). You can customize if you so choose.
if (_options.debug) {
self.log = function (str) {
try { // prevent erroring
if (typeof window.console !== undefined && typeof window.console.log !== undefined) {
console.log(str);
}
} catch (e) { }
};
self.log('[Init] Debugging enabled');
}
I ended up modifying my local copy of candy/strophe to enable the low-level logging I was looking for as it doesn't appear as though Candy provides a means to enable strophe's low leveling logging.