Please, if anyone knows how to solve that..
I made a pwa with ionic and onesignal..evething is fine until i close the pwa...
After that onesignal lost the permission to notification and you have to give the permision again
next the code.
INDEX.HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<noscript>
This application needs JavaScript to work, please enable JavaScript on your browser
</noscript>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function () {
OneSignal.init({
appId: "XXXXXXXXXXXXXXXXXXXXX",
});
});
</script>
</body>
</html>
app.component.ts
in the method constructor
this.oneSignal.startInit('xxxxxx', 'xxxxxxxxxx');
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
this.oneSignal.handleNotificationReceived().subscribe(data => this.onPushReceived(data.payload));
this.oneSignal.handleNotificationOpened().subscribe(data => this.onPushOpened(data.notification.payload));
this.oneSignal.endInit();
}
private onPushReceived(payload: OSNotificationPayload) {
alert(payload.body);
}
private onPushOpened(payload: OSNotificationPayload) {
alert(payload.body);
}
if anyone could help I would greatly appreciate it.
Related
When deploying to Jenkins and then accessing the website, it was just loading.
Chrome console:
"Refused to execute script from 'https://******.com/web_entrypoint.dart.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
-"Uncaught Error: Script error for "web_entrypoint.dart", needed by: main_module.bootstrap".
This is code index.html
/
<!DOCTYPE html>
<html>
<head>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="taskdino_platform">
<link rel="apple-touch-icon" href="icons/ic_launcher.png">
<!-- Croppie -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<!-- Favicon -->
<link rel="icon" type="image/png" href="ic_launcher.png"/>
<title>Taskdino</title>
<link rel="manifest" href="manifest.json">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAmDUD2ziWCN5Q1uIbk7fRKnJQWpRQqeE"></script>
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<div id="loading"></div>
<script>
window.addEventListener('load', function(ev) {
var loading = document.querySelector('#loading');
loading.textContent = "Loading entrypoint...";
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
loading.textContent = "Initializing engine...";
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
loading.textContent = "Running app...";
return appRunner.runApp();
});
});
</script>
</body>
</html>
/*
Please help!
Much obliged.
I have an error that has been appearing in my last few deploys and I am unable to trace it.
It only happens when I deploy to firebase website, debug works without any issues.
Uncaught SyntaxError: Unexpected token '<' (at flutter.js:1:1)
(index):50 Uncaught ReferenceError: _flutter is not defined
at (index):50:7
This shows up in the browser console.
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Trading made easy">
<meta name="google-signin-client_id"
content="xxx.apps.googleusercontent.com">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="tornmarket">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>Torn Market</title>
<link rel="manifest" href="manifest.json">
<!-- <script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script> -->
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
You should try to rebuild your application with:
flutter clean
and then
flutter build web
I tried to delete build folder manually, but it didn't work. It's preferable to use flutter clean.
Here's a solution that worked for me.
In index.html
Change this
<base href="/">
To this
<base href="./">
Open the index.html file in your_project_name/build/web path and put this script after the body tag :
<script src="main.dart.js" type="application/javascript"></script>.
If it didn't work so maybe flutter.js is missing from the build directory so clean your project by flutter clean in the terminal then build it again
using flutter build web after that add the tag I mentioned above. Now deploy your web to the host.
You're most likely missing the flutter.js file in the build/web folder
don't know whether below code works or not. try to implement the same and revert back. please change your body tag as below
<body>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
Here is my index.html file code
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="order_system">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>order_system</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" type="text/css" href="splash/style.css">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.5/fire-messaging.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/flutter_service_worker.js");
navigator.serviceWorker.register("/firebase-messaging-sw.js");
});
}
</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyBcp4nLrdafciehE8r6ajHkwMhON9cLjJs",
authDomain: "order-system-623aa.firebaseapp.com",
databaseURL: "https://order-system-623aa.firebaseio.com",
projectId: "order-system-623aa",
storageBucket: "order-system-623aa.appspot.com",
messagingSenderId: "34260933778",
appId: "1:34260933778:web:4ea612571d33e7b27c5a4b",
measurementId: "G-C798KHHTXK",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/8.4.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/8.4.2/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<picture id="splash">
<source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">
<source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x" media="(prefers-color-scheme: dark)">
<img class="center" src="splash/img/light-1x.png" />
</picture>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Here my Console Error
at new firebase_messaging_web.FirebaseMessagingWeb.new (http://localhost:64821/packages/firebase_messaging_web/firebase_messaging_web.dart.lib.js:171:51)
at Function.registerWith (http://localhost:64821/packages/firebase_messaging_web/firebase_messaging_web.dart.lib.js:62:73)
at Object.registerPlugins (http://localhost:64821/packages/order_system/generated_plugin_registrant.dart.lib.js:32:49)
at main (http://localhost:64821/web_entrypoint.dart.lib.js:44:35)
at main.next ()
at runBody (http://localhost:64821/dart_sdk.js:39051:34)
at Object._async [as async] (http://localhost:64821/dart_sdk.js:39082:7)
at main$ (http://localhost:64821/web_entrypoint.dart.lib.js:43:18)
at http://localhost:64821/main_module.bootstrap.js:19:10
at Array.forEach ()
at window.$dartRunMain (http://localhost:64821/main_module.bootstrap.js:18:32)
at :1:8
at Object.runMain (http://localhost:64821/dwds/src/injected/client.js:8656:21)
at http://localhost:64821/dwds/src/injected/client.js:22068:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:64821/dwds/src/injected/client.js:3830:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:64821/dwds/src/injected/client.js:10905:12)
at Object._asyncStartSync (http://localhost:64821/dwds/src/injected/client.js:3794:20)
at main__closure1.$call$body$main__closure (http://localhost:64821/dwds/src/injected/client.js:22080:16)
at main__closure1.call$1 (http://localhost:64821/dwds/src/injected/client.js:22007:19)
at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:64821/dwds/src/injected/client.js:4153:16)
at _CustomZone.runUnary$2$2 (http://localhost:64821/dwds/src/injected/client.js:12136:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:64821/dwds/src/injected/client.js:12068:14)
at _ControllerSubscription._sendData$1 (http://localhost:64821/dwds/src/injected/client.js:11697:19)
at _DelayedData.perform$1 (http://localhost:64821/dwds/src/injected/client.js:11849:59)
at _PendingEvents_schedule_closure.call$0 (http://localhost:64821/dwds/src/injected/client.js:11898:14)
at Object._microtaskLoop (http://localhost:64821/dwds/src/injected/client.js:3990:24)
at StaticClosure._startMicrotaskLoop (http://localhost:64821/dwds/src/injected/client.js:3996:11)
at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:64821/dwds/src/injected/client.js:10774:9)
at invokeClosure (http://localhost:64821/dwds/src/injected/client.js:1250:26)
at MutationObserver. (http://localhost:64821/dwds/src/injected/client.js:1269:18)
try replacing:
<script src="https://www.gstatic.com/firebasejs/8.2.5/fire-messaging.js"></script>
with:
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
I am not sure that fire-messaging.js actually exists
I have been using the chalkboard plugin for a reveal presentation. As it is written on the github page (https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard), I saved the drawings in a json file by pressing d (as far as I can tell, the data was correctly stored in the json file) and then I added the line src: "prova/cb.json", to the initialization for chalkboard and loaded the presentation with ?print-pdf.
However, when I open the presentation, there is no trace of the drawings that should be loaded.
This is the html of a minimal (non) working example...
Does anyone know what's going on?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prova</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/night.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section >
<h4>Prova</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/chalkboard/plugin.js"></script>
<script>
Reveal.initialize({
hash: true,
controls: false,
transition: 'convex',
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS-MML_HTMLorMML'
},
chalkboard: {
src: "prova/cb.json",
toggleChalkboardButton: { left: "80px" },
toggleNotesButton: { left: "130px" },
},
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMath, RevealChalkboard ],
});
</script>
</body>
</html>
I use leaflet to display my geolocated picture on my website (you can see my test site here: http://test.vincentbourganel.fr/pages/map-osm/)
everthing goes fine exept one thing:
when I browse my website from an ios mobile device (ios 11.3.1), no markers are displayed.
I can't figure where is the matter.
I try to have a reduce test case (only html, outside zenphoto, used for my gallery) with only 2 markers but the issue remains the same.
You can see it here:
http://test.vincentbourganel.fr/test_osm_map.html
can you point me to the right direction to solve this issue?
thanks for your help!!
vincent
edit after comment:
there is the code of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
there is the code of my test case taht you can see here: http://test.vincentbourganel.fr/test_osm_map.html
I am unable to see the 2 markers on my ios mobile device.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>