Skip to content

Commit 4bc22d0

Browse files
hmziqrshmziqrs
committed
Web notifications base
1 parent f375fad commit 4bc22d0

File tree

5 files changed

+159
-34
lines changed

5 files changed

+159
-34
lines changed

‎lib/main.web.dart‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'package:firebase_messaging/firebase_messaging.dart';
12
import 'package:flutter/material.dart';
23
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
34
import 'package:firebase_analytics/firebase_analytics.dart';
@@ -16,13 +17,13 @@ Future<void> main() async {
1617
await Firebase.initializeApp(
1718
options: DefaultFirebaseOptions.currentPlatform,
1819
);
20+
await AppFCM.init();
1921

2022
App.showAds = false;
21-
AppFCM.init();
23+
2224

2325
await Hive.initFlutter();
2426
await Hive.openBox('app');
25-
UIUtils.setLightStatusBar();
2627

2728
final List<NavigatorObserver> observers = [
2829
FirebaseAnalyticsObserver(

‎lib/services/notification/local.dart‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ class LocalNotification {
88
android: AndroidInitializationSettings(
99
'@drawable/ic_notification',
1010
),
11+
1112
// iOS: DarwinInitializationSettings(
1213
// onDidReceiveLocalNotification:
1314
// LocalNotification.onDidReceiveLocalNotification,
@@ -20,6 +21,13 @@ class LocalNotification {
2021

2122
LocalNotification.ins.initialize(
2223
initializationSettings,
24+
onDidReceiveBackgroundNotificationResponse: (details) {
25+
print("onDidReceiveBackgroundNotificationResponse, $details");
26+
},
27+
onDidReceiveNotificationResponse: (response) {
28+
print("onDidReceiveNotificationResponse $response");
29+
},
30+
2331
// onSelectNotification: (string) {
2432
// return LocalNotification.handleNotificationAction(
2533
// string != null && string != '' ? jsonDecode(string) : {},
@@ -51,6 +59,7 @@ class LocalNotification {
5159

5260
static Future<void> showNotification(RemoteMessage message) async {
5361
final notification = message.notification;
62+
print("showNotification: ${notification?.title} ${notification?.body}");
5463
if (notification == null) return;
5564
await LocalNotification.ins.show(
5665
notification.hashCode,

‎lib/services/notification/notification.dart‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import 'dart:io';
22
import 'dart:convert';
33

44
import 'package:firebase_messaging/firebase_messaging.dart';
5+
import 'package:flutter/foundation.dart';
56
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
6-
// import 'package:firebase_messaging/firebase_messaging.dart';
7+
import 'package:firebase_messaging/firebase_messaging.dart';
78

89
part 'background.dart';
910
part 'local.dart';
@@ -25,13 +26,21 @@ class AppFCM {
2526
badge: true,
2627
sound: true,
2728
);
29+
30+
onReceiveRemoteMessage();
2831
}
2932

3033
static Future<String?> getToken() async {
34+
if (kIsWeb) {
35+
const vapidKey =
36+
"BEsAR1WvAgQea8790PJxv9DWM2DLzPwyruTXY6B8GAKH6vfUZ2jTLBvqSksc9tXgSnsxvoXTXbACbpft08FKcd8";
37+
return AppFCM.ins.getToken(vapidKey: vapidKey);
38+
}
3139
return AppFCM.ins.getToken();
3240
}
3341

3442
static void onReceiveRemoteMessage() async {
43+
print("MESGSGE");
3544
// _terminatedState();
3645
_foregroundState();
3746
_backgroundState();
@@ -70,6 +79,7 @@ class AppFCM {
7079
provisional: false,
7180
sound: true,
7281
);
82+
print(settings.authorizationStatus);
7383

7484
return settings;
7585
}

‎web/firebase-messaging-sw.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// Please see this file for the latest firebase-js-sdk version:
2+
// https://github.com/firebase/flutterfire/blob/master/packages/firebase_core/firebase_core_web/lib/src/firebase_sdk_version.dart
3+
console.log('[firebase-messaging-sw.js] Start loading...');
4+
importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js");
5+
importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js");
6+
// importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
7+
// importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');
8+
9+
10+
console.log('[firebase-messaging-sw.js] Imported scripts!');
11+
12+
firebase.initializeApp({
13+
apiKey: "AIzaSyAYQ0EZXBNVtoTNlkTQgUs7sOUYtdeTdGA",
14+
authDomain: "flutter-ui-challenges-hgl.firebaseapp.com",
15+
databaseURL: "https://flutter-ui-challenges-hgl.firebaseio.com",
16+
projectId: "flutter-ui-challenges-hgl",
17+
storageBucket: "flutter-ui-challenges-hgl.appspot.com",
18+
messagingSenderId: "322047224635",
19+
appId: "1:322047224635:web:16d105e8b9b35a62d2e51e",
20+
measurementId: "G-HS61TMQ4DZ"
21+
});
22+
23+
console.log('[firebase-messaging-sw.js] Firebase initialized!');
24+
25+
// Necessary to receive background messages:
26+
const messaging = firebase.messaging();
27+
console.log('[firebase-messaging-sw.js] Messaging initialized!');
28+
29+
const isSupported = firebase.messaging.isSupported();
30+
console.log('[firebase-messaging-sw.js] isSupported: ', isSupported);
31+
32+
messaging.onMessage = ((payload) => {
33+
console.log('[firebase-messaging-sw.js] Received foreground message ', payload);
34+
35+
const notificationOptions = {
36+
body: payload.notification.body,
37+
icon: '/icons/Icon-192.png',
38+
badge: '/icons/Icon-192.png',
39+
tag: payload.notification.tag,
40+
data: payload.data
41+
};
42+
43+
return self.registration.showNotification(
44+
payload.notification.title,
45+
notificationOptions
46+
);
47+
});
48+
49+
// Optional:
50+
messaging.onBackgroundMessage((payload) => {
51+
console.log('[firebase-messaging-sw.js] Received background message ', payload);
52+
53+
const notificationOptions = {
54+
body: payload.notification.body,
55+
icon: '/icons/Icon-192.png',
56+
badge: '/icons/Icon-192.png',
57+
tag: payload.notification.tag,
58+
data: payload.data
59+
};
60+
61+
return self.registration.showNotification(
62+
payload.notification.title,
63+
notificationOptions
64+
);
65+
});
66+
67+
// Handle notification clicks
68+
self.addEventListener('notificationclick', (event) => {
69+
console.log('[firebase-messaging-sw.js] Notification click: ', event);
70+
event.notification.close();
71+
72+
// Add custom click handling here
73+
const urlToOpen = event.notification.data?.url || '/';
74+
75+
event.waitUntil(
76+
clients.openWindow(urlToOpen)
77+
);
78+
});
79+
80+
81+
// messaging.

‎web/index.html‎

Lines changed: 55 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
<!DOCTYPE html><html><head>
2-
<!--
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<!--
36
If you are serving your web app in a path other than the root, change the
47
href value below to reflect the base path you are serving from.
58
@@ -12,24 +15,24 @@
1215
This is a placeholder for base href that will be replaced by the value of
1316
the `--base-href` argument provided to `flutter build`.
1417
-->
15-
<base href="$FLUTTER_BASE_HREF">
18+
<base href="$FLUTTER_BASE_HREF">
1619

17-
<meta charset="UTF-8">
18-
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
20+
<meta charset="UTF-8">
21+
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
1922

20-
<!-- iOS meta tags & icons -->
21-
<meta name="apple-mobile-web-app-capable" content="yes">
22-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
23-
<meta name="apple-mobile-web-app-title" content="flutter_uis">
24-
<link rel="apple-touch-icon" href="icons/Icon-192.png">
23+
<!-- iOS meta tags & icons -->
24+
<meta name="apple-mobile-web-app-capable" content="yes">
25+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
26+
<meta name="apple-mobile-web-app-title" content="flutter_uis">
27+
<link rel="apple-touch-icon" href="icons/Icon-192.png">
2528

26-
<!-- Favicon -->
27-
<link rel="icon" type="image/png" href="favicon.png">
29+
<!-- Favicon -->
30+
<link rel="icon" type="image/png" href="favicon.png">
2831

29-
<title>flutter_uis</title>
30-
<meta name="description" content="A new Flutter project.">
31-
<link rel="manifest" href="manifest.json">
32-
<style id="splash-screen-style">
32+
<title>flutter_uis</title>
33+
<meta name="description" content="A new Flutter project.">
34+
<link rel="manifest" href="manifest.json">
35+
<style id="splash-screen-style">
3336
html {
3437
height: 100%
3538
}
@@ -38,7 +41,7 @@
3841
margin: 0;
3942
min-height: 100%;
4043
background-color: #ffffff;
41-
background-size: 100% 100%;
44+
background-size: 100% 100%;
4245
}
4346

4447
.center {
@@ -51,19 +54,22 @@
5154
}
5255

5356
.contain {
54-
display:block;
55-
width:100%; height:100%;
57+
display: block;
58+
width: 100%;
59+
height: 100%;
5660
object-fit: contain;
5761
}
5862

5963
.stretch {
60-
display:block;
61-
width:100%; height:100%;
64+
display: block;
65+
width: 100%;
66+
height: 100%;
6267
}
6368

6469
.cover {
65-
display:block;
66-
width:100%; height:100%;
70+
display: block;
71+
width: 100%;
72+
height: 100%;
6773
object-fit: cover;
6874
}
6975

@@ -90,7 +96,7 @@
9096
@media (prefers-color-scheme: dark) {
9197
body {
9298
background-color: #000000;
93-
}
99+
}
94100
}
95101
</style>
96102
<script id="splash-screen-script">
@@ -102,13 +108,31 @@
102108
</script>
103109
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
104110
</head>
105-
<body>
111+
112+
<body>
106113
<picture id="splash">
107-
<source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
108-
<source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
109-
<img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
114+
<source
115+
srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x"
116+
media="(prefers-color-scheme: light)">
117+
<source
118+
srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x"
119+
media="(prefers-color-scheme: dark)">
120+
<img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
110121
</picture>
111-
<script src="flutter_bootstrap.js" async=""></script>
112-
122+
<script src="flutter_bootstrap.js" async=""></script>
123+
<script>
124+
console.log('Loading flutter...');
125+
if ('serviceWorker' in navigator) {
126+
console.log('Registering service worker...');
127+
window.addEventListener('load', function () {
128+
console.log('Service worker loaded...');
129+
let scope = { scope: '/firebase-cloud-messaging-push-scope' };
130+
navigator.serviceWorker.register('firebase-messaging-sw.js', scope);
131+
// });
132+
});
133+
}
134+
</script>
135+
136+
</body>
113137

114-
</body></html>
138+
</html>

0 commit comments

Comments
 (0)