From 1a67e87bbba9d6c67b81d08da87898effd2837e1 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 21 Nov 2023 09:28:22 -0800 Subject: [PATCH 01/13] handle DOM elements for service worker --- lib/browser/polyfills.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/browser/polyfills.ts b/lib/browser/polyfills.ts index b24fa343d..f2d7e6ccd 100644 --- a/lib/browser/polyfills.ts +++ b/lib/browser/polyfills.ts @@ -7,7 +7,7 @@ import buffer from 'buffer'; import process from 'process'; // Workaround to get mqtt-js working with Webpack 5 -if (window) { +if (typeof window !== 'undefined') { (window as any).Buffer = buffer.Buffer; (window as any).process = process; // NodeJS global shim workaround for Angular From e51281fcf7966bf9011fe2f088e7611dedec1ac4 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Mon, 18 Mar 2024 14:21:09 -0700 Subject: [PATCH 02/13] add service worker sample --- samples/browser/service_worker/.eslintrc.cjs | 18 ++++++++++ samples/browser/service_worker/README.md | 15 ++++++++ samples/browser/service_worker/index.html | 12 +++++++ samples/browser/service_worker/package.json | 29 ++++++++++++++++ samples/browser/service_worker/src/App.tsx | 34 +++++++++++++++++++ samples/browser/service_worker/src/main.tsx | 9 +++++ .../service_worker/src/service-worker.ts | 11 ++++++ .../browser/service_worker/src/vite-env.d.ts | 1 + samples/browser/service_worker/tsconfig.json | 25 ++++++++++++++ .../browser/service_worker/tsconfig.node.json | 11 ++++++ .../browser/service_worker/vite.config.sw.ts | 14 ++++++++ samples/browser/service_worker/vite.config.ts | 10 ++++++ 12 files changed, 189 insertions(+) create mode 100644 samples/browser/service_worker/.eslintrc.cjs create mode 100644 samples/browser/service_worker/README.md create mode 100644 samples/browser/service_worker/index.html create mode 100644 samples/browser/service_worker/package.json create mode 100644 samples/browser/service_worker/src/App.tsx create mode 100644 samples/browser/service_worker/src/main.tsx create mode 100644 samples/browser/service_worker/src/service-worker.ts create mode 100644 samples/browser/service_worker/src/vite-env.d.ts create mode 100644 samples/browser/service_worker/tsconfig.json create mode 100644 samples/browser/service_worker/tsconfig.node.json create mode 100644 samples/browser/service_worker/vite.config.sw.ts create mode 100644 samples/browser/service_worker/vite.config.ts diff --git a/samples/browser/service_worker/.eslintrc.cjs b/samples/browser/service_worker/.eslintrc.cjs new file mode 100644 index 000000000..d6c953795 --- /dev/null +++ b/samples/browser/service_worker/.eslintrc.cjs @@ -0,0 +1,18 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/samples/browser/service_worker/README.md b/samples/browser/service_worker/README.md new file mode 100644 index 000000000..b75e2e081 --- /dev/null +++ b/samples/browser/service_worker/README.md @@ -0,0 +1,15 @@ +# AWS IOT Service Worker minimal repro + +## Setup +1. `yarn` +2. `yarn dev`, open another terminal and run `yarn vite -c vite.config.sw.ts build --watch` which will build the service worker in watch mode +3. Load [localhost:3030](http://localhost:3030) +4. Open browser's DevTools/console to see message(s) + +### Important Note On Testing Service Workers +ServiceWorkers are designed to live for a long time and be available offline. As such, the caching policies around them are very aggressive, by design. To help with development it is highly recommended to enable "Update on reload" in Chrome dev tools. + +1. Open DevTools +2. Navigate to the _Application_ tab +3. On the left navigation within Application click _Service workers_ +4. Toggle "Update on reload" diff --git a/samples/browser/service_worker/index.html b/samples/browser/service_worker/index.html new file mode 100644 index 000000000..3ff7e3844 --- /dev/null +++ b/samples/browser/service_worker/index.html @@ -0,0 +1,12 @@ + + + + + + IOT SDK -- Service Worker + + +
+ + + diff --git a/samples/browser/service_worker/package.json b/samples/browser/service_worker/package.json new file mode 100644 index 000000000..eab5bff67 --- /dev/null +++ b/samples/browser/service_worker/package.json @@ -0,0 +1,29 @@ +{ + "name": "iotserviceworker", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "aws-crt": "file:../../../", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.64", + "@types/react-dom": "^18.2.21", + "@typescript-eslint/eslint-plugin": "^7.1.1", + "@typescript-eslint/parser": "^7.1.1", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.57.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "typescript": "^5.2.2", + "vite": "^5.1.6" + } +} diff --git a/samples/browser/service_worker/src/App.tsx b/samples/browser/service_worker/src/App.tsx new file mode 100644 index 000000000..116a2b2c6 --- /dev/null +++ b/samples/browser/service_worker/src/App.tsx @@ -0,0 +1,34 @@ +import { useEffect } from "react"; + +function App() { + useEffect(() => { + let registration: ServiceWorkerRegistration | undefined; + async function registerServiceWorker() { + // Register service worker + navigator.serviceWorker.register("/service-worker.js"); + + // Get registration + registration = await navigator.serviceWorker.ready; + const worker = registration.active; + if (worker) { + worker.postMessage( + "This message will trigger the 'message' in the service worker" + ); + } + } + + registerServiceWorker(); + + return () => { + registration?.unregister(); + }; + }, []); + + return ( + <> +
The UI is not actually used
+ + ); +} + +export default App; diff --git a/samples/browser/service_worker/src/main.tsx b/samples/browser/service_worker/src/main.tsx new file mode 100644 index 000000000..95e2bdc2c --- /dev/null +++ b/samples/browser/service_worker/src/main.tsx @@ -0,0 +1,9 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.tsx"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + +); diff --git a/samples/browser/service_worker/src/service-worker.ts b/samples/browser/service_worker/src/service-worker.ts new file mode 100644 index 000000000..c26ce1803 --- /dev/null +++ b/samples/browser/service_worker/src/service-worker.ts @@ -0,0 +1,11 @@ +/// +/// +/// + +import { auth } from "aws-crt"; + +addEventListener("message", async (event) => { + console.log(`Message Received: ${event.data}`); + + console.log(auth) +}); diff --git a/samples/browser/service_worker/src/vite-env.d.ts b/samples/browser/service_worker/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/samples/browser/service_worker/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/browser/service_worker/tsconfig.json b/samples/browser/service_worker/tsconfig.json new file mode 100644 index 000000000..a7fc6fbf2 --- /dev/null +++ b/samples/browser/service_worker/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/samples/browser/service_worker/tsconfig.node.json b/samples/browser/service_worker/tsconfig.node.json new file mode 100644 index 000000000..97ede7ee6 --- /dev/null +++ b/samples/browser/service_worker/tsconfig.node.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true + }, + "include": ["vite.config.ts"] +} diff --git a/samples/browser/service_worker/vite.config.sw.ts b/samples/browser/service_worker/vite.config.sw.ts new file mode 100644 index 000000000..a4a754b45 --- /dev/null +++ b/samples/browser/service_worker/vite.config.sw.ts @@ -0,0 +1,14 @@ +import { defineConfig } from 'vite' + +// https://vitejs.dev/config/ +export default defineConfig({ + build: { + outDir: 'public', + lib: { + entry: 'src/service-worker.ts', + name: "service-worker", + formats: ["es"], + fileName: () => "service-worker.js" + } + } +}) diff --git a/samples/browser/service_worker/vite.config.ts b/samples/browser/service_worker/vite.config.ts new file mode 100644 index 000000000..f0bc9048a --- /dev/null +++ b/samples/browser/service_worker/vite.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + server: { + port: 3030, + }, + plugins: [react()], +}) From 0528ee8752af4f9917c59ce5629bbe09dc8a99c0 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 19 Mar 2024 09:26:11 -0700 Subject: [PATCH 03/13] update out dir --- samples/browser/service_worker/.eslintrc.cjs | 2 +- samples/browser/service_worker/vite.config.sw.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/browser/service_worker/.eslintrc.cjs b/samples/browser/service_worker/.eslintrc.cjs index d6c953795..2fb86e0b5 100644 --- a/samples/browser/service_worker/.eslintrc.cjs +++ b/samples/browser/service_worker/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', ], - ignorePatterns: ['dist', '.eslintrc.cjs'], + ignorePatterns: ['.eslintrc.cjs'], parser: '@typescript-eslint/parser', plugins: ['react-refresh'], rules: { diff --git a/samples/browser/service_worker/vite.config.sw.ts b/samples/browser/service_worker/vite.config.sw.ts index a4a754b45..354f19dee 100644 --- a/samples/browser/service_worker/vite.config.sw.ts +++ b/samples/browser/service_worker/vite.config.sw.ts @@ -3,7 +3,7 @@ import { defineConfig } from 'vite' // https://vitejs.dev/config/ export default defineConfig({ build: { - outDir: 'public', + outDir: 'dist', lib: { entry: 'src/service-worker.ts', name: "service-worker", From 529b96a4f02445e156e4a3264508ba90ba626935 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 19 Mar 2024 14:07:01 -0700 Subject: [PATCH 04/13] test buffer --- samples/browser/service_worker/.eslintrc.cjs | 2 +- samples/browser/service_worker/src/service-worker.ts | 2 ++ samples/browser/service_worker/vite.config.sw.ts | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/samples/browser/service_worker/.eslintrc.cjs b/samples/browser/service_worker/.eslintrc.cjs index 2fb86e0b5..e7a71d1b2 100644 --- a/samples/browser/service_worker/.eslintrc.cjs +++ b/samples/browser/service_worker/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', ], - ignorePatterns: ['.eslintrc.cjs'], + ignorePatterns: ['dist','.eslintrc.cjs'], parser: '@typescript-eslint/parser', plugins: ['react-refresh'], rules: { diff --git a/samples/browser/service_worker/src/service-worker.ts b/samples/browser/service_worker/src/service-worker.ts index c26ce1803..db93cae7e 100644 --- a/samples/browser/service_worker/src/service-worker.ts +++ b/samples/browser/service_worker/src/service-worker.ts @@ -3,8 +3,10 @@ /// import { auth } from "aws-crt"; +import { Buffer } from "buffer"; addEventListener("message", async (event) => { + self.Buffer = Buffer; console.log(`Message Received: ${event.data}`); console.log(auth) diff --git a/samples/browser/service_worker/vite.config.sw.ts b/samples/browser/service_worker/vite.config.sw.ts index 354f19dee..a4a754b45 100644 --- a/samples/browser/service_worker/vite.config.sw.ts +++ b/samples/browser/service_worker/vite.config.sw.ts @@ -3,7 +3,7 @@ import { defineConfig } from 'vite' // https://vitejs.dev/config/ export default defineConfig({ build: { - outDir: 'dist', + outDir: 'public', lib: { entry: 'src/service-worker.ts', name: "service-worker", From b51d9c8aec28bc72761cde001c0fbaddd57963b5 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Mon, 22 Apr 2024 14:08:08 -0700 Subject: [PATCH 05/13] test polyfills.tx --- lib/browser/polyfills.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/browser/polyfills.ts b/lib/browser/polyfills.ts index f2d7e6ccd..1c40ddd3c 100644 --- a/lib/browser/polyfills.ts +++ b/lib/browser/polyfills.ts @@ -2,16 +2,19 @@ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0. */ - import buffer from 'buffer'; import process from 'process'; // Workaround to get mqtt-js working with Webpack 5 -if (typeof window !== 'undefined') { - (window as any).Buffer = buffer.Buffer; - (window as any).process = process; + +if (self) { + (self as any).Buffer = buffer.Buffer; + (self as any).process = process; +} + +if (self.window) { // NodeJS global shim workaround for Angular (window as any).global = window; } -export {}; +export { }; From 906ff4328cdeac1af0639a12bb52c48c587b6ef1 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Mon, 22 Apr 2024 16:50:23 -0700 Subject: [PATCH 06/13] update pub sub sample in service worker --- samples/browser/service_worker/README.md | 4 +- samples/browser/service_worker/src/App.tsx | 11 ++- samples/browser/service_worker/src/pub_sub.ts | 75 +++++++++++++++++++ .../service_worker/src/service-worker.ts | 17 +++-- samples/browser/service_worker/tsconfig.json | 4 +- .../browser/service_worker/vite.config.sw.ts | 1 + 6 files changed, 102 insertions(+), 10 deletions(-) create mode 100644 samples/browser/service_worker/src/pub_sub.ts diff --git a/samples/browser/service_worker/README.md b/samples/browser/service_worker/README.md index b75e2e081..dec967633 100644 --- a/samples/browser/service_worker/README.md +++ b/samples/browser/service_worker/README.md @@ -1,4 +1,6 @@ -# AWS IOT Service Worker minimal repro +# Service Worker + +The sample is a minimal sample for service worker with aws-crt library. As the service worker is not currently supported by aws-crt. ## Setup 1. `yarn` diff --git a/samples/browser/service_worker/src/App.tsx b/samples/browser/service_worker/src/App.tsx index 116a2b2c6..bdc9dd03a 100644 --- a/samples/browser/service_worker/src/App.tsx +++ b/samples/browser/service_worker/src/App.tsx @@ -5,7 +5,7 @@ function App() { let registration: ServiceWorkerRegistration | undefined; async function registerServiceWorker() { // Register service worker - navigator.serviceWorker.register("/service-worker.js"); + navigator.serviceWorker.register("./service-worker.js"); // Get registration registration = await navigator.serviceWorker.ready; @@ -16,7 +16,12 @@ function App() { ); } } - + // Clean up the service worker before register the new one + navigator.serviceWorker.getRegistrations().then(registrations => { + for (const registration of registrations) { + registration.unregister(); + } + }); registerServiceWorker(); return () => { @@ -26,7 +31,7 @@ function App() { return ( <> -
The UI is not actually used
+
Please checkout the "Developer Tools" for console messages.
); } diff --git a/samples/browser/service_worker/src/pub_sub.ts b/samples/browser/service_worker/src/pub_sub.ts new file mode 100644 index 000000000..52c42b68e --- /dev/null +++ b/samples/browser/service_worker/src/pub_sub.ts @@ -0,0 +1,75 @@ +/** + * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0. + */ + +import {mqtt5, auth, iot, MqttConnectCustomAuthConfig} from "aws-crt" +import {once} from "events" +import * as settings from "./config" +import { toUtf8 } from '@aws-sdk/util-utf8-browser'; +/// @ts-ignore + +let client : mqtt5.Mqtt5Client | undefined = undefined +const test_topic = "hello/world/qos0" + +function createClient() : mqtt5.Mqtt5Client { + + let customAuthConfig : MqttConnectCustomAuthConfig = { + authorizerName: settings.AUTHORIZFER_NAME, + username: settings.USERNAME, + password: settings.PASSWORD + }; + + let builder = iot.AwsIotMqtt5ClientConfigBuilder.newWebsocketMqttBuilderWithCustomAuth( + settings.AWS_IOT_ENDPOINT, + customAuthConfig + ); + + console.log("Connecting custom authorizer..."); + client = new mqtt5.Mqtt5Client(builder.build()); + client.on("messageReceived",(eventData: mqtt5.MessageReceivedEvent) : void => { + console.log("Message Received event: " + JSON.stringify(eventData.message)); + if (eventData.message.payload) { + console.log(" with payload: " + toUtf8(new Uint8Array(eventData.message.payload as ArrayBuffer))); + } + } ); + + return client; +} + +export async function setupConnection() { + + /** Set up the credentialsProvider */ + client = createClient(); + + const attemptingConnect = once(client, "attemptingConnect"); + const connectionSuccess = once(client, "connectionSuccess"); + + client.start(); + + await attemptingConnect; + await connectionSuccess; + + const suback = await client.subscribe({ + subscriptions: [ + { qos: mqtt5.QoS.AtLeastOnce, topicFilter: test_topic } + ] + }); + console.log('Suback result: ' + JSON.stringify(suback)); +} + +export async function Mqtt5ClientPublish() +{ + if (!client) + { + console.log("[Warning] Client has not been setup.") + return + } + const qos0PublishResult = await client.publish({ + qos: mqtt5.QoS.AtLeastOnce, + topicName: test_topic, + payload: "This is a qos 1 payload" + }); + console.log('QoS 1 Publish result: ' + JSON.stringify(qos0PublishResult)); +} + diff --git a/samples/browser/service_worker/src/service-worker.ts b/samples/browser/service_worker/src/service-worker.ts index db93cae7e..f2f1380cb 100644 --- a/samples/browser/service_worker/src/service-worker.ts +++ b/samples/browser/service_worker/src/service-worker.ts @@ -2,12 +2,19 @@ /// /// -import { auth } from "aws-crt"; -import { Buffer } from "buffer"; +import { mqtt} from "aws-crt"; +import { setupConnection, Mqtt5ClientPublish } from "./pub_sub"; + +addEventListener("install", async (event) => { + console.log(`Service Worker Install: ${event.data}`); + console.log(`Setup mqtt client`) + await setupConnection() +}); addEventListener("message", async (event) => { - self.Buffer = Buffer; console.log(`Message Received: ${event.data}`); - - console.log(auth) + await Mqtt5ClientPublish() + console.log("Finish Publish Message") }); + + diff --git a/samples/browser/service_worker/tsconfig.json b/samples/browser/service_worker/tsconfig.json index a7fc6fbf2..c8e2601dc 100644 --- a/samples/browser/service_worker/tsconfig.json +++ b/samples/browser/service_worker/tsconfig.json @@ -13,7 +13,9 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", - + "paths": { + "aws-crt": ["./node_modules/aws-crt/dist.browser/browser"] + }, /* Linting */ "strict": true, "noUnusedLocals": true, diff --git a/samples/browser/service_worker/vite.config.sw.ts b/samples/browser/service_worker/vite.config.sw.ts index a4a754b45..93edfb50a 100644 --- a/samples/browser/service_worker/vite.config.sw.ts +++ b/samples/browser/service_worker/vite.config.sw.ts @@ -4,6 +4,7 @@ import { defineConfig } from 'vite' export default defineConfig({ build: { outDir: 'public', + minify: false, lib: { entry: 'src/service-worker.ts', name: "service-worker", From ff61155695848f9804257639208d0c6c2078dd90 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Mon, 22 Apr 2024 17:01:49 -0700 Subject: [PATCH 07/13] add events dependency --- samples/browser/service_worker/package.json | 1 + samples/browser/service_worker/src/pub_sub.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/samples/browser/service_worker/package.json b/samples/browser/service_worker/package.json index eab5bff67..c28348da6 100644 --- a/samples/browser/service_worker/package.json +++ b/samples/browser/service_worker/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "aws-crt": "file:../../../", + "events": "^3.3.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/samples/browser/service_worker/src/pub_sub.ts b/samples/browser/service_worker/src/pub_sub.ts index 52c42b68e..5c6f80761 100644 --- a/samples/browser/service_worker/src/pub_sub.ts +++ b/samples/browser/service_worker/src/pub_sub.ts @@ -39,6 +39,7 @@ function createClient() : mqtt5.Mqtt5Client { export async function setupConnection() { + if(client != undefined) return; /** Set up the credentialsProvider */ client = createClient(); @@ -60,6 +61,7 @@ export async function setupConnection() { export async function Mqtt5ClientPublish() { + await setupConnection() if (!client) { console.log("[Warning] Client has not been setup.") From b089110cd85239f3833e6d6b8380645194f441ec Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Mon, 22 Apr 2024 17:07:01 -0700 Subject: [PATCH 08/13] improve readme --- samples/browser/service_worker/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/samples/browser/service_worker/README.md b/samples/browser/service_worker/README.md index dec967633..e5771fe25 100644 --- a/samples/browser/service_worker/README.md +++ b/samples/browser/service_worker/README.md @@ -1,12 +1,14 @@ # Service Worker -The sample is a minimal sample for service worker with aws-crt library. As the service worker is not currently supported by aws-crt. +The sample is a quick demonstration for setup service worker with aws-crt library. The sample would setup an mqtt5 client on service worker installed, and publish a message on service worker "message" event. +The sample would not be maintained until aws-crt claim full support for service worker. ## Setup -1. `yarn` -2. `yarn dev`, open another terminal and run `yarn vite -c vite.config.sw.ts build --watch` which will build the service worker in watch mode +0. Install SDK, then change folder to `./samples/browser/service_worker` +1. run `yarn` +2. run `yarn dev`, open another terminal and run `yarn vite -c vite.config.sw.ts build --watch` which will build the service worker in watch mode 3. Load [localhost:3030](http://localhost:3030) -4. Open browser's DevTools/console to see message(s) +4. Open browser's DevTools/console to track client messages ### Important Note On Testing Service Workers ServiceWorkers are designed to live for a long time and be available offline. As such, the caching policies around them are very aggressive, by design. To help with development it is highly recommended to enable "Update on reload" in Chrome dev tools. From 03f543137748a465ffb1ec2105f8a22bd4f3b93b Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 23 Apr 2024 09:19:24 -0700 Subject: [PATCH 09/13] update polyfill --- lib/browser/polyfills.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/browser/polyfills.ts b/lib/browser/polyfills.ts index 1c40ddd3c..4bdd7a358 100644 --- a/lib/browser/polyfills.ts +++ b/lib/browser/polyfills.ts @@ -7,12 +7,12 @@ import process from 'process'; // Workaround to get mqtt-js working with Webpack 5 -if (self) { +if (typeof self !== 'undefined') { (self as any).Buffer = buffer.Buffer; (self as any).process = process; } -if (self.window) { +if (typeof self.window !== 'undefined') { // NodeJS global shim workaround for Angular (window as any).global = window; } From f26b9bea750d1bca4c465ad3b183a91c9f671474 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 23 Apr 2024 09:45:21 -0700 Subject: [PATCH 10/13] validate self and window --- lib/browser/polyfills.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/browser/polyfills.ts b/lib/browser/polyfills.ts index 4bdd7a358..a325f622d 100644 --- a/lib/browser/polyfills.ts +++ b/lib/browser/polyfills.ts @@ -10,11 +10,11 @@ import process from 'process'; if (typeof self !== 'undefined') { (self as any).Buffer = buffer.Buffer; (self as any).process = process; -} -if (typeof self.window !== 'undefined') { - // NodeJS global shim workaround for Angular - (window as any).global = window; + if (typeof self.window !== 'undefined') { + // NodeJS global shim workaround for Angular + (window as any).global = window; + } } export { }; From f5ffff3dbfc4769ee2468791b23ec9ae25060288 Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 23 Apr 2024 10:55:25 -0700 Subject: [PATCH 11/13] update window --- lib/browser/polyfills.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/lib/browser/polyfills.ts b/lib/browser/polyfills.ts index a325f622d..9ce24c73d 100644 --- a/lib/browser/polyfills.ts +++ b/lib/browser/polyfills.ts @@ -6,15 +6,11 @@ import buffer from 'buffer'; import process from 'process'; // Workaround to get mqtt-js working with Webpack 5 - -if (typeof self !== 'undefined') { - (self as any).Buffer = buffer.Buffer; - (self as any).process = process; - - if (typeof self.window !== 'undefined') { - // NodeJS global shim workaround for Angular - (window as any).global = window; - } +if (typeof window !== 'undefined') { + (window as any).Buffer = buffer.Buffer; + (window as any).process = process; + // NodeJS global shim workaround for Angular + (window as any).global = window; } -export { }; +export {}; From abcf5beda184bc8953ef280d9f3e3de97d8fddcd Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 23 Apr 2024 11:14:00 -0700 Subject: [PATCH 12/13] fix self window --- lib/browser/polyfills.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/browser/polyfills.ts b/lib/browser/polyfills.ts index 9ce24c73d..3a2e6b82c 100644 --- a/lib/browser/polyfills.ts +++ b/lib/browser/polyfills.ts @@ -6,11 +6,14 @@ import buffer from 'buffer'; import process from 'process'; // Workaround to get mqtt-js working with Webpack 5 -if (typeof window !== 'undefined') { - (window as any).Buffer = buffer.Buffer; - (window as any).process = process; - // NodeJS global shim workaround for Angular - (window as any).global = window; +if (typeof self !== 'undefined') { + (self as any).Buffer = buffer.Buffer; + (self as any).process = process; + + if (self.window) { + // NodeJS global shim workaround for Angular + (self.window as any).global = window + } } export {}; From 9315c99ed33ade0d8a497310caa217af2d646cdf Mon Sep 17 00:00:00 2001 From: Zhihui Xia Date: Tue, 23 Apr 2024 11:25:24 -0700 Subject: [PATCH 13/13] add config --- samples/browser/service_worker/src/config.ts | 4 ++++ samples/browser/service_worker/src/pub_sub.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 samples/browser/service_worker/src/config.ts diff --git a/samples/browser/service_worker/src/config.ts b/samples/browser/service_worker/src/config.ts new file mode 100644 index 000000000..be440f6fd --- /dev/null +++ b/samples/browser/service_worker/src/config.ts @@ -0,0 +1,4 @@ +export const AUTHORIZER_NAME = "'"; +export const USERNAME = ''; +export const PASSWORD = ''; +export const AWS_IOT_ENDPOINT = ''; diff --git a/samples/browser/service_worker/src/pub_sub.ts b/samples/browser/service_worker/src/pub_sub.ts index 5c6f80761..8f9502a18 100644 --- a/samples/browser/service_worker/src/pub_sub.ts +++ b/samples/browser/service_worker/src/pub_sub.ts @@ -15,7 +15,7 @@ const test_topic = "hello/world/qos0" function createClient() : mqtt5.Mqtt5Client { let customAuthConfig : MqttConnectCustomAuthConfig = { - authorizerName: settings.AUTHORIZFER_NAME, + authorizerName: settings.AUTHORIZER_NAME, username: settings.USERNAME, password: settings.PASSWORD };