npm - @regulaforensics/ionic-native-document-reader - Versions diffs - 6.6.0 → 6.7.0 - Mend

@regulaforensics/ionic-native-document-reader 6.6.0 → 6.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/reactExample/public/assets/shapes.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

package/reactExample/public/index.html ADDED Viewed

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
+    <base href="/" />
+    <meta name="color-scheme" content="light dark" />
+    <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="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+<body>
+    <div class="rfidUI" style="text-align: center; background-color: #F5FCFF; height: 100%; width:100%; display: none;">
+        <div style="position: absolute; top: 50%; left: 50%; width:100%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); ">
+            <p class="rfidUIHeader">Reading RFID</p>
+            <p class="rfidDescription">Place your phone on top of the NFC tag</p>
+            <progress class="rfidProgress" value="0" max="100"></progress>
+            <br><br><br>
+            <button class="cancelButton">X</button>
+        </div>
+    </div>
+    <div class="mainUI" style="text-align: center;background-color: #F5FCFF;height: 100%;">
+        <div style="align-items: center; text-align: center; width: 100%">
+            <br>
+            <p class="status">Ready</p>
+        </div>
+        <div style=" align-items:center; text-align: center;display: inline-block;">
+            <p style="margin-bottom: 5px">Portrait</p>
+            <img style="height: 133px; width: 100px" src="assets/img/portrait.png" resizeMode="contain" class="portraitImage" />
+        </div>
+        <div style="align-items: center; text-align: center; display: inline-block;">
+            <p style="margin-bottom: 5px">Document</p>
+            <img style="height: 133px;" src="assets/img/id.png" resizeMode="contain" class="documentImage" />
+        </div>
+        <br><br>
+        <div class="scenariosRadioGroup" style="position: absolute; bottom: 100px; top: 230px; left: 75px; padding: 5px; text-align:left; overflow: auto">
+        </div>
+        <div style="position: absolute; bottom: 10px; width: 100%; text-align: center; align-items: center">
+            <div id="rfidDiv" style="flex-direction: row; padding: 5px">
+                <input type="checkbox" class="rfidCheckbox" name="rfid" disabled=true></input><span class="rfidCheckboxText" style="color: lightgrey"> Process rfid reading(unavailable)</span><br>
+            </div>
+            <div style="flex-direction: row; padding: 10px">
+                <button class="showScannerButton" style="margin-right: 20px">scan doc</button>
+                <button class="showImagePicker" style="margin-left: 20px">scan image</button>
+            </div>
+        </div>
+    </div>
+    <style type="text/css">
+        button {
+            width: 40%;
+            -moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
+            -webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
+            box-shadow: inset 0px -3px 7px 0px #29bbff;
+            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
+            background: -moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+            background: -webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+            background: -o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+            background: -ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+            background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
+            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa', GradientType=0);
+            background-color: #2dabf9;
+            -moz-border-radius: 3px;
+            -webkit-border-radius: 3px;
+            border-radius: 3px;
+            border: 1px solid #0b0e07;
+            display: inline-block;
+            cursor: pointer;
+            color: #ffffff;
+            font-family: Arial;
+            font-size: 15px;
+            padding: 9px 23px;
+            text-decoration: none;
+            text-shadow: 0px 1px 0px #263666;
+        }
+        button:hover {
+            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
+            background: -moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+            background: -webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+            background: -o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+            background: -ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+            background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
+            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9', GradientType=0);
+            background-color: #0688fa;
+        }
+        button:active {
+            position: relative;
+            top: 1px;
+        }
+        div {
+            color: black;
+        }
+    </style>
+</body>
+</html>

package/reactExample/public/manifest.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "short_name": "Ionic App",
+  "name": "My Ionic App",
+  "icons": [
+    {
+      "src": "assets/icon/favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "assets/icon/icon.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff"
+}

package/reactExample/src/App.test.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+test('renders without crashing', () => {
+  const { baseElement } = render(<App />);
+  expect(baseElement).toBeDefined();
+});

package/reactExample/src/App.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import { Redirect, Route } from 'react-router-dom';
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import Home from './pages/Home';
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+/* Theme variables */
+import './theme/variables.css';
+setupIonicReact();
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route exact path="/home">
+          <Home />
+        </Route>
+        <Route exact path="/">
+          <Redirect to="/home" />
+        </Route>
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+);
+export default App;

package/reactExample/src/assets/img/id.png ADDED Viewed

Binary file

package/reactExample/src/assets/img/portrait.png ADDED Viewed

Binary file

package/reactExample/src/index.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import reportWebVitals from './reportWebVitals';
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://cra.link/PWA
+serviceWorkerRegistration.unregister();
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/reactExample/src/pages/Home.tsx ADDED Viewed

@@ -0,0 +1,340 @@
+import { IonPage, isPlatform } from '@ionic/react';
+import { DocumentReader, DocumentReaderScenario, Enum, DocumentReaderCompletion, DocumentReaderResults, DocumentReaderNotification } from '@regulaforensics/ionic-native-document-reader';
+import React from "react";
+import { DirectoryEntry, Entry, File, FileEntry, IFile } from '@awesome-cordova-plugins/file'
+import { AndroidPermissions } from "@awesome-cordova-plugins/android-permissions"
+import { ImagePicker } from "@awesome-cordova-plugins/image-picker"
+var doRfid: boolean = false
+var isReadingRfidCustomUi: boolean = false
+var isReadingRfid: boolean = false
+var rfidUIHeader: string = "Reading RFID"
+var rfidUIHeaderColor: string = "black"
+var rfidDescription: string = "Place your phone on top of the NFC tag"
+var rfidProgress: number = -1
+const status = document.querySelector('.status') as HTMLElement
+const portraitImage = document.querySelector('.portraitImage') as any
+const documentImage = document.querySelector('.documentImage') as any
+const showScannerButton = document.querySelector('.showScannerButton') as HTMLElement
+const showImagePicker = document.querySelector('.showImagePicker') as HTMLElement
+const scenariosRadioGroup = document.querySelector('.scenariosRadioGroup') as HTMLElement
+const rfidCheckbox = document.querySelector('.rfidCheckbox') as HTMLIonCheckboxElement
+const rfidCheckboxText = document.querySelector('.rfidCheckboxText') as HTMLElement
+const rfidUI = document.querySelector('.rfidUI') as HTMLElement
+const mainUI = document.querySelector('.mainUI') as HTMLElement
+const rfidUIHeaderRef = document.querySelector('.rfidUIHeader') as HTMLElement
+const rfidDescriptionRef = document.querySelector('.rfidDescription') as HTMLElement
+const rfidProgressRef = document.querySelector('.rfidProgress') as HTMLIonProgressBarElement
+const cancelButtonRef = document.querySelector('.cancelButton') as HTMLElement
+var error1 = (e: any) => {
+  console.log(e)
+  status.innerHTML = e
+  status.style.backgroundColor = "red"
+}
+var error2 = (e: any) => {
+  e = JSON.stringify(e, undefined, 2)
+  console.log(e)
+  alert(e)
+}
+cancelButtonRef.addEventListener("click", stopRfid)
+updateUI()
+status.innerHTML = "loading......"
+status.style.backgroundColor = "grey"
+document.addEventListener("deviceready", onDeviceReady, false);
+function onDeviceReady() {
+  readFile("public/assets", "regula.license", (license: any) => {
+    DocumentReader.prepareDatabase("Full").subscribe((response: string) => {
+      if (response != "database prepared")
+        status.innerHTML = "Downloading database: " + response + "%"
+      else {
+        status.innerHTML = "Loading......"
+        DocumentReader.initializeReader({
+          license: license,
+          delayedNNLoad: true
+        }).then((_r: string) => onInitialized()).catch(error1)
+      }
+    })
+  })
+}
+function addCertificates() {
+  File.resolveDirectoryUrl(File.applicationDirectory + "certificates").then((dir: DirectoryEntry) => {
+    dir.createReader().readEntries((entries: Entry[]) => {
+      for (let i = 0; i < entries.length; i++) {
+        if (entries[i].isFile) {
+          var findExt = entries[i].name.split('.')
+          var pkdResourceType = 0
+          if (findExt.length > 0)
+            pkdResourceType = Enum.PKDResourceType.getType(findExt[findExt.length - 1].toLowerCase())
+          readFile("certificates", entries[i].name, (file: any, resType: any) => {
+            resType = resType[0]
+            var certificates = []
+            certificates.push({
+              'binaryData': file,
+              'resourceType': resType
+            })
+            DocumentReader.addPKDCertificates(certificates).then((_r: string) => console.log("certificate added")).catch(error1)
+          }, pkdResourceType)
+        }
+      }
+    })
+  })
+}
+function readFile(dirPath: string, fileName: string, callback: any, ...items: any) {
+  File.resolveDirectoryUrl(File.applicationDirectory + dirPath).then((dir: DirectoryEntry) => File.getFile(dir, fileName, {})).then((fileEntry: FileEntry) => fileEntry.file((file: IFile) => {
+    var reader = new FileReader()
+    reader.onloadend = (evt) => {
+      var data = reader.result as String
+      data = data.substring(data.indexOf(',') + 1)
+      callback(data, items)
+    }
+    reader.readAsDataURL(file)
+  }))
+}
+function updateUI() {
+  mainUI.style.display = isReadingRfidCustomUi ? "none" : ""
+  rfidUI.style.display = isReadingRfidCustomUi ? "" : "none"
+  rfidUIHeaderRef.innerHTML = rfidUIHeader
+  rfidUIHeaderRef.style.color = rfidUIHeaderColor
+  rfidDescriptionRef.innerHTML = rfidDescription
+  rfidProgressRef.value = rfidProgress
+}
+function stopRfid() {
+  hideRfidUI()
+  DocumentReader.stopRFIDReader()
+}
+function handleCompletion(completion?: DocumentReaderCompletion) {
+  if (completion == undefined) return;
+  if (isReadingRfidCustomUi && (completion.action === Enum.DocReaderAction.CANCEL || completion.action === Enum.DocReaderAction.ERROR))
+    hideRfidUI()
+  if (isReadingRfidCustomUi && completion.action === Enum.DocReaderAction.NOTIFICATION)
+    updateRfidUI(completion.results!.documentReaderNotification!)
+  if (completion.action === Enum.DocReaderAction.COMPLETE)
+    if (isReadingRfidCustomUi) {
+      if (completion.results!.rfidResult !== 1)
+        restartRfidUI()
+      else {
+        hideRfidUI()
+        displayResults(completion.results!)
+      }
+    }
+    else
+      handleResults(completion.results!)
+  if (completion.action === Enum.DocReaderAction.TIMEOUT)
+    handleResults(completion.results!)
+}
+function showRfidUI() {
+  // show animation
+  isReadingRfidCustomUi = true
+  updateUI()
+}
+function hideRfidUI() {
+  // show animation
+  restartRfidUI()
+  isReadingRfidCustomUi = false
+  rfidUIHeader = "Reading RFID"
+  rfidUIHeaderColor = "black"
+  updateUI()
+}
+function restartRfidUI() {
+  rfidUIHeaderColor = "red"
+  rfidUIHeader = "Failed!"
+  rfidDescription = "Place your phone on top of the NFC tag"
+  rfidProgress = -1
+  updateUI()
+}
+function updateRfidUI(notification: DocumentReaderNotification) {
+  if (notification.code === Enum.eRFID_NotificationCodes.RFID_NOTIFICATION_PCSC_READING_DATAGROUP)
+    rfidDescription = Enum.eRFID_DataFile_Type.getTranslation(notification.dataFileType!)
+  rfidUIHeader = "Reading RFID"
+  rfidUIHeaderColor = "black"
+  rfidProgress = notification.value!
+  updateUI()
+  if (isPlatform("ios"))
+    DocumentReader.setRfidSessionStatus(rfidDescription + "\n" + notification.value + "%")
+}
+function customRFID() {
+  showRfidUI()
+  DocumentReader.readRFID().subscribe((m: string) =>
+    handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))))
+}
+function usualRFID() {
+  isReadingRfid = true
+  var notification = "rfidNotificationCompletionEvent"
+  var paCert = "paCertificateCompletionEvent"
+  var taCert = "taCertificateCompletionEvent"
+  var taSig = "taSignatureCompletionEvent"
+  DocumentReader.startRFIDReader().subscribe((m: string) => {
+    if (m.substring(0, notification.length) === notification) {
+      m = m.substring(notification.length, m.length)
+      console.log(notification + ": " + m)
+    } else if (m.substring(0, paCert.length) === paCert) {
+      m = m.substring(paCert.length, m.length)
+      console.log(paCert + ": " + m)
+    } else if (m.substring(0, taCert.length) === taCert) {
+      m = m.substring(taCert.length, m.length)
+      console.log(taCert + ": " + m)
+    } else if (m.substring(0, taSig.length) === taSig) {
+      m = m.substring(taSig.length, m.length)
+      console.log(taSig + ": " + m)
+    } else
+      handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m)))
+  })
+}
+function onInitialized() {
+  status.innerHTML = "Ready"
+  status.style.backgroundColor = "green"
+  showScannerButton.addEventListener("click", scan)
+  if (isPlatform("android"))
+    showImagePicker.addEventListener("click", recognizeAndroid)
+  if (isPlatform("ios"))
+    showImagePicker.addEventListener("click", recognize)
+  DocumentReader.setConfig({
+    functionality: {
+      videoCaptureMotionControl: true,
+      showCaptureButton: true
+    },
+    customization: {
+      showResultStatusMessages: true,
+      showStatusMessages: true
+    },
+    processParams: {
+      scenario: "Mrz",
+      doRfid: false
+    },
+  })
+  DocumentReader.getAvailableScenarios().then((sc: string) =>
+    DocumentReader.isRFIDAvailableForUse().then((canRfid: boolean) =>
+      postInitialize(JSON.parse(sc), canRfid)))
+  DocumentReader.setRfidDelegate(Enum.RFIDDelegate.NO_PA)
+  // addCertificates()
+}
+function postInitialize(scenarios: Array<any>, canRfid: boolean) {
+  var inputs = []
+  for (let index of scenarios) {
+    var input = document.createElement("input")
+    inputs.push(input)
+    input.type = "radio"
+    input.name = "scenario"
+    input.value = (DocumentReaderScenario.fromJson(typeof index === "string" ? JSON.parse(index) : index)!.name)!
+    if (index == 0)
+      input.checked = true
+    input.onclick = () => DocumentReader.setConfig({ processParams: { scenario: DocumentReaderScenario.fromJson(typeof index === "string" ? JSON.parse(index) : index)!.name } })
+    input.style.display = "inline-block"
+  }
+  for (let input of inputs) {
+    scenariosRadioGroup.appendChild(input)
+    var label = document.createElement("span")
+    label.innerHTML = input.value
+    label.style.display = "inline-block"
+    label.style.width = "200px"
+    label.onclick = () => input.click()
+    scenariosRadioGroup.appendChild(label)
+    scenariosRadioGroup.appendChild(document.createElement("br"))
+  }
+  if (canRfid) {
+    rfidCheckbox.disabled = false
+    rfidCheckboxText.style.color = "black"
+    rfidCheckboxText.innerHTML = "Process rfid reading"
+    rfidCheckbox.onclick = () => doRfid = !doRfid
+  }
+}
+function handleResults(results: DocumentReaderResults) {
+  clearResults()
+  if (doRfid && !isReadingRfid && results != null && results.chipPage != 0) {
+    // customRFID()
+    usualRFID()
+  } else {
+    isReadingRfid = false
+    displayResults(results)
+  }
+}
+function displayResults(results: DocumentReaderResults) {
+  if (results == null) return
+  DocumentReader.textFieldValueByType(results, Enum.eVisualFieldType.FT_SURNAME_AND_GIVEN_NAMES).then((value: string | undefined) => {
+    if (value != null) {
+      status.innerHTML = value
+      status.style.backgroundColor = "green"
+    }
+  })
+  DocumentReader.graphicFieldImageByType(results, Enum.eGraphicFieldType.GF_DOCUMENT_IMAGE).then((value: string | undefined) => {
+    if (value != null)
+      documentImage.src = "data:image/png;base64," + value
+  })
+  DocumentReader.graphicFieldImageByType(results, Enum.eGraphicFieldType.GF_PORTRAIT).then((value: string | undefined) => {
+    if (value != null)
+      portraitImage.src = "data:image/png;base64," + value
+  })
+}
+function clearResults() {
+  status.innerHTML = "Ready"
+  documentImage.src = "assets/img/id.png"
+  portraitImage.src = "assets/img/portrait.png"
+}
+function scan() {
+  DocumentReader.showScanner().subscribe((m: string) =>
+    handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))))
+}
+function recognize() {
+  ImagePicker.getPictures({ maximumImagesCount: 1 }).then((results: any) => {
+    if (results.length > 0) {
+      clearResults()
+      status.innerHTML = "copying image......"
+      status.style.backgroundColor = "grey"
+    }
+    File.readAsDataURL((isPlatform("ios") ? "file://" : "") + results[0].substring(0, (results[0] as string).lastIndexOf("/")), results[0].substring((results[0] as string).lastIndexOf("/") + 1)).then((file => {
+      status.innerHTML = "processing image......"
+      status.style.backgroundColor = "grey"
+      let fileString = (file as string)
+      DocumentReader.recognizeImage(fileString.substring(fileString.indexOf(",") + 1)).subscribe((m: string) =>
+        handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))))
+    })).catch(error2)
+  }, error2)
+}
+function recognizeAndroid() {
+  AndroidPermissions.checkPermission(AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE).then((result: any) => {
+    if (result.hasPermission)
+      recognize()
+    else
+      AndroidPermissions.requestPermission(AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE).then((result: any) => {
+        if (result.hasPermission)
+          recognize()
+        else
+          console.log("storage permission denied")
+      }, (err: any) => console.log(JSON.stringify(err)))
+  }, (err: any) => console.log(JSON.stringify(err)))
+}
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+    </IonPage>
+  );
+};
+export default Home;

package/reactExample/src/react-app-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="react-scripts" />

package/reactExample/src/reportWebVitals.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+export default reportWebVitals;

package/reactExample/src/service-worker.ts ADDED Viewed

@@ -0,0 +1,80 @@
+/// <reference lib="webworker" />
+/* eslint-disable no-restricted-globals */
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+// You can also remove this file if you'd prefer not to use a
+// service worker, and the Workbox build step will be skipped.
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
+declare const self: ServiceWorkerGlobalScope;
+clientsClaim();
+// Precache all of the assets generated by your build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in your service worker file,
+// even if you decide not to use precaching. See https://cra.link/PWA
+precacheAndRoute(self.__WB_MANIFEST);
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with your index.html shell. Learn more at
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+  // Return false to exempt requests from being fulfilled by index.html.
+  ({ request, url }: { request: Request; url: URL }) => {
+    // If this isn't a navigation, skip.
+    if (request.mode !== 'navigate') {
+      return false;
+    }
+    // If this is a URL that starts with /_, skip.
+    if (url.pathname.startsWith('/_')) {
+      return false;
+    }
+    // If this looks like a URL for a resource, because it contains
+    // a file extension, skip.
+    if (url.pathname.match(fileExtensionRegexp)) {
+      return false;
+    }
+    // Return true to signal that we want to use the handler.
+    return true;
+  },
+  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+);
+// An example runtime caching route for requests that aren't handled by the
+// precache, in this case same-origin .png requests like those from in public/
+registerRoute(
+  // Add in any other file extensions or routing criteria as needed.
+  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+  // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  new StaleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      // Ensure that once this runtime cache reaches a maximum size the
+      // least-recently used images are removed.
+      new ExpirationPlugin({ maxEntries: 50 }),
+    ],
+  })
+);
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+// Any other custom service worker logic can go here.