Skip to content

Commit 83fbf2c

Browse files
Cube-JCube-J
committed
update pwa
1 parent 954e957 commit 83fbf2c

3 files changed

Lines changed: 132 additions & 55 deletions

File tree

‎hello-world/10.read-video-pwa/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# JavaScript Hello World Sample - PWA
1+
# Hello World Sample for PWA
22

33
[PWA](https://web.dev/progressive-web-apps/) is short for Progressive Web Apps which stand for web applications that have been designed to behave like platform-specific (native) applications. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a PWA application.
44

@@ -129,7 +129,7 @@ For more information, refer to [Making PWAs work offline with Service workers](h
129129
130130
A web manifest file contains a list of information about a website in a JSON format. This information is used to present the web app correctly for installation on a device.
131131
132-
In our example, we first create a file "helloworld-pwa.webmanifest" with the following content:
132+
In our example, we first create a file "helloworld-pwa.json" with the following content:
133133
134134
```json
135135
{
@@ -161,7 +161,7 @@ In our example, we first create a file "helloworld-pwa.webmanifest" with the fol
161161
Then we include the file in the <head> block of the helloworld-pwa.html file:
162162

163163
```html
164-
<link rel="manifest" href="helloworld-pwa.webmanifest">
164+
<link rel="manifest" href="helloworld-pwa.json">
165165
```
166166

167167
For compatibility on safari, we need add some `meta` in `<head>`:

‎hello-world/pwa/README.md‎

Lines changed: 124 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
# JavaScript Hello World Sample - PWA
1+
# Hello World Sample for PWA
22

33
[PWA](https://web.dev/progressive-web-apps/) is short for Progressive Web Apps which stand for web applications that have been designed to behave like platform-specific (native) applications. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a PWA application.
44

55
## Official Sample
66

7-
* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html">Hello World in PWA - Demo</a>
8-
* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/10.read-video-pwa">Hello World in PWA - Source Code</a>
7+
* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html">Hello World in PWA - Demo</a>
8+
* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/pwa">Hello World in PWA - Source Code</a>
99

1010
## Preparation
1111

@@ -20,41 +20,93 @@ First, create a file with the name "helloworld-pwa.html" and fill it with the fo
2020
<head>
2121
<meta charset="utf-8">
2222
<meta name="viewport" content="width=device-width,initial-scale=1.0">
23-
<title>Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera)</title>
23+
<title>Hello World</title>
2424
</head>
2525

2626
<body>
27-
<h1 style="font-size: 1.5em;">Hello World for PWA</h1>
28-
Loading...
29-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script>
30-
<script>
31-
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
32-
(async function() {
33-
try {
34-
const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
35-
scanner.onFrameRead = results => {
36-
console.log("Barcodes on one frame:");
37-
for (let result of results) {
38-
const format = result.barcodeFormatString;
39-
console.log(format + ": " + result.barcodeText);
40-
}
41-
};
42-
scanner.onUniqueRead = (txt, result) => {
43-
alert(txt);
44-
console.log("Unique Code Found: ", result);
45-
}
46-
await scanner.show();
47-
} catch (ex) {
48-
let errMsg = ex.message||ex;
49-
console.error(errMsg);
50-
alert(errMsg);
51-
}
52-
})();
53-
54-
if ('serviceWorker' in navigator) {
55-
navigator.serviceWorker.register('./service-worker.js');
27+
<h1>Hello World for PWA</h1>
28+
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
29+
<script>
30+
if (location.protocol === "file:") {
31+
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/".`;
32+
console.warn(message);
33+
alert(message);
34+
}
35+
</script>
36+
<script>
37+
/** LICENSE ALERT - README
38+
* To use the library, you need to first specify a license key using the API "initLicense" as shown below.
39+
*/
40+
41+
Dynamsoft.License.LicenseManager.initLicense(
42+
"DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ=="
43+
);
44+
45+
/**
46+
* 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.
47+
* 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.
48+
* 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.
49+
* LICENSE ALERT - THE END
50+
*/
51+
52+
(async function () {
53+
try {
54+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
55+
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
56+
const cameraEnhancer =
57+
await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
58+
document
59+
.querySelector("#div-ui-container")
60+
.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
61+
62+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
63+
const router =
64+
await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
65+
router.setInput(cameraEnhancer);
66+
67+
// Define a callback for results.
68+
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
69+
resultReceiver.onDecodedBarcodesReceived = (result) => {
70+
for (let item of result.barcodesResultItems) {
71+
console.log(item.text);
72+
alert(item.text);
73+
}
5674
};
57-
</script>
75+
router.addResultReceiver(resultReceiver);
76+
77+
// Filter out unchecked and duplicate results.
78+
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
79+
filter.enableResultCrossVerification(
80+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
81+
true
82+
); // Filter out unchecked barcodes.
83+
// Filter out duplicate barcodes within 3 seconds.
84+
filter.enableResultDeduplication(
85+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
86+
true
87+
);
88+
filter.setDuplicateForgetTime(
89+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
90+
3000
91+
);
92+
await router.addResultFilter(filter);
93+
94+
// Open camera and start scanning single barcode.
95+
await cameraEnhancer.open();
96+
await router.startCapturing("ReadSingleBarcode");
97+
} catch (ex) {
98+
let errMsg;
99+
if (ex.message.includes("network connection error")) {
100+
errMsg =
101+
"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.";
102+
} else {
103+
errMsg = ex.message || ex;
104+
}
105+
console.error(errMsg);
106+
alert(errMsg);
107+
}
108+
})();
109+
</script>
58110
</body>
59111

60112
</html>
@@ -129,7 +181,7 @@ For more information, refer to [Making PWAs work offline with Service workers](h
129181
130182
A web manifest file contains a list of information about a website in a JSON format. This information is used to present the web app correctly for installation on a device.
131183
132-
In our example, we first create a file "helloworld-pwa.webmanifest" with the following content:
184+
In our example, we first create a file "helloworld-pwa.json" with the following content:
133185
134186
```json
135187
{
@@ -161,7 +213,7 @@ In our example, we first create a file "helloworld-pwa.webmanifest" with the fol
161213
Then we include the file in the &lt;head&gt; block of the helloworld-pwa.html file:
162214

163215
```html
164-
<link rel="manifest" href="helloworld-pwa.webmanifest">
216+
<link rel="manifest" href="helloworld-pwa.json">
165217
```
166218

167219
For compatibility on safari, we need add some `meta` in `<head>`:
@@ -184,21 +236,46 @@ For offline use, you need to cache more files.
184236

185237
service-worker.js
186238
```javascript
187-
const dbrVersion = "9.6.31";
188-
const dbrCdn = `https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@${dbrVersion}/dist/`;
239+
const coreResourcesDir =
240+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/",
241+
utilityResourcesDir =
242+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/",
243+
dbrResourcesDir =
244+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/",
245+
dbrResourcesDir =
246+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/",
247+
cvrResourcesDir =
248+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026110217/dist/",
249+
dceResourcesDir =
250+
"https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/";
189251

252+
// Files to cache
253+
const cacheName = "helloworld-pwa";
190254
const appShellFiles = [
191-
'./helloworld-pwa.html',
192-
'./dynamsoft-192x192.png',
193-
'./dynamsoft-512x512.png',
194-
'./helloworld-pwa.json',
195-
`${dbrCdn}dbr.js`,
196-
`${dbrCdn}dbr-${dbrVersion}.full.wasm`,
197-
`${dbrCdn}dbr-${dbrVersion}.full.wasm.js`,
198-
`${dbrCdn}dbr-${dbrVersion}.browser.worker.js`,
255+
"./helloworld-pwa.html",
256+
"./dynamsoft-192x192.png",
257+
"./dynamsoft-512x512.png",
258+
"./helloworld-pwa.json",
259+
`${coreResourcesDir}core.js`,
260+
`${utilityResourcesDir}utility.js`,
261+
`${dbrResourcesDir}dbr.js`,
262+
`${dbrResourcesDir}dbr.wasm`,
263+
`${dbrResourcesDir}DBR-PresetTemplates.json`,
264+
`${cvrResourcesDir}cvr.js`,
265+
`${cvrResourcesDir}cvr.wasm`,
266+
`${cvrResourcesDir}cvr.wasm.js`,
267+
`${cvrResourcesDir}cvr_wasm_glue.js`,
268+
`${cvrResourcesDir}cvr.browser.worker.js`,
269+
`${cvrResourcesDir}dls.license.dialog.html`,
270+
`${cvrResourcesDir}dce.js`,
271+
`${cvrResourcesDir}dce.ui.html`,
199272
];
200273
```
201274

202275
## Summary
203276

204-
In this article we took a look at how you can turn a simple barcode reading page into a PWA that is installable, re-engageable and capable of working offline. To learn more about Progressive web apps, you can click [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
277+
In this article we took a look at how you can turn a simple barcode reading page into a PWA that is installable, re-engageable and capable of working offline. To learn more about Progressive web apps, you can click [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
278+
279+
## Support
280+
281+
If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/).

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,6 @@ <h1>Hello World for PWA</h1>
4848
alert(message);
4949
}
5050
</script>
51-
<script>
52-
if ("serviceWorker" in navigator) {
53-
navigator.serviceWorker.register("./service-worker.js");
54-
}
55-
</script>
5651
<script>
5752
/** LICENSE ALERT - README
5853
* To use the library, you need to first specify a license key using the API "initLicense" as shown below.
@@ -127,5 +122,10 @@ <h1>Hello World for PWA</h1>
127122
}
128123
})();
129124
</script>
125+
<script>
126+
if ("serviceWorker" in navigator) {
127+
navigator.serviceWorker.register("./service-worker.js");
128+
}
129+
</script>
130130
</body>
131131
</html>

0 commit comments

Comments
 (0)