sonic-widget 2.2.4 → 2.2.5

package/README.md

@@ -16,7 +16,7 @@
 Use this script tag to get access to the widget:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.2.4/dist/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.2.5/dist/index.min.js"></script>
 ```
 
 or 
@@ -43,7 +43,7 @@ and adding path in `angular.json`
 2. Use this script tag to get access to the widget at initial html page:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.2.4/dist/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.2.5/dist/index.min.js"></script>
 ```
 
 or 
@@ -107,6 +107,117 @@ ngOnInit(): void {
 }
 ```
 
+7. Add service worker for widget to protect the multiple calls for tensorflow. So, it will have cache to reuse it. Here, I'm adding `service-worker.js` file at `src/assets` folder. So, below steps will be based on this file path.
+
+```javascript
+const CACHE_NAME = 'demo-app-ai-tensorflow-models-cache-v1';
+const urlsToCache = [
+    // coco ssd
+    'https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/model.json',
+
+    // document model
+    "https://teachablemachine.withgoogle.com/models/ikFAYzyyu/model.json",
+    "https://teachablemachine.withgoogle.com/models/ikFAYzyyu/metadata.json",
+
+    // mask model 
+    "https://teachablemachine.withgoogle.com/models/_08Yck2dy/model.json",
+    "https://teachablemachine.withgoogle.com/models/_08Yck2dy/metadata.json",
+
+    // blazeface
+    'https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1/model.json?tfjs-format=file',
+     
+    // handpose model
+    "https://tfhub.dev/mediapipe/tfjs-model/handpose_3d/detector/full/1/model.json?tfjs-format=file",
+    "https://tfhub.dev/mediapipe/tfjs-model/handpose_3d/landmark/full/1/model.json?tfjs-format=file"
+    // Add more model files if necessary
+  ]
+
+self.addEventListener('install', function(event) {
+  // Perform install steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+    const request = event.request;
+  
+    // Skip caching for requests from browser extensions
+    if (request.url.startsWith('chrome-extension://')) {
+      return;
+    }
+  
+    event.respondWith(
+      caches.match(request)
+        .then(function(response) {
+          // Cache hit - return response
+          if (response) {
+            return response;
+          }
+  
+          // Clone the request
+          const fetchRequest = request.clone();
+  
+          return fetch(fetchRequest).then(
+            function(response) {
+              // Check if we received a valid response
+              if(!response || response.status !== 200 || response.type !== 'basic') {
+                return response;
+              }
+  
+              // Clone the response
+              const responseToCache = response.clone();
+              // Save the response for future matching
+              caches.open(CACHE_NAME)
+                .then(function(cache) {
+                  cache.put(request, responseToCache);
+                });
+  
+              return response;
+            }
+          );
+        })
+    );
+});
+```
+8. Use this script tag to get access to the service worker at initial html page:
+
+```html
+<script src="src/assets/service-worker.js"></script>
+```
+
+or 
+
+it can be added in `angular.json` by installing the npm package
+
+```json
+"scripts": [ ..., "src/assets/service-worker.js" ]
+```
+
+9. Register the service worker at your required place:
+```ts
+	ngAfterViewInit(): void {
+		if ('serviceWorker' in navigator) {
+			window.addEventListener('load', () => {
+				navigator.serviceWorker.register('/demo-app/assets/service-worker.js').then(
+					(registration) => {
+						console.log(
+							'ServiceWorker registered with scope: ',
+							registration.scope
+						);
+					},
+					(err) => {
+						console.error('ServiceWorker registration failed: ', err);
+					}
+				);
+			});
+		}
+	}
+```
+
 &nbsp;
 
 ## Implementation Details for Vanilla JavaScript:
@@ -130,7 +241,7 @@ ngOnInit(): void {
 4. Add a Script tag to the head tag or body tag. And use the latest version.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.2.4/dist/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.2.5/dist/index.min.js"></script>
 ```
 
 5. Next, add the script tag at a necessary place. But add below the widget script.
@@ -169,7 +280,6 @@ ngOnInit(): void {
 _Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id **`xxxx`** button and add it to the event listener. It checks if the button is clicked and sends the config object data to the **`sonic`** module.
 **`sonic.SonicWidget(config)`**_
 
-
 _You can get the logs with **`onMessage`** for all actions and stages.
 Check with **`data.code`**_