이번 주말에 나는 내 프로젝트"web desktop environment"(자세한 내용을 읽을 수 있음)를 PWA(프로그레시브 웹 앱)로 변환했으며 그 과정에서 내 PWA를 훨씬 더 생생하게 채울 수 있는 정말 멋진 트릭을 배웁니다. , 트릭은 그의 위치에 상대적인 PWA 앱 창의 배경을 만드는 것이었습니다.

라이브 라이브 🎞🎞

직접 만들어보세요

import React, { useState, useEffect } from "react";
// import our css styles
import "./styles.css";

export default function App() {
  const [top, setTop] = useState(0); // track to position of the window relative to the top
  const [left, setLeft] = useState(0); // track to position of the window relative to the left
  useEffect(() => {
    const loop = setInterval(() => {
      if (window.screen.availWidth - window.innerWidth === 0) { // check if we are in window maximize mode
// if we are in window maximize mode reset the background position        
        setTop(0);
        setLeft(0);
      } else { // else set the top and left states to the window location
        setTop(window.screenY)
        setLeft(window.screenX)
      }
    }, 500); // check only 2 times a second to avoid performance lost
return () => clearInterval(loop); // stop loop when component unmount
  }, [])
  return (
    <div className="App">
      <div
        className="Background"
        style={{
                    width: window.screen.width, //set the image full resolution base on screen resolution
                    height: window.screen.height,
                    transform: `translate(
            -${left && left % window.screen.availWidth /* in case we are running on a secondry ( left will be equal to primary screen + it's position on the relatve screen) screen we want to only get the position relative to the screen we are running on */}px,
            -${top && top - 40 /* remove 40px to account for top tabs and navigation bar */}px
             )`,}}
        />
    </div>
  );
}

/* fullscreen */
.App {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.Background {
  background: url("https://picsum.photos/1920/1080"); /* random image api */
  position: absolute;
  transition: transform 400ms; /* animation for background position change */
}

데모

웹 데스크탑 환경을 확인하세요

슈무엘히즈미 / 웹 데스크탑 환경

웹/노드 기반 크로스 플랫폼 데스크톱 환경

웹 인터페이스가 있는 크로스 플랫폼 데스크톱 환경

설치 및 실행 가이드

먼저 node와 npm이 설치되어 있는지 확인해야 합니다. npm 7.x와 함께 node 14.x를 사용하는 것이 좋습니다.
이제 다음 명령을 사용하여 "web-desktop-environment"를 설치합니다.npm install @web-desktop-environment/home-edition-server 또는 npm install @web-desktop-environment/development-edition-server --unsafe-perm "web-desktop-environment"의 개발 에디션.
"web-desktop-environment"서버가 설치된 후 다음을 사용하여 실행할 수 있습니다.
"web-desktop-environment"의 개발 에디션에 대한 명령 web-desktop-home 또는 web-desktop-dev.
이제 "web-desktop-environment"가 실행 중이므로 "https://web-desktop-environment.vercel.app "을 입력하고 연결할 수 있습니다.
서버에 연결하려면 서버 호스트와 포트를 입력해야 합니다.
서버를 로컬에서 실행하는 경우 기본localhost 호스트를 유지할 수 있습니다. 그렇지 않으면 서버 호스트 IP를 입력합니다.
서버 포트를 얻으려면 서버 콘솔 출력을 볼 수 있습니다. 시작 부분 어딘가에 다음과 같이 인쇄되어야 합니다.

View on GitHub

웹 기반 데스크톱 환경

shmuelhizmi ・ 2020년 7월 17일 ・ 2분 읽기

#node #typescript #react #linux