Jane said (YouChat)

The Web communication application based on webSocket (compatible with mobile terminal) uses Node + Express to build the basic HTTP service in the background, and uses socket. IO to build the WS service of the communication layer. It has realized some common functions such as group chat for all members, private chat for a member and new message prompt. The front end uses native JS to write to realize the function of sending expressions and sending local pictures, and also uses some concepts related to manifest, which can be directly entered through the desktop.

Git repository

Github.com/cp0725/YouC…

Start the process

cd/YouChat

npm install

node server.js

Local access the address http://127.0.0.1:8686/YouChat

(Despite the fact that dynamically compiling Webpack is a build command that runs every time the code changes)

The login page

Group chat and private chat

Send memes Send local pictures

Mobile UI presentation

H5 Performance effect of Notification





The other two are manifest and Notification

Manifest manifest is a technical point used by PWA. We want to learn about PWA for a long time, until recently we read the official documentation. We use the link tag to introduce a manifest configuration file in the page header. In the manifest configuration file, you can configure the page icon, startup animation, application name and other attributes, and then send the application to the desktop through the browser. Next time you can directly enter the desktop, the performance effect is similar to the original app, because some toolbar and other operation areas of the browser are hidden. Interactive performance is also much better, and here is the relevant presentation UI.

Desktop icon

Start the animation

The main function

Manifest is just a technical point in the PWA-related technology stack. PWA also involves offline loading and many other things. This application just uses manifest to configure the presentation UI.

Notification The H5 API is used to trigger Notification messages based on the browser, not the page. That is, if you minimize the page or switch to another TAB page, the Notification message can still be triggered. However, there is a limitation that Chrome must use HTTPS, whereas Safari does not, and the UI is shown above.