Merge pull request #167 from cybex-dev/unified_service_worker

cybex-dev · web-flow · commit 8cf4a39da289 · 2023-09-16T01:14:21.000+02:00
Update unified service worker
diff --git a/.github/workflows/flutter.yml b/.github/workflows/flutter.yml
@@ -58,6 +58,9 @@ jobs:
       - run: flutter config --enable-web
       - run: cd ./example; flutter build web --release --target=lib/main.dart --output=build/web
 
+      - name: Update service worker
+        run: cat ./example/service-worker/twilio-sw.js > ./example/build/web/flutter_service_worker.js
+
       - name: Archive Production Artifact
         uses: actions/upload-artifact@master
         with:
diff --git a/.gitignore b/.gitignore
@@ -47,3 +47,5 @@ build/
 *.lock
 
 *.log
+
+.firebase/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,6 +41,8 @@
 * Fix: call ringing event always showing `CallDirection.outgoing`
 * Fix: [Android] Updated CallKit incoming/outgoing name parameter resolution
 * Fix: [Web] Notification actions working intermittently.
+* Fix: [Web] Added suggested service worker integration with CI/CD unifying with `flutter_service_worker.js`, see [here](https://firebase.flutter.dev/docs/messaging/usage/#background-messages) for more info regarding service worker limitations.
+* Update: [Web] Remove additional service-worker files
 
 ## 0.0.9
 
diff --git a/README.md b/README.md
@@ -165,50 +165,57 @@ See [example](https://github.com/cybex-dev/twilio_voice/blob/master/example/andr
 
 There are 4 important files for Twilio incoming/missed call notifications to work:
 
-- `twilio.min.js` is the twilio javascript SDK, it is used to handle the incoming calls.
 - `notifications.js` is the main file, it handles the notifications and the service worker.
-- `load-sw.js` is responsible for (re)loading the twilio service worker.
-- `twilio-sw.js` is the service worker, it is used to handle the incoming calls.
+- `twilio-sw.js` is the service worker _content_ used to work with the default `flutter_service_worker.js` (this can be found in `build/web/flutter_service_worker.js` after calling `flutter build web`). This file's contents are to be copied into the `flutter_service_worker.js` file after you've built your application.
 
 Also, the twilio javascript SDK itself, `twilio.min.js` is needed.
 
-To ensure proper/as intended setup:
+### To ensure proper/as intended setup:
 
-1. Locate 4 files (`twilio.min.js`, `load-sw.js`, `notifications.js` and `twilio-sw.js`) from `example/web` folder
-2. Copy all 4 files into your own project,
-3. (optional) Review & change the `notifications.js`, `twilio-sw.js` files to match your needs.
+1. Copy files `example/web/notifications.js` and `example/web/twilio.min.js` into your application's `web` folder.
+2. This step should be done AFTER you've built your application, every time the `flutter_service_worker.js` changes (this includes hot reloads on your local machine unfortunately)
+   1. Copy the contents of `example/web/twilio-sw.js` into your `build/web/flutter_service_worker.js` file, **at the end of the file**. See [service-worker](#service-worker) for more information.
+
+Note, these files can be changed to suite your needs - however the core functionality should remain the same: responding to `notificationclick`, `notificationclose`, `message` events and associated sub-functions.
 
 Finally, add the following code to your `index.html` file, **at the end of body tag**:
 
 ```html
     <body>
+        <!--Start Twilio Voice impl-->
         <!--twilio native js library-->
         <script type="text/javascript" src="./twilio.min.js"></script>
-
-        <!--load twilio service worker-->
-        <script type="text/javascript" src="./load-sw.js"></script>
+        <!--End Twilio Voice impl-->
 
         <script>
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', async () => {
-                await navigator.serviceWorker.register('twilio-sw.js').then(value => {
-                    console.log('Twilio Voice Service worker registered successfully.');
-                }).catch((error) => {
-                    console.warn('Error registering Twilio Service Worker: ' + error.message + '. This prevents notifications from working natively');
-                });
-            });
-        }
-        </script>
+            window.addEventListener('load', function(ev) {
+              // Download main.dart.js
+              ...          
     </body>
 ```
 
 #### Web Considerations
 
-Notice should be given to using `firebase-messaging-sw.js` in addition to `twilio-sw.js` since these may cause conflict in service worker events being handled.
-
 _If you need to debug the service worker, open up Chrome Devtools, go to Application tab, and select Service Workers from the left menu. There you can see the service workers and their status.
 To review service worker `notificationclick`, `notificationclose`, `message`, etc events - do this using Chrome Devtools (Sources tab, left panel below 'site code' the service workers are listed)_
 
+##### Service Worker
+
+Unifying the service worker(s) is best done via post-compilation tools or a CI/CD pipeline (suggested).
+
+A snippet of the suggested service worker integration is as follows:
+
+```yaml
+#...
+- run: cd ./example; flutter build web --release --target=lib/main.dart --output=build/web
+
+- name: Update service worker
+  run: cat ./example/web/twilio-sw.js > ./example/build/web/flutter_service_worker.js
+#...
+```
+
+A complete example could be found in the github workflows `.github/workflows/flutter.yml` file, see [here](https://github.com/cybex-dev/twilio_voice/blob/master/.github/workflows/flutter.yml). 
+
 ##### Web Notifications
 
 2 types of notifications are shown:
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -42,25 +42,25 @@ enum RegistrationMethod {
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   if (kIsWeb) {
-    // Get registration method
-    final registrationMethod = RegistrationMethod.loadFromEnvironment() ?? RegistrationMethod.env;
-
-    // if web, we use the requested registration method for firebase registration only
-    if(registrationMethod == RegistrationMethod.firebase) {
-      // Add firebase config here
-      const options = FirebaseOptions(
-        apiKey: '',
-        appId: '',
-        messagingSenderId: '',
-        projectId: '',
-        authDomain: '',
-        databaseURL: '',
-        storageBucket: '',
-        measurementId: '',
-      );
-      // For web apps only
-      await Firebase.initializeApp(options: options);
-    }
+
+    // Add firebase config here
+    const options = FirebaseOptions(
+      apiKey: '',
+      appId: '',
+      messagingSenderId: '',
+      projectId: '',
+      authDomain: '',
+      databaseURL: '',
+      storageBucket: '',
+      measurementId: '',
+    );
+
+    // For web apps only
+    // ignore: body_might_complete_normally_catch_error
+    await Firebase.initializeApp(options: options).catchError((error) {
+      printDebug("Failed to initialise firebase $error");
+    });
+
   } else {
     // For Android, iOS - Firebase will search for google-services.json in android/app directory or GoogleService-Info.plist in ios/Runner directory respectively.
     await Firebase.initializeApp();
diff --git a/example/lib/screens/widgets/permissions_block.dart b/example/lib/screens/widgets/permissions_block.dart
@@ -1,7 +1,9 @@
 import 'dart:async';
 import 'dart:io';
 
+import 'package:firebase_core/firebase_core.dart';
 import 'package:firebase_messaging/firebase_messaging.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:twilio_voice/twilio_voice.dart';
 import 'package:twilio_voice_example/screens/widgets/permission_tile.dart';
@@ -116,12 +118,13 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
       _stateBluetooth = value;
     });
   }
+
   //#endregion
 
   @override
   void didChangeAppLifecycleState(AppLifecycleState state) {
     printDebug("AppLifecycleState: $state");
-    if(_lastLifecycleState != state && state == AppLifecycleState.resumed) {
+    if (_lastLifecycleState != state && state == AppLifecycleState.resumed) {
       _updatePermissions();
     }
     _lastLifecycleState = state;
@@ -189,7 +192,9 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
     _tv.hasMicAccess().then((value) => setMicPermission = value);
     _tv.hasReadPhoneStatePermission().then((value) => setReadPhoneStatePermission = value);
     _tv.hasReadPhoneNumbersPermission().then((value) => setReadPhoneNumbersPermission = value);
-    FirebaseMessaging.instance.requestPermission().then((value) => setBackgroundPermission = value.authorizationStatus == AuthorizationStatus.authorized);
+    if (Firebase.apps.isNotEmpty) {
+      FirebaseMessaging.instance.requestPermission().then((value) => setBackgroundPermission = value.authorizationStatus == AuthorizationStatus.authorized);
+    }
     _tv.hasCallPhonePermission().then((value) => setCallPhonePermission = value);
     _tv.hasRegisteredPhoneAccount().then((value) => setPhoneAccountRegistered = value);
     _tv.isPhoneAccountEnabled().then((value) => setIsPhoneAccountEnabled = value);
@@ -266,22 +271,26 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
                 icon: Icons.mic,
                 title: "Microphone",
                 granted: _hasMicPermission,
-                onRequestPermission: () => _tv.requestMicAccess(),
-              ),
-
-              PermissionTile(
-                icon: Icons.notifications,
-                title: "Notifications",
-                granted: _hasBackgroundPermissions,
                 onRequestPermission: () async {
-                  await FirebaseMessaging.instance.requestPermission();
-                  final settings = await FirebaseMessaging.instance.getNotificationSettings();
-                  setBackgroundPermission = settings.authorizationStatus == AuthorizationStatus.authorized;
+                  await _tv.requestMicAccess();
+                  setMicPermission = await _tv.hasMicAccess();
                 },
               ),
 
+              if (Firebase.apps.isNotEmpty)
+                PermissionTile(
+                  icon: Icons.notifications,
+                  title: "Notifications",
+                  granted: _hasBackgroundPermissions,
+                  onRequestPermission: () async {
+                    await FirebaseMessaging.instance.requestPermission();
+                    final settings = await FirebaseMessaging.instance.getNotificationSettings();
+                    setBackgroundPermission = settings.authorizationStatus == AuthorizationStatus.authorized;
+                  },
+                ),
+
               // if android
-              if (Platform.isAndroid)
+              if (!kIsWeb && Platform.isAndroid)
                 PermissionTile(
                   icon: Icons.phone,
                   title: "Read Phone State",
@@ -293,7 +302,7 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
                 ),
 
               // if android
-              if (Platform.isAndroid)
+              if (!kIsWeb && Platform.isAndroid)
                 PermissionTile(
                   icon: Icons.phone,
                   title: "Read Phone Numbers",
@@ -305,7 +314,7 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
                 ),
 
               // if android
-              if (Platform.isAndroid)
+              if (!kIsWeb && Platform.isAndroid)
                 PermissionTile(
                   icon: Icons.call_made,
                   title: "Call Phone",
@@ -317,7 +326,7 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
                 ),
 
               // if android
-              if (Platform.isAndroid)
+              if (!kIsWeb && Platform.isAndroid)
                 PermissionTile(
                   icon: Icons.phonelink_setup,
                   title: "Phone Account",
@@ -329,7 +338,7 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
                 ),
 
               // if android
-              if (Platform.isAndroid)
+              if (!kIsWeb && Platform.isAndroid)
                 ListTile(
                   enabled: _hasRegisteredPhoneAccount,
                   dense: true,
@@ -365,4 +374,4 @@ class _PermissionsBlockState extends State<PermissionsBlock> with WidgetsBinding
     _subscription.cancel();
     super.dispose();
   }
-}
+}
diff --git a/example/service-worker/twilio-sw.js b/example/service-worker/twilio-sw.js
@@ -1,6 +1,6 @@
-importScripts('notifications.js')
+// Twilio Voice Service Worker
 
-// create service worker
+importScripts('notifications.js')
 
 const tag = 'Service Worker';
 
@@ -11,45 +11,10 @@ const _error = (...message) => {
     console.error(`[ ${tag} ]`, ...message);
 };
 
-_log('Started');
-
-self.addEventListener('activate', (event) => {
-    _log('activate event', event);
-    // self.clients.claim();
-   event.waitUntil(self.clients.claim()); // Become available to all pages
-    _log('activated!');
-
-    // Optional: Get a list of all the current open windows/tabs under
-    // our service worker's control, and force them to reload.
-    // This can "unbreak" any open windows/tabs as soon as the new
-    // service worker activates, rather than users having to manually reload.
-    // source: https://stackoverflow.com/a/38980776/4628115
-    // self.clients.matchAll({type: 'window'}).then(windowClients => {
-    //   windowClients.forEach(windowClient => {
-    //     windowClient.navigate(windowClient.url);
-    //   });
-    // });
-});
-
-// disabled due to Chrome no-op warning
-//self.addEventListener('fetch', (event) => {
-//   _log(`fetch event [${event.request.url}]`, event);
-//});
-
-self.addEventListener('install', (event) => {
-    _log('install event, skip waiting', event);
-    // self.skipWaiting()
-   event.waitUntil(self.skipWaiting()); // Activate worker immediately
-
-    // // Skip over the "waiting" lifecycle state, to ensure that our
-    // // new service worker is activated immediately, even if there's
-    // // another tab open controlled by our older service worker code.
-    // // source: https://stackoverflow.com/a/38980776/4628115
-    // self.skipWaiting();
-});
+_log('Twilio Voice service-worker started');
 
 self.addEventListener('message', (event) => {
-    handleMessage(event);
+    _handleMessage(event);
 });
 
 self.addEventListener('messageerror', (event) => {
@@ -59,42 +24,38 @@ self.addEventListener('messageerror', (event) => {
 self.addEventListener('notificationclick', (event) => {
     _log(`notificationclick event [${event.action}]`, event);
     event.notification.close();
-    handleNotificationEvent(event.action, event.notification, event.notification.tag);
+    _handleNotificationEvent(event.action, event.notification, event.notification.tag);
 });
 
 self.addEventListener('notificationclose', (event) => {
     _log('notificationclose event', event);
     event.notification.close();
-    handleNotificationEvent(null, event.data, event.tag);
-});
-
-self.addEventListener('push', (event) => {
-    _log('push event', event);
+    _handleNotificationEvent(null, event.data, event.tag);
 });
 
-function handleNotificationEvent(action, payload, tag) {
+function _handleNotificationEvent(action, payload, tag) {
     const message = {
         tag: tag,
     }
     switch (action) {
         case 'answer': {
-            focusClientWindow();
-            sendToClient(action, message);
+            _focusClientWindow();
+            _sendToClient(action, message);
             break;
         }
         case 'hangup':
         case 'reject': {
-            sendToClient(action, message);
+            _sendToClient(action, message);
             break;
         }
         default: {
-            focusClientWindow();
+            _focusClientWindow();
             break;
         }
     }
 }
 
-function sendToClient(action, payload) {
+function _sendToClient(action, payload) {
     const message = {
         action: action,
         payload: payload
@@ -106,7 +67,7 @@ function sendToClient(action, payload) {
     });
 }
 
-function focusClientWindow() {
+function _focusClientWindow() {
     self.clients.matchAll({
         type: "window",
     }).then((clients) => {
@@ -119,7 +80,7 @@ function focusClientWindow() {
     });
 }
 
-function handleMessage(event) {
+function _handleMessage(event) {
     if (!event) {
         _error('No event');
         return;
diff --git a/example/web/index.html b/example/web/index.html
diff --git a/example/web/load-sw.js b/example/web/load-sw.js

-Original file line number
+Diff line change
 *.lock
 *.log
++
 +.firebase/