Forem: bravemaster619

One second to read GitHub code with VS Code

bravemaster619 — Sun, 21 Mar 2021 20:25:18 +0000

When you stumble upon an open source project in GitHub that looks cool, you might want to check its code base before you actually dive into it.

Of course, you can check the source code in the website but here is a way more convenient way.

Just add 1s to github.com in the link and you can browse the whole project in online vscode.

For example, DEV repository link is https://github.com/forem/forem. Thus, You can check the source code in this link: https://github1s.com/forem/forem

I find it super useful, one of the best things I got to know in 2021.

Simplest way to embed a Youtube video in your React app

bravemaster619 — Thu, 17 Dec 2020 13:43:43 +0000

Overview

Quick and simple
No npm i
Fully responsive
Feel free to Copy & Paste

1. Make a component for iframe:

YoutubeEmbed.js

import React from "react";
import PropTypes from "prop-types";

const YoutubeEmbed = ({ embedId }) => (
  <div className="video-responsive">
    <iframe
      width="853"
      height="480"
      src={`https://www.youtube.com/embed/${embedId}`}
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
      title="Embedded youtube"
    />
  </div>
);

YoutubeEmbed.propTypes = {
  embedId: PropTypes.string.isRequired
};

export default YoutubeEmbed;

2. Add some css for responsiveness:

styles.css

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

3. Use it

Couldn't be simpler. Easy-breezy:

import React from "react";
import "./styles.css";
import YoutubeEmbed from "./YoutubeEmbed";

export default function App() {
  return (
    <div className="App">
      <h1>Youtube Embed</h1>
      <YoutubeEmbed embedId="rokGy0huYEA" />
    </div>
  );
}

Result

How to use socket.io-client correctly in React app

bravemaster619 — Wed, 16 Dec 2020 17:56:13 +0000

Background

The following is my first blog to achieve 8k+ view and 1st in Google SERP rank. However, it has some concerns and I decided to rewrite it.

How to prevent multiple socket connections and events in React

bravemaster619 ・ Mar 22 '20

#socket #socketio #react #spa

In this article, I used global socket variable to manage socket events in a React app. Like the following:



// service/socket.js
export const socket = socketio.connect(SOCKET_URL);
// elsewhere
import {socket} from "service/socket";

However, fellow devs recommended to use React context API in their comments. And I began to think that using global variable is not a React-way either. (Although I believe that works too. Because socket does not change its state).

I updated my previous article, but I think it needs more explanation. So I decided to write an article that shows how to use React context API to manage one global socket instance.

1. Create Socket Context

We will use useContext hook to provide SocketContext to entire app.

Create a file in context/socket.js:



import socketio from "socket.io-client";
import { SOCKET_URL } from "config";

export const socket = socketio.connect(SOCKET_URL);
export const SocketContext = React.createContext();

2. Use socket context and provide a value

Add SocketContext provider at the root of your project or at the largest scope where socket is used:



import {SocketContext, socket} from 'context/socket';
import Child from 'components/Child';

const App = () => {
  return (
    <SocketContext.Provider value={socket}>
      <Child />
      <Child />
      ...
    </SocketContext.Provider
  );
};

3. Now you can use socket in any child component

For example, in GrandChild component, you can use socket like this:



import React, {useState, useContext, useCallback, useEffect} from 'react';
import {SocketContext} from 'context/socket';

const GrandChild = ({userId}) => {

  const socket = useContext(SocketContext);

  const [joined, setJoined] = useState(false);

  const handleInviteAccepted = useCallback(() => {
    setJoined(true);
  }, []);

  const handleJoinChat = useCallback(() => {
    socket.emit("SEND_JOIN_REQUEST");
  }, []);


  useEffect(() => {
    // as soon as the component is mounted, do the following tasks:

    // emit USER_ONLINE event
    socket.emit("USER_ONLINE", userId); 

    // subscribe to socket events
    socket.on("JOIN_REQUEST_ACCEPTED", handleInviteAccepted); 

    return () => {
      // before the component is destroyed
      // unbind all event handlers used in this component
      socket.off("JOIN_REQUEST_ACCEPTED", handleInviteAccepted);
    };
  }, [socket, userId, handleInviteAccepted]);

  return (
    <div>
      { joined ? (
        <p>Click the button to send a request to join chat!</p>
      ) : (
        <p>Congratulations! You are accepted to join chat!</p>
      ) }
      <button onClick={handleJoinChat}>
        Join Chat
      </button>
    </div>
  );
};

OK, here are some explanations:

What is `useContext`?

useContext provides a React way to use global state
You can use context in any child component
Context values are states. React notices their change and triggers re-render.

What is `useCallback`? Why did you put every handlers inside `useCallback`?

useCallback prevents reassigning whenever there is state update
Functions will be reassigned only when elements in the second argument are updated
Since we passed an empty array to second argument, functions are assigned for only once
You may forget (or don't bother) to use useCallback. But you may face serious performance issues if there are many states and components in your project

What is `useEffect` and that `[socket]` array provided as the second argument?

The second argument is called dependency array. React will watch dependency array elements and whenever one of them is updated, the first argument function will be executed.
If you omit dependency array in useEffect, the function will be executed whenever there is a state update.
If the dependency array is an empty array, the function will be executed only once.
In React functional component, you can write componentDidMount and componentWillUnmount alternatives in the following way:



useEffect(() => {
  // here is componentDidMount
  return () => {
    // here is componentWillUnmount
  }
}, []);

It is strongly recommended to put every state that's used in the first argument function to the dependency array.

BONUS

If you want to use JWT token to authenticate socket connections, you can do like the following:



const getSocket = () => {
  const token = getAuthToken(); // get jwt token from local storage or cookie
  if (token) {
    return socketio.connect(SOCKET_URL, {
      query: { token }
    });
  }
  return socketio.connect(SOCKET_URL);
};

Then in socket server, you can get jwt token like the following:



import SocketIO from "socket.io";

const io = new SocketIO.Server(expressApp);
const jwtMiddleware = (socket, next) => {
  const {token} = socket.handshake.query;
  // verify token
};

io.use(jwtMiddleware);

How to pass arguments to custom composer script

bravemaster619 — Sat, 29 Aug 2020 08:03:18 +0000

How to pass arguments to custom composer script

Aug 29 '20 Comments: 3 Answers: 1

In my Laravel project, I want to run phpunit for a single file, like this one:

$ composer run-script test tests/Unit/Services/OrderServiceTest.php

Here is my composer setup:

"scripts": {
    "test": [
        "@testenv"
        "@phpunit"
    ],
    "testenv": [
        "php artisan config:cache --env=testing",
        "php artisan config:clear"
    ],
    "phpunit": [
        "php ./vendor/phpunit/phpunit/phpunit --"
    ]
}

…

Open Full Question

Typescript: is it possible to apply multiple method decorators using class decorator?

bravemaster619 — Tue, 11 Aug 2020 09:46:58 +0000

Hi, devs. I've just opened up a question in stackoverflow. I'm sure it's a good question for you if you have some knowledege in typescript decorators.

Please help me in StackOverflow. Thanks!

How to apply a decorator to all class methods using class decorator

Aug 11 '20 Comments: 2 Answers: 1

I'm using experimental typescript decorators to manage access control in express.

class AccountController extends Controller {
  login(req: Request, res: Response) {
    const { email, password } = req.body;
    const token = await this.model.login(email, password);
    return res.json({
      token
    });
  }

  @hasRole('ADMIN')
  list(req: Request, res: Response) {
    res.json({
      data: await this.model.findAll()
    });

…

Open Full Question

Event-driven approach in React hooks?

bravemaster619 — Fri, 10 Jul 2020 04:54:45 +0000

I'd like to "fire an event" in one component, and let other components "subscribe" to that event and do some work in React.

For example, here is a typical React project.

I have a model, fetch data from server and several components are rendered with that data.

interface Model {
   id: number;
   value: number;
}

const [data, setData] = useState<Model[]>([]);
useEffect(() => {
   fetchDataFromServer().then((resp) => setData(resp.data));
}, []);

<Root>
   <TopTab>
     <Text>Model with large value count:  {data.filter(m => m.value > 5).length}</Text>
   </TobTab>
   <Content>
      <View>
         {data.map(itemData: model, index: number) => (
            <Item key={itemData.id} itemData={itemData} />
         )}
      </View>
   </Content>
   <BottomTab data={data} />
</Root>

In one child component, a model can be edited and saved.

const [editItem, setEditItem] = useState<Model|null>(null);
<Root>
   <TopTab>
     <Text>Model with large value count:  {data.filter(m => m.value > 5).length}</Text>
   </TobTab>
   <ListScreen>
      {data.map(itemData: model, index: number) => (
          <Item 
             key={itemData.id} 
             itemData={itemData} 
             onClick={() => setEditItem(itemData)}
          />
      )}
   </ListScreen>
   {!!editItem && (
       <EditScreen itemData={editItem} />
   )}
   <BottomTab data={data} />
</Root>

Let's assume it's EditScreen:

const [model, setModel] = useState(props.itemData);

<Input 
   value={model.value}
   onChange={(value) => setModel({...model, Number(value)})}
/>
<Button 
   onClick={() => {
       callSaveApi(model).then((resp) => {
           setModel(resp.data);
           // let other components know that this model is updated
       })
   }}
/>

How can I let TopTab, BottomTab and ListScreen component to update data

without calling API from server again and
not passing updateData function as props

I'd like to fire an event (e.g. "model-update") with an argument (changed model) and let other components subscribe to that event and change their data.

Is it possible using React hooks?

How to implement event-driven approach in React hooks?

Please let me know your opinions. Leave comments here or help me in Stack Overflow!

Jul 10 '20 Comments: 4 Answers: 5

I'd like to "fire an event" in one component, and let other components "subscribe" to that event and do some work in React.

For example, here is a typical React project.

I have a model, fetch data from server and several components are rendered with that data.

interface Model {

…

Open Full Question

Add a markdown version for DEV badge link

bravemaster619 — Thu, 09 Jul 2020 13:52:31 +0000

You can find your DEV badge link here.

<a href="https://dev.to/bravemaster619">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="bravemaster619's DEV Profile" height="30" width="30">
</a>

I think it would be better if it includes markdown version too.

[![bravemaster619's DEV Profile](https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg)](https://dev.to/bravemaster619)

Should I open an issue in github instead?

Click ❤️ if you like the idea!

UPDATE

I've sent a PR to dev.to team. You can check its status here.

Happy coding!

GitHub Pages is temporarily down for maintenance

bravemaster619 — Tue, 07 Apr 2020 13:16:58 +0000

GitHub Pages is temporarily down for maintenance

Subscribe to updates from this url: https://www.githubstatus.com/incidents/f3xzj5fgfq5b

What is your preferred way to handle authentication in SPA?

bravemaster619 — Mon, 23 Mar 2020 13:15:15 +0000

Almost all SPAs use JWT for authentication. I was answering a question of an Indian student in Stack Overflow. The flow is typical. If a user is logged in it will redirect to dashboard page. Otherwise, the default page will be displayed.

I have implemented this flow for a number of times. So I have my own way and I'm kinda stuck on it. So I asked myself: "Hey, how the other guys (in DEV) are doing this? What is the best practice?"

There are multiple choices and ways to handle JWT authentication in an SPA. Let me recall some of them:

We can store jwt tokens in Cookie, sessionStorage or localStorage.

For redirect, we can simply use location.href in vanilla JS. or use redux to susbscribe login state in App component and let it redirect after a state change with Redirect component.

To get login state again, we can get token from localStorage(or other "local" storages). We might also go further to ask a server if this is a valid token. Or simply we assume this is a valid token and handle 403 errors from api calls later.

Some devs like localStorage and others don't. Some devs prefer redux to handle login state globally. Some guys would love to call /me to see if the provided token is a valid one.

I normally use localStorage to store JWT tokens, use location.href after a successful login and handle 403 errors in all api calls that require authentication/authorization.

What is your preferred way to handle authentications in SPAs? Please share.

Store JWT token in:

Cookie
sessionStorage
localStorage

Handle redirect after successful login with:

vanilla Javascript
Redirect component

Manage login state with:

Redux (react-redux, vuex, rxjs etc.)
Call a helper function whenever necessary

Verify provided token with:

Call /me (or something like that) whenever necessary
Trust it first and handle 403 later

How to prevent multiple socket connections and events in React

bravemaster619 — Sun, 22 Mar 2020 08:44:34 +0000

Multiple socket connections and event bindings can be easily overlooked in SPAs and can cause headaches. I'd like to share my experience of preventing them. In this article, I will use socket.io for Node.js backend and socket.io-client for React frontend.

1. Connect only once

Create a dedicated file for socket connection. For example, create a file in service/socket.js:




import io from "socket.io-client";
import { SOCKET_URL } from "config";

export const socket = io(SOCKET_URL);

You can import this socket instance in other React components whenever necessary:



import {socket} from "service/socket";

function MyComponent() => {
   return(<div></div>)
}

In this way, you can ensure there will be only one socket instance.

2. Bind and emit events only once - put them in the correct place

Consider you're building a React component that connect to a socket server when the page is loaded and show welcome message if the connection is successful. The component will emit an HELLO_THERE event to the server and the server will respond with warm WELCOME_FROM_SERVER event. Where would you place socket event binding and emiting in your React code?



import {socket} from "service/socket";
// NOT HERE (1)
// socket.emit('HELLO_THERE');
function MyComponent() => {

   // NOT HERE EITHER (2)
   // socket.emit('HELLO_THERE');
   const [connected, setConnected] = useState(false);
   // IT IS HERE
   useEffect(() => {
      socket.emit('HELLO_THERE');
      const eventHandler = () => setConnected(true);
      socket.on('WELCOME_FROM_SERVER', eventHandler);
      // unsubscribe from event for preventing memory leaks
      return () => {
         socket.off('WELCOME_FROM_SERVER', eventHandler);
      };
   }, []);
   return (
      <div>
          { connected ? (
               <p>Welcome from server!</p>
          ) : (
               <p>Not connected yet...</p>
          ) }
      </div>
   )
}
export default MyComponent

(1) This will emit the event even if MyComponent is not used.
(2) This will emit the event whenever MyComponent is updated.

* If you're using React classes, componentDidMount will be the right place to use sockets. useEffect(() => {}, []) is almost the same as componentDidMount
** Of course, socket.emit can go anywhere necessary in your code. However, socket.on should be in componentDidMount in most cases.

3. If you're unsure, there is always this hack

If you still cannot figure out why does your component stupidly bind the same listener for multiple times, or if you just want to make sure bind only one listener for one event, you can resort to socket.off.



socket.off('MY_EVENT', doThisOnlyOnce).on('MY_EVENT', doThisOnlyOnce);

UPDATE - useContext approach

If you want to use useContext hook, you can do like this one:

socket.js



import React from "react";
import io from "socket.io-client";
import { SOCKET_URL } from "config";

export const socket = io(SOCKET_URL);
const SocketContext = React.createContext(socket);

Your app.js should look like the following:



import React from "react";
import SocketContext, { socket } from "context/socket";

const App = () => (
   <SocketContext.Provider value={socket}>
      <OtherComponents />
   </SocketContext.Provider>
);

Then anywhere in your component, you can get socket like this:



import React from "react";
import SocketContext from "context/socket";

const OtherComponent = () => {
  const socket = React.useContext(SocketContext);
  ...
};

For more information, you can read my another post here:

How to use socket.io-client correctly in React app

bravemaster619 ・ Dec 16 '20

#socket #react #javascript #webdev

Funniest users in Stack Overflow and records held by them

bravemaster619 — Wed, 11 Mar 2020 16:29:32 +0000

Not many developers can do without stackoverflow.com. It is undoubtedly the largest online community for developers on the planet.

One of the most loved feature of stackoverflow is its reputation system. You can get reputation mostly by posting well-received questions and answers. As your reputation increases, you’ll get more powerful privileges of the site. Since stackoverflow is free, reputation maybe the best impetus for gurus to answer questions voluntarily.

I’ve gained about 600 reputation for 2 months and wanted to know how I was successful compared to others. Then I found data.stackexchange.com and got surprised that I can run SQL queries to stackoverflow database directly. There were so many interesting queries and I got to know everything that I always wanted to know.

User with the highest accept rate of answers

Prix has posted 396 answers in total and got all of them accepted.

Well done, Prix! There are some legends who got thousands of accepted answers but you are the only one who has got all of them accepted.

The next one is a natural question:

User with the lowest accept rate of answers

rashedcs has answered 180+ questions but he has zero accepted answer by International Women’s Day, 2020!

Gosh, that was even harder, don’t you think? Well done goes to you too, rashdecs!

I have more than 80 posts but my reputation is only 938. But some guys can get tens of thousands of reputation scores (gold badge included) just for only one post in their whole lifetime in stackoverflow.

User with only one answer in stackoverflow

baisong has one answer and zero question in stackoverflow. His reputation is nearly 40k, which is mostly coming from his one and the only answer(related to git commands) in stackoverflow.

40k reputation for one answer looks great, but it would be much better if you could do something similar with only one question.

User with only one question in stackoverflow

Username: mattshane
Answer: 0
Question: 1
0 posts edited
0 helpful flags
0 votes cast
Reputation: 79,909 (top 0.21% overall)

His question What and where are the stack and heap? not only helped countless developers and students (and experts refreshing their memories) but also gave him nearly 80k reputation. And it hasn’t lost its value until now:

User who never asks

Gordon Linoff, one of the legendary users in stackoverflow, hasn’t asked any single question and answered 65,482 times. He is in the third position in all-time league(Mine is 214,703). But he almost always wins every league other than that.

User who never posts answers

Tim, just a cuorious self learner as stated by himself, has asked 1,186 questions but hasn’t answered any question.

Looks like Gordon Linoff and Tim are in different terms of use.

Best upvoter who never downvotes others

user998692, his name may look unfriendly but he has been the most friendly and generous among all 10M users in stackoverflow. He upvoted for 107,469 times. In other words, he contributed over a million reputation to others.

His is the biggest upvote count in stackoverflow. Besides, he never downvoted others.

Remember his username and favorite tags, and try to answer his questions as soon as possible for more reputation(OMG, VonC is listed here too). Since he regularly upvotes 35 times a day, there will be much chance for you to get his upvote.

Top downvoter with the most downvote percentage

If a user can spam upvotes for 100K times without a problem, why not downvote?

Enzokie has some voting philosophy and acquiring his upvote is nearly impossible. He upvoted for 2 times and downvoted for 20,402 times.

Seems like most android questions look silly to him. Some guy was trying to calculate evil ratio of users by dividing upvote count by downvotes. Enzokie’s evil ratio was whopping 1,020,100.00 %. If he hadn’t upvoted for 2 times (by mistake?), his query wouldn’t work. I think he is trying to prevent stackoverflow from dumb-or-just-google-away-question-overflow by downvoting 12 ~ 13 times a day.

Conclusion

The facts about these users sound funny but they are some of the best contributors to stackoverflow. They are Jon Skeets in their own way. Stack Overflow is definitely most helpful and fun to get around for developers.

How to convert a React-Rails Web App to PWA, Push Notification using VAPID

bravemaster619 — Thu, 13 Feb 2020 21:00:39 +0000

How to convert a React-RoR Web App to a PWA + Push Notification using VAPID

In my previous article, I described how to build a React web app with Ruby on Rails for backend and MongoDB for database.

In this page, I am going to explain how to convert this web app into a Progressive Web App. And I’ll show you how to implement push notification in our app using VAPID.

If you haven’t read my previous article yet, please read it first. Or you can just download the source code of the previous article here and start reading this.

What have we got?

When a user fills up subscription form and click “Subscribe” button, Axios will send a POST request to Rails API. Rails app will store the user information to database.

After registration is done, React app will send a GET request to Rails Api. Rails Api will return JSON array of stored users in MongoDB. And React will render a user table that looks like the following picture:

What are we going to do?

It’s like this:

When a registered user enters a message and clicks “Send” button, a push notification will show in other user’s machine.

How will it work?

When a user enters name and email, our app will request the user’s permission for push notifications. If the user allows it, a service worker will get a subscription object which contains endpoint and keys. Rails Api will receive user information and subscription object from Axios and store them in the database.

Later, when the other registered user sends a message to another user, our Rails app will load target user’s subscription from database and send a POST request encrypted with Rails server’s keys to the endpoint of target user’s subscription . The endpoint will receive the request and send a push notification to target users’ machine.

In Backend

1. Add a dependency for web push

Google recommends using libraries when sending push notifications from a server:

…web push libraries really shine, as the process of signing and sending a message can be quite complex.

They prepared a library list of push notifications for several languages. Unfortunately, there is no ruby library in there.

For that matter, webpush is a real lifesaver for ruby developers:

# webpush for rails
gem 'webpush'

2. Change user model

Since we need to save subscription information received from service worker to database, we have to change user model.

Change models/user.rb to this:

class User
include Mongoid::Document
  field :name, type: String
  field :email, type: String
  field :subscription, type: Hash
end

Change user_params in users_controller like this:

def user_params
  params.require(:user).permit(:name, :email, subscription: [:endpoint, :expirationTime, keys: [:p256dh, :auth]])
end

3. Generate VAPID keys

Application servers SHOULD generate and maintain a signing key pair usable with elliptic curve digital signature (ECDSA) over the P-256 curve.

Cut and past the following lines to config/application.rb:

require 'webpush' # This line goes to the head of the file

# One-time, on the server  
vapid_key = Webpush.generate_key

# Save these in your application server settings
puts "****** VAPID_PUBLIC_KEY *******"
puts vapid_key.public_key
puts "****** VAPID_PRIVATE_KEY *******"
puts vapid_key_.private_key

Important : you need to require webpush in the head of the file.

Run the following commands in shell:

$ bundle install
$ rails server

The console will output VAPID public key and private key:

****** VAPID_PUBLIC_KEY *******
BL1IfYkFEXmhlVi5VrLIw0Tv_?????????????????????????????????????????ktz7miXzPjeSlWO33RyuuIRg=
****** VAPID_PRIVATE_KEY *******
vyAcYUZMsJRI8GkZnXh6???????????????????y210=

Create a file webpush.yml in config directory and save keys there:

SUBJECT: mailto:johndoe@example.com
VAPID_PUBLIC_KEY: BL1IfYkFEXmhlVi5VrLIw0Tv_?????????????????????
????????????????????ktz7miXzPjeSlWO33RyuuIRg=
VAPID_PRIVATE_KEY: vyAcYUZMsJRI8GkZnXh6???????????????????y210=

Go back to config/application.rb and comment out the code snippet for key generation. Then add following lines to it:

config.before_configuration do
   env_file = File.join(Rails.root, 'config', 'webpush.yml')
      YAML.load(File.open(env_file)).each do |key, value|
      ENV[key.to_s] = value
   end if File.exists?(env_file)
end

4. Make a route and implement a method for push notification

Add the following line to config/routes.rb:

post 'sendMessage', to: 'users#send_message'

Add the following lines to app/controllers/users_controller.rb:

def send_message
  @message = params[:message]
  @user = User.find(params[:user_id])
  subscription = @user[:subscription]
  Webpush.payload_send(
      endpoint: subscription[:endpoint],
      message: @message,
      p256dh: subscription[:keys][:p256dh],
      auth: subscription[:keys][:auth],
      vapid: {
          subject: ENV['SUBJECT'],
          public_key: ENV['VAPID_PUBLIC_KEY'],
          private_key: ENV['VAPID_PRIVATE_KEY'],
          expiration: 12 * 60 * 60
      }
  )
  render json: { success: true }
end

Important : you need to require webpush in the head of the file.

In Frontend

1. Customize default service worker of react-create-app

create-react-app already has a service worker for PWA. Unfortunately, there is nothing for push notification in serviceWorker.js. We are going to customize default service worker with workbox-build and use that in our React app.

$ npm i workbox-bulid

In src directory, create a file sw-build.js then cut and past the following lines:

const workboxBuild = require('workbox-build');
// NOTE: This should be run *AFTER* all your assets are built
const buildSW = () => {
    // This will return a Promise
    return workboxBuild.injectManifest({
        swSrc: 'src/sw-template.js', // this is your sw template file
        swDest: 'build/service-worker.js', // this will be created in the build step
        globDirectory: 'build',
        globPatterns: [
            '**\/*.{js,css,html,png}',
        ]
    }).then(({count, size, warnings}) => {
        // Optionally, log any warnings and details.
        warnings.forEach(console.warn);
        console.log(`${count} files will be precached, totaling ${size} bytes.`);
    });
}

buildSW();

Note : sw-build.js will auto generate a service worker as ordered in sw-template.js and dump the generated code to build/service-worker.js.

Then create a file sw-template.js:

if ('function' === typeof importScripts) {
    importScripts(
        'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js'
    );
    /* global workbox */
    if (workbox) {
        console.log('Workbox is loaded');

        /* injection point for manifest files.  */
        workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

        /* custom cache rules*/
        workbox.routing.registerNavigationRoute('/index.html', {
            blacklist: [/^\/_/, /\/[^\/]+\.[^\/]+$/],
        });

        workbox.routing.registerRoute(
            /\.(?:png|gif|jpg|jpeg)$/,
            workbox.strategies.cacheFirst({
                cacheName: 'images',
                plugins: [
                    new workbox.expiration.Plugin({
                        maxEntries: 60,
                        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
                    }),
                ],
            })
        );

    } else {
        console.log('Workbox could not be loaded. No Offline support');
    }
}

self.addEventListener('notificationclose', function(e) {
    var notification = e.notification;
    var primaryKey = notification.data.primaryKey;

    console.log('Closed notification: ' + primaryKey);
});

self.addEventListener('notificationclick', function(e) {
    var notification = e.notification;
    var primaryKey = notification.data.primaryKey;
    var action = e.action;

    if (action === 'close') {
        notification.close();
    } else {
        clients.openWindow('https://github.com/bravemaster619');
        notification.close();
    }
});

self.addEventListener('push', function(e) {
    const title = (e.data && e.data.text()) || "Yay a message"
    var options = {
        body: 'This notification was generated from a push!',
        icon: 'images/example.png',
        vibrate: [100, 50, 100],
        data: {
            dateOfArrival: Date.now(),
            primaryKey: '2'
        },
        actions: [
            {action: 'explore', title: 'Learn more',
                icon: 'images/checkmark.png'},
            {action: 'close', title: 'Close',
                icon: 'images/xmark.png'},
        ]
    };
    e.waitUntil(
        self.registration.showNotification(title, options)
    );
});

Note: Here in sw-template.js, we added event listeners for web push notification events.

And then modify scripts configuration in package.json as the following:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build && npm run build-sw",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "build-sw": "node ./src/sw-build.js"
},

2. Change UserTable component

Modify src/components/UserTable.jsx as the following:

import React from "react"
import { alertService } from '../services/alert'
import Axios from "axios"
import { API_HOST } from "../config"
class UserTable extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            loading: true,
            users: []
        }
        this.changeMessage = this.changeMessage.bind(this)
        this.sendMessage = this.sendMessage.bind(this)
    }

    changeMessage(e, index) {
        const users = {...this.state.users}
        users[index].message = e.target.value
        this.setState(users)
    }

    sendMessage(e, index) {
        const users = {...this.state.users}
        const message = users[index].message
        if(!message) {
            alertService.showError("Please input message!")
            return
        }
        Axios.post(`${API_HOST}/sendMessage`, { message, user_id: users[index]['_id']['$oid'] }).then(res => {
            console.log(res.data.success)
            if(res.data.success) {
                alertService.showSuccess("Message sent!")
            } else {
                alertService.showError("Message did not send!")
            }
        }).catch(e => {
            console.error(e)
            alertService.showError("Message did not send!")
        })
    }

    componentDidMount() {
        Axios.get(`${API_HOST}/users`).then(res => {
            this.setState({
                users: res.data
            })
        }).catch(e => {
            alertService.showError('Cannot get user data...')
        }).finally(() => {
            this.setState({
                loading: false
            })
        })
    }

    render() {
        return (
            <div className="row mt-5 justify-content-center">
                <div className="col-12 col-lg-8">
                    <table className="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Message</th>
                                <th/>
                            </tr>
                        </thead>
                        <tbody>
                        {this.state.loading ? (
                            <tr><td>Loading...</td></tr>
                        ) : (
                            <>
                                {this.state.users.map((user, index) => {
                                    return (
                                        <tr key={index}>
                                            <td>{user.name}</td>
                                            <td>{user.email}</td>
                                            <td>
                                                <input
                                                    type="text"
                                                    className="form-control"
                                                    onChange={(e) => this.changeMessage(e, index)}
                                                />
                                            </td>
                                            <td>
                                                <button
                                                    type="button"
                                                    className="btn btn-primary"
                                                    onClick={(e) => this.sendMessage(e, index)}
                                                >
                                                    Send
                                                </button>
                                            </td>
                                        </tr>
                                    )
                                })}
                                {!this.state.users.length && (
                                    <tr><td>Loading...</td></tr>
                                )}
                            </>
                        )}
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }

}

export default UserTable

3. Change Root Component

Modify src/components/Root.jsx as the following:

import React from "react"
import Axios from "axios"
import { alertService } from '../services/alert'
import SubscribeForm from "./SubscribeForm"
import UserTable from "./UserTable"
import { API_HOST, VAPID_PUBLIC_KEY } from "../config"

class Root extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            name: '',
            email: '',
            sendingRequest: false,
            subscription: null,
        }
        this.changeName = this.changeName.bind(this)
        this.changeEmail = this.changeEmail.bind(this)
        this.subscribe = this.subscribe.bind(this)
    }

    changeName(e) {
        let name = e.target.value
        this.setState({name})
    }

    changeEmail(e) {
        let email = e.target.value
        this.setState({email})
    }

     urlBase64ToUint8Array(base64String) {
        const padding = '='.repeat((4 - base64String.length % 4) % 4);
        const base64 = (base64String + padding)
            .replace(/-/g, '+')
            .replace(/_/g, '/');

        const rawData = window.atob(base64);
        const outputArray = new Uint8Array(rawData.length);

        for (let i = 0; i < rawData.length; ++i) {
            outputArray[i] = rawData.charCodeAt(i);
        }
        return outputArray;
    }

    subscribe() {
        if (!this.state.name) {
            return alertService.showError('Please input name!')
        }
        if (!this.state.email) {
            return alertService.showError('Please input email!')
        }
        if (!window.Notification) {
            return alertService.showError("You cannot use notification service")
        }
        if (!('serviceWorker' in navigator)) {
            return alertService.showError('Service worker not registered')
        }
        window.Notification.requestPermission().then(res => {
            if (res === "granted") {
                let context = this
                window.navigator.serviceWorker.ready.then(function (reg) {
                    reg.pushManager.subscribe({
                        userVisibleOnly: true,
                        applicationServerKey: context.urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
                    }).then(sub => {
                        Axios.post(`${API_HOST}/users`, {
                            name: context.state.name,
                            email: context.state.email,
                            subscription: sub
                        }).then(res => {
                            if (res.data && res.data._id) {
                                context.setState({
                                    subscription: sub
                                })
                            } else {
                                alertService.showError('Subscribing failed!')
                            }
                        })
                    })
                })
            } else {
                alertService.showError("You blocked notification.")
            }
        })
    }

    render() {
        return (
            <div className="container">
                {this.state.subscription ? (
                    <UserTable
                        subscription={this.state.subscription}
                    />
                ) : (
                    <SubscribeForm
                        name={this.state.name}
                        email={this.state.email}
                        changeName={this.changeName}
                        changeEmail={this.changeEmail}
                        subscribe={this.subscribe}
                        sendingRequest={this.state.sendingRequest}
                    />
                )}
            </div>
        )
    }

}

export default Root

4. Add VAPID public key to React app

Modify src/config.js as the following:

export const API_HOST = 'http://localhost:3000'
export const VAPID_PUBLIC_KEY= 'BL1IfYkFEXmhlVi5VrLIw0Tv_??????
???????????????????????????????????ktz7miXzPjeSlWO33RyuuIRg='

VAPID_PUBLIC_KEY was generated earlier by webpush gem.

5. Enable service worker in React app

Go to src/index.js and change the following line:

serviceWorker.unregister();

to this one:

serviceWorker.register();

6. Deploy React App to server

Since service worker is running on only production environment, it is a good idea to build our React app and host it to a server.

Note : The built project must be located directly under the WebRoot directory, i.e. http://localhost is OK but http://localhost/rails-react-app won’t work.

If you enter name and email and press “Subscribe” button the browser will ask your permission. Allow it and start sending messages!

If you’re seeing this, well done! You implemented Push Notification in your web app! Notice that the deployed web app is PWA, too.

Note: PWA audit might not be fully passed in http. If you’re using https and fail on http to https redirect test, add the following to .htaccess file:

RewriteEngine On
RewriteCond %{SERVER\_PORT} !^443$
RewriteRule .\* https://%{SERVER\_NAME}%{REQUEST\_URI} [R,L]

Useful Links

You can get the working source code here.
You can read my previous article of building a React web app with Rails Api.

Forem: bravemaster619

One second to read GitHub code with VS Code

Simplest way to embed a Youtube video in your React app

Overview

1. Make a component for iframe:

2. Add some css for responsiveness:

3. Use it

Result

How to use socket.io-client correctly in React app

Background

How to prevent multiple socket connections and events in React

bravemaster619 ・ Mar 22 '20

1. Create Socket Context

2. Use socket context and provide a value

3. Now you can use socket in any child component

What is useContext?

What is useCallback? Why did you put every handlers inside useCallback?

What is useEffect and that [socket] array provided as the second argument?

BONUS

How to pass arguments to custom composer script

Typescript: is it possible to apply multiple method decorators using class decorator?

Event-driven approach in React hooks?

Add a markdown version for DEV badge link

UPDATE

GitHub Pages is temporarily down for maintenance

What is your preferred way to handle authentication in SPA?

How to prevent multiple socket connections and events in React

1. Connect only once

2. Bind and emit events only once - put them in the correct place

3. If you're unsure, there is always this hack

UPDATE - useContext approach

How to use socket.io-client correctly in React app

bravemaster619 ・ Dec 16 '20

Funniest users in Stack Overflow and records held by them

Conclusion

How to convert a React-Rails Web App to PWA, Push Notification using VAPID

How to convert a React-RoR Web App to a PWA + Push Notification using VAPID

What have we got?

What are we going to do?

How will it work?

In Backend

1. Add a dependency for web push

2. Change user model

3. Generate VAPID keys

4. Make a route and implement a method for push notification

In Frontend

1. Customize default service worker of react-create-app

2. Change UserTable component

3. Change Root Component

4. Add VAPID public key to React app

5. Enable service worker in React app

6. Deploy React App to server

Useful Links

What is `useContext`?

What is `useCallback`? Why did you put every handlers inside `useCallback`?

What is `useEffect` and that `[socket]` array provided as the second argument?