feat: prepare for push notification II

src/Flows.js

@@ -517,6 +517,27 @@ class FlowSidebar extends PureComponent {
       });
   }
 
+  toggle_notification() {
+    console.log('set notifi');
+    get_push_subscription().then((sc) => {
+      if (!sc) {
+        alert('浏览器不支持消息推送，或无法连接到推送服务');
+        return;
+      }
+      let sc_data = JSON.parse(JSON.stringify(sc));
+      API.set_notification(
+        this.state.info.pid,
+        true,
+        sc_data.endpoint,
+        sc_data.keys.auth,
+        sc_data.keys.p256dh,
+        this.props.token,
+      ).then((json) => {
+        // TODO
+      });
+    });
+  }
+
   do_vote(vote) {
     this.setState({
       loading_status: 'loading',
@@ -730,12 +751,7 @@ class FlowSidebar extends PureComponent {
           {!!this.props.token && (
             <span>
               &nbsp;&nbsp;
-              <a
+              <a href="###" onClick={() => this.toggle_attention()}>
-                href="###"
-                onClick={() => {
-                  this.toggle_attention();
-                }}
-              >
                 {this.state.attention ? (
                   <span>
                     <span className="icon icon-star-ok" />
@@ -752,24 +768,12 @@ class FlowSidebar extends PureComponent {
           )}
           {!!this.props.token && !!this.state.attention && (
             <span>
-              <a
+              &nbsp;&nbsp;
-                href="###"
+              <a href="###" onClick={() => this.toggle_notification()}>
-                style={{ display: 'none' }}
+                <span>
-                onClick={() => {
+                  <span className="icon icon-star" />
-                  console.log('set notifi');
+                  <label>提醒</label>
-                  get_push_subscription().then((sc) => {
+                </span>
-                    if (!sc) return;
-                    fetch('/_test', {
-                      method: 'POST',
-                      headers: {
-                        'Content-Type': 'application/json',
-                      },
-                      body: JSON.stringify(sc),
-                    });
-                  });
-                }}
-              >
-                <span className="icon icon-star">提醒</span>
               </a>
             </span>
           )}

src/flows_api.js

@@ -1,5 +1,5 @@
 import { get_json, gen_name } from './infrastructure/functions';
-import { get_api_base } from './Common';
+import { get_api_base, get_api_base_2 } from './Common';
 import { cache } from './cache';
 
 export { get_json };
@@ -80,6 +80,26 @@ export const API = {
     return handle_response(response, false);
   },
 
+  set_notification: async (pid, enable, endpoint, auth, p256dh, token) => {
+    let data = new URLSearchParams([
+      ['enable', enable],
+      ['endpoint', endpoint],
+      ['auth', auth],
+      ['p256dh', p256dh],
+    ]);
+
+    let response = await fetch(`${get_api_base_2()}/post/${pid}/notification`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'User-Token': token,
+      },
+      body: data,
+    });
+
+    return handle_response(response, true);
+  },
+
   report: async (pid, reason, should_hide, token) => {
     let data = new URLSearchParams([
       ['pid', pid],

src/serviceWorkerRegistration.js

@@ -21,6 +21,7 @@ const isLocalhost = Boolean(
 );
 
 export function register(config) {
+  // if ('serviceWorker' in navigator) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);