-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhelloworld-pwa.html
113 lines (100 loc) · 4.95 KB
/
helloworld-pwa.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader in a PWA application.">
<meta name="keywords" content="read barcode from camera in PWA">
<title>Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera)</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/eruda.min.js"></script>
<link rel="manifest" href="./helloworld-pwa.webmanifest">
</head>
<body>
<h1 style="font-size: 1.5em;">Hello World for PWA</h1>
<button id='readBarcode'>Read Barcode via Camera</button>
<button class="add-button">Add to home screen</button>
<script>
eruda.init();
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// 稍后再触发此事件
e.preventDefault();
deferredPrompt = e;
// 更新 UI 以提醒用户可以将 App 安装到桌面
addBtn.style.display = 'block';
console.log(deferredPrompt)
addBtn.addEventListener('click', (e) => {
// 隐藏显示 A2HS 按钮的界面
addBtn.style.display = 'none';
// 显示安装提示
deferredPrompt.prompt();
// 等待用户反馈
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
/** LICENSE ALERT - README
* The library requires a license to work, you use the API organizationID to tell the program where to fetch your license.
* If the Organizaion ID is not specified, a 7-day (public) trial license will be used by default which is the case in this sample.
* Note that network connection is required for this license to work.
*/
/* When using your own license, uncomment the following line and specify your Organization ID. */
// Dynamsoft.DBR.organizationID = "YOUR-ORGANIZATION-ID";
/* If you don't have a license yet, you can request a trial on this page: https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=samples */
/* For more information, please refer to https://www.dynamsoft.com/license-server/docs/about/licensefaq.html?ver=latest#how-to-use-a-trackable-license. */
/* The API "productKeys" is an alternative way to license the library, the major difference is that it does not require a network. Contact [email protected] for more information. */
// Dynamsoft.DBR.productKeys = "YOUR-PRODUCT-KEY";
/** LICENSE ALERT - THE END */
let pScanner = null;
let latestResult = null;
document.getElementById('readBarcode').onclick = async function() {
Notification.requestPermission().then((result) => {
if (result === 'granted') {
startNotificationLoop();
}
});
try {
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
scanner.onFrameRead = results => {
console.log("Barcodes on one frame:");
for (let result of results) {
console.log(result.barcodeFormatString + ": " + result.barcodeText);
}
};
scanner.onUnduplicatedRead = (txt, result) => {
latestResult = txt;
console.log("Unique Code Found: " + result);
}
await scanner.show();
} catch (ex) {
alert(ex.message);
throw ex;
}
};
function startNotificationLoop() {
if (latestResult != null) {
const title = "New Barcode Found!";
const notifBody = `Barcode Text: ${latestResult}.`;
const options = {
body: notifBody,
};
new Notification(title, options);
latestResult = null;
}
setTimeout(startNotificationLoop, 100);
}
if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('./service-worker.js');
};
</script>
</body>
</html>