alanhc
alanhc

初探libp2p

Anonymous published on

建立signal 節點 

import { sigServer } from '@libp2p/webrtc-star-signalling-server'
const server = await sigServer({
	port: 24642,
	host: '0.0.0.0',
	metrics: false
})

到127.0.0.1:24642訪問即可看到 https://i.imgur.com/fPLT7fR.png

Read More

Chat聊天界面初探

Anonymous published on

chat

npx create-next-app chat pnpm add @chatscope/chat-ui-kit-react pnpm add @chatscope/chat-ui-kit-styles

Read More

初探orbitdb

Anonymous published on

orbitdb

npm init -y package.json 加入："type": "module" pnpm add @orbitdb/core@next pnpm add ipfs-core

Read More

加入PWA功能

Anonymous published on

前置

  • 先準備 service worker、manifacts.json、logo.png
  • 引入套件：pnpm add next-pwa
  • 修改 next.config.js
const withPWA = require('next-pwa')({
	dest: 'public'
})
...
module.exports = withPWA(nextConfig);

產生icon

  • 到public/，新增logo.png，並下：npx pwa-asset-generator logo.png icons

產生manifest

  • 到public/，新增 manifest.json
{
	"display": "standalone",
	"scope": "/",
	"start_url": "/",
	"name": "Alan Tseng",
	"short_name": "alanhc",
	"display": "minimal-ui",
	"icons": [
		{
			"src": "icons/manifest-icon-192.maskable.png",
			"sizes": "192x192",
			"type": "image/png",
			"purpose": "any"
		},
		{
			"src": "icons/manifest-icon-192.maskable.png",
			"sizes": "192x192",
			"type": "image/png",
			"purpose": "maskable"
		},
		{
			"src": "icons/manifest-icon-512.maskable.png",
			"sizes": "512x512",
			"type": "image/png",
			"purpose": "any"
		},
		{
			"src": "icons/manifest-icon-512.maskable.png",
			"sizes": "512x512",
			"type": "image/png",
			"purpose": "maskable"
		}
	]
}

加入link、meta tag

  • 到 next-seo.config.js
export default {
	...
	additionalMetaTags:{
		{ name: "apple-mobile-web-app-capable", content: "yes" }
	},
	additionalLinkTags: [
		...
		{ rel: 'manifest', href: "/manifest.json" },
		{ rel: "apple-touch-icon", href: "icons/apple-icon-180.png" },

看到右上角有下載就成功了🎉

Read More
0%