Build for relative path

aaronamm · aaronamm · commit 6839ba5fce31 · 2022-01-23T18:54:42.000+07:00
diff --git a/PushMessageFromServer.js b/PushMessageFromServer.js
@@ -15,13 +15,18 @@ webpush.setVapidDetails(
   vapidKeys.privateKey
 );
 
-// // This is the same output of calling JSON.stringify on a PushSubscription
-// const pushSubscription = {
+// This is the same output of calling JSON.stringify on a PushSubscription
+
+// const pushSubscription = 
 //   endpoint: '.....',
 //   keys: {
 //     auth: '.....',
 //     p256dh: '.....'
 //   }
 // };
 
-// webpush.sendNotification(pushSubscription, 'Your Push Payload Text');
+const pushSubscription =
+const notification = { title: `Hello at ${(new Date()).toISOString()}` };
+
+
+webpush.sendNotification(pushSubscription,);
diff --git a/package.json b/package.json
@@ -44,5 +44,6 @@
   },
   "devDependencies": {
     "serve": "^13.0.2"
-  }
+  },
+  "homepage": "."
 }
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React App</title>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/service-worker.js b/public/service-worker.js
@@ -1,3 +1,11 @@
-self.addEventListener('push', () => {
-  self.registration.showNotification('Hello world!');
+self.addEventListener('push', (event) => {
+  const data = event.data.json();
+  event.waitUntil(
+    self.registration.showNotification(data.title, {
+      body: 'Buzz! Buzz!',
+      vibrate: [300, 100, 400], // Vibrate 300ms, pause 100ms, then vibrate 400ms
+      icon: './favicon.ico',
+      tag: 'vibration-sample'
+    })
+  );
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,8 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import './App.css';
 
 export default function App() {
+  const [subscription, setSubscription] = useState('');
   useEffect(() => {
     window.addEventListener('load', async () => {
       const sw = await navigator.serviceWorker.register('./service-worker.js');
@@ -17,14 +18,22 @@ export default function App() {
       userVisibleOnly: true,
       applicationServerKey: publicKey,
     });
-    console.log(`push subscription :\n\n${JSON.stringify(push)}`);
+    console.log(`push subscription :\n\n${JSON.stringify(push, null, 2)}`);
+    setSubscription(JSON.stringify(push, null, 2));
   }
 
+  const style = {
+    width: '100%'
+  };
+
   return (
     <div>
       <button onClick={handleSubscribeWebPush}>
         Subscript web push
       </button>
+      <div>
+        <textarea rows={10} style={style} value={subscription} />
+      </div>
     </div>
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -44,5 +44,6 @@`
`44`	`44`	`},`
`45`	`45`	`"devDependencies": {`
`46`	`46`	`"serve": "^13.0.2"`
`47`		`- }`
	`47`	`+ },`
	`48`	`+ "homepage": "."`
`48`	`49`	`}`