Skip to content

Commit 954e957

Browse files
Cube-JCube-J
committed
update pwa
1 parent 4508bbf commit 954e957

6 files changed

Lines changed: 216 additions & 1 deletion

File tree

‎hello-world/hello-world.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
<title>
1616
Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)
1717
</title>
18-
<!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/dbr.js"></script> -->
1918
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.js"></script>
2019
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.js"></script>
2120
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/dbr.js"></script>

‎hello-world/pwa/dynamsoft-192x192.png‎

6.48 KB
Loading

‎hello-world/pwa/dynamsoft-512x512.png‎

9.71 KB
Loading

‎hello-world/pwa/helloworld-pwa.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6+
<meta
7+
name="description"
8+
content="Read barcodes from camera with Dynamsoft Barcode Reader in a PWA application."
9+
/>
10+
<meta name="keywords" content="barcode, camera, PWA" />
11+
<title>
12+
Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera)
13+
</title>
14+
<link
15+
rel="canonical"
16+
href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html"
17+
/>
18+
<link rel="manifest" href="./helloworld-pwa.json" />
19+
<meta name="theme-color" content="#B12A34" />
20+
<meta name="mobile-web-app-capable" content="yes" />
21+
<meta name="apple-mobile-web-app-title" content="sample for ios" />
22+
<meta name="apple-mobile-web-app-capable" content="yes" />
23+
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
24+
<link
25+
rel="apple-touch-icon"
26+
sizes="192x192"
27+
href="./dynamsoft-192x192.png"
28+
/>
29+
<link
30+
rel="apple-touch-icon"
31+
sizes="512x512"
32+
href="./dynamsoft-512x512.png"
33+
/>
34+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.js"></script>
35+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.js"></script>
36+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/dbr.js"></script>
37+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026110217/dist/cvr.js"></script>
38+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce.js"></script>
39+
</head>
40+
41+
<body>
42+
<h1>Hello World for PWA</h1>
43+
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
44+
<script>
45+
if (location.protocol === "file:") {
46+
const message = `The page is opened via file:// and some SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
47+
console.warn(message);
48+
alert(message);
49+
}
50+
</script>
51+
<script>
52+
if ("serviceWorker" in navigator) {
53+
navigator.serviceWorker.register("./service-worker.js");
54+
}
55+
</script>
56+
<script>
57+
/** LICENSE ALERT - README
58+
* To use the library, you need to first specify a license key using the API "initLicense" as shown below.
59+
*/
60+
61+
Dynamsoft.License.LicenseManager.initLicense(
62+
"DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ=="
63+
);
64+
65+
/**
66+
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
67+
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
68+
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com.
69+
* LICENSE ALERT - THE END
70+
*/
71+
72+
(async function () {
73+
try {
74+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
75+
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
76+
const cameraEnhancer =
77+
await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
78+
document
79+
.querySelector("#div-ui-container")
80+
.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
81+
82+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
83+
const router =
84+
await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
85+
router.setInput(cameraEnhancer);
86+
87+
// Define a callback for results.
88+
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
89+
resultReceiver.onDecodedBarcodesReceived = (result) => {
90+
for (let item of result.barcodesResultItems) {
91+
console.log(item.text);
92+
alert(item.text);
93+
}
94+
};
95+
router.addResultReceiver(resultReceiver);
96+
97+
// Filter out unchecked and duplicate results.
98+
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
99+
filter.enableResultCrossVerification(
100+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
101+
true
102+
); // Filter out unchecked barcodes.
103+
// Filter out duplicate barcodes within 3 seconds.
104+
filter.enableResultDeduplication(
105+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
106+
true
107+
);
108+
filter.setDuplicateForgetTime(
109+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
110+
3000
111+
);
112+
await router.addResultFilter(filter);
113+
114+
// Open camera and start scanning single barcode.
115+
await cameraEnhancer.open();
116+
await router.startCapturing("ReadSingleBarcode");
117+
} catch (ex) {
118+
let errMsg;
119+
if (ex.message.includes("network connection error")) {
120+
errMsg =
121+
"Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
122+
} else {
123+
errMsg = ex.message || ex;
124+
}
125+
console.error(errMsg);
126+
alert(errMsg);
127+
}
128+
})();
129+
</script>
130+
</body>
131+
</html>

‎hello-world/pwa/helloworld-pwa.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "Dynamsoft Barcode Reader Progressive Web App",
3+
"short_name": "DBR-PWA",
4+
"description": "Progressive Web App that reads barcodes from a video input with Dynamsoft Barcode Reader.",
5+
"start_url": "./helloworld-pwa.html",
6+
"scope": ".",
7+
"display": "standalone",
8+
"theme_color": "#B12A34",
9+
"background_color": "#B12A34",
10+
"icons": [
11+
{
12+
"src": "./dynamsoft-512x512.png",
13+
"sizes": "512x512",
14+
"type": "image/png"
15+
},
16+
{
17+
"src": "./dynamsoft-192x192.png",
18+
"sizes": "192x192",
19+
"type": "image/png"
20+
}
21+
]
22+
}

‎hello-world/pwa/service-worker.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const coreResourcesDir =
2+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/",
3+
utilityResourcesDir =
4+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/",
5+
dbrResourcesDir =
6+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/",
7+
dbrResourcesDir =
8+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/",
9+
cvrResourcesDir =
10+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026110217/dist/",
11+
dceResourcesDir =
12+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/";
13+
14+
// Files to cache
15+
const cacheName = "helloworld-pwa";
16+
const appShellFiles = [
17+
"./helloworld-pwa.html",
18+
"./dynamsoft-192x192.png",
19+
"./dynamsoft-512x512.png",
20+
"./helloworld-pwa.json",
21+
`${coreResourcesDir}core.js`,
22+
`${utilityResourcesDir}utility.js`,
23+
`${dbrResourcesDir}dbr.js`,
24+
`${dbrResourcesDir}dbr.wasm`,
25+
`${dbrResourcesDir}DBR-PresetTemplates.json`,
26+
`${cvrResourcesDir}cvr.js`,
27+
`${cvrResourcesDir}cvr.wasm`,
28+
`${cvrResourcesDir}cvr.wasm.js`,
29+
`${cvrResourcesDir}cvr_wasm_glue.js`,
30+
`${cvrResourcesDir}cvr.browser.worker.js`,
31+
`${cvrResourcesDir}dls.license.dialog.html`,
32+
`${cvrResourcesDir}dce.js`,
33+
`${cvrResourcesDir}dce.ui.html`,
34+
];
35+
36+
// Installing Service Worker
37+
self.addEventListener("install", (e) => {
38+
console.log("[Service Worker] Install");
39+
e.waitUntil(
40+
(async () => {
41+
const cache = await caches.open(cacheName);
42+
console.log("[Service Worker] Caching all: app shell and content");
43+
await cache.addAll(appShellFiles);
44+
})()
45+
);
46+
});
47+
48+
self.addEventListener("fetch", (e) => {
49+
e.respondWith(
50+
(async () => {
51+
const r = await caches.match(e.request);
52+
console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
53+
if (r) {
54+
return r;
55+
}
56+
const response = await fetch(e.request);
57+
const cache = await caches.open(cacheName);
58+
console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
59+
if (e.request.method !== "POST") cache.put(e.request, response.clone());
60+
return response;
61+
})()
62+
);
63+
});

0 commit comments

Comments
 (0)