I've a flutter web app that'll run on the localhost perfectly but when I deploy it to firebase I get a blank page. In setting up firebase hosting I selected build/web as my public directory. I ran flutter build web which compiles the app. The build directory is created. My firebase.json file looks fine.(pos-ap/build/web for the public directory is correct)
{
"hosting": {
"public": "pos-app/build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<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="pos">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>pos</title>
<link rel="manifest" href="manifest.json">
</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>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxx",
databaseURL: "xxxxxxxxx",
projectId: "xxxxxx",
storageBucket: "sxxxxxxxxxx",
messagingSenderId: "xxxxxxx",
appId: "1:xxxxxxxxx:web:xxxxxxxxxxxx7bc",
measurementId: "G-xxxxxxxxx"
};
// Initialize Firebase
// firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I'm not really familiar with web stuff. And apologies I can't really offer any more info. I suppose the only clue is that it works on localhost but not when deployed.
My root directory is..
|-pos-app
|-consumer-app
|-firebase.json
I'm trying to deploy pos-app which is a flutter app.
Related
I need to publish my Flutter web app on a web server folder.
Here you have the index.html file:
<!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="/freelife/">
<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="capenergy_ns">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Freelife</title>
<link rel="manifest" href="manifest.json">
<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>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIz...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:538....",
measurementId: "G-X..."
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
Here you have firebase-messaging-sw.js:
importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging.js");
firebase.initializeApp({
apiKey: "AIz...",
authDomain: "free...",
projectId: "free...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:53...",
measurementId: "G-X..."
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
const promiseChain = clients
.matchAll({
type: "window",
includeUncontrolled: true
})
.then(windowClients => {
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
windowClient.postMessage(payload);
}
})
.then(() => {
return registration.showNotification("New Message");
});
return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
console.log('notification received: ', event)
});
The issue is that publishing the created web folder inside build folder in the app, launching the web in the browser shows a blank page.
Lookin the output of the web console debugger, it throws a lot of errors:
The web app was working fine until I inserted all Firebase dependencies.
try deleting [base href="/freelife/"] from the index.html file
It should stay like this.
<!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="/freelife/"> -->
<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="capenergy_ns">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Freelife</title>
<link rel="manifest" href="manifest.json">
<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>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIz...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:538....",
measurementId: "G-X..."
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
I have solved the issue changing index.html as follows:
<!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="/webapp/">
<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="freelife">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>capenergy_ns</title>
<link rel="manifest" href="manifest.json">
<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>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
<script type="module">
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIza...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "538...",
appId: "1:...",
measurementId: "G-..."
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
And then on main.dart, I have updated the piece of code:
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
await Firebase.initializeApp(
options: const FirebaseOptions(
apiKey: "AIza....",
appId: "1:5389...",
messagingSenderId: "...",
projectId: "...")
);
I have a code like below, initially I used this code for iOS and Android applications, now I want the application to run on the web, but when I run I get this error
runZonedGuarded: Caught error in my root zone.
pluginConstants['isCrashlyticsCollectionEnabled'] != null is not true
someone suggested using kisweb, I've used it, but I still get the same error, please help, here's my code
void main() async {
WidgetsFlutterBinding.ensureInitialized();
if(!kIsWeb) {
await Firebase.initializeApp();
}
runZonedGuarded(() async {
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
}else{
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
runApp(App(
authenticationRepository: AuthenticationRepository(),
userRepository: UserRepository(),
));
}, (error, stackTrace) async {
print('runZonedGuarded: Caught error in my root zone. $error');
});
}
index.html
<!DOCTYPE html>
<html>
<head>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx,
databaseURL: "xxx",
projectId: "xxxx",
storageBucket: "xxx,
messagingSenderId: "xxx",
appId: "xxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<!--
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="cashbac_biz">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>cashbac_biz</title>
<link rel="manifest" href="manifest.json">
</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>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Replace:
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
} else {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
with:
if (!kIsWeb) {
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
} else {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
}
Calling setCrashlytics() will produce the error because Crashlytics is not supported on web.
I had the same problem. I solved it by following the install directions here, specifically these steps to add a build phase into XCode:
From Xcode select Runner from the project navigation.
Select the Build Phases tab, then click + > New Run Script Phase.
Add ${PODS_ROOT}/FirebaseCrashlytics/run to the Type a script... text box.
Optionally you can also provide your app's built Info.plist location to the build phase's Input Files field: For example:
$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)
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'm building a chrome devtools extension with TypeScript + React
My Steps
loaded unpacked dist on chrome://extensions
open a new tab with devtools page(and the window alerts "this is content script")
clicked my extension panel
the error appears on chrome://extensions
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
Context
devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#a6b12dfad6663f13a7e16e9a42a6a4975374096b/&can_dock=true&dockSide=undocked
Stack Trace
index.html:0 (anonymous function)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="/static/css/sidebar.2001c5a3.chunk.css" rel="stylesheet">
<link href="/static/css/devtools.2001c5a3.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static/js/runtime-index.d09d0bdd.js"></script>
<script src="/static/js/index.chunk.js"></script>
<script src="/static/js/runtime-sidebar.7a085c24.js"></script>
<script src="/static/js/0.chunk.js"></script>
<script src="/static/js/sidebar.chunk.js"></script>
<script src="/static/js/runtime-devtools.f0ac3d91.js"></script>
<script src="/static/js/devtools.chunk.js"></script>
<script src="/static/js/runtime-background.c42f91dc.js"></script>
<script src="/static/js/background.chunk.js"></script>
<script src="/static/js/runtime-contentScript.7cf7a071.js"></script>
<script src="/static/js/contentScript.chunk.js"></script>
</body>
</html>
But if I click the "inspect views background page` manually before step 2, everything works well.
I think the background should start up automatically in production. Did I miss something?
index.tsx
chrome.devtools.panels.create("Garbanzo",
"favicon.ico",
"devtools.html",
function (panel) {
// code invoked on panel creation
let backgroundPageConnection: chrome.runtime.Port
panel.onShown.addListener(function (window) {
// when the user switches to the panel, check for an elements tab
// selection
backgroundPageConnection = chrome.runtime.connect({
name: "devtools-page"
});
});
panel.onHidden.addListener(function () {
backgroundPageConnection.disconnect()
});
}
);
contentScript.chunk.js
alert("this is content script")
background.chunk.js
chrome.runtime.onConnect.addListener((port) => {
alert("OK");
})
manifest.json
{
...
"devtools_page": "index.html",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"static/js/content_script.js"
]
}
],
"background": {
"scripts": [
"static/js/background.js"
],
"persistent": true
},
"permissions": [
"storage",
"declarativeContent",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
...
}
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.