네트워크 상태 API 및 SolidJS를 사용하여 사용자 경험 개선

사용자의 네트워크 연결을 기반으로 콘텐츠를 표시하려는 경우 네트워크 API가 정말 빛납니다. 예를 들어 사용자가 높은 대역폭으로 연결되어 있으면 고해상도 이미지를 제공하고 더 나은 연결이 없으면 저해상도 이미지를 제공할 수 있습니다.

Solidjs는 Virtual DOM을 웹 앱에 적용하지 않고도 웹 속도가 매우 빠른 가벼운 반응형 환경을 제공합니다. Solidjs는 미세한 반응성의 원리에 따라 작동합니다.

네트워크 상태와 관련된 마운트의 등록 이벤트를 처리하고 정리 시 제거하는 후크useNetwork를 생성합니다.
useNetwork.jsx

import { onCleanup, onMount } from "solid-js";
import { createStore } from "solid-js/store";
export default function useNetwork() {

  const [network, setNetwork] = createStore({
    isOnline: true,
    connection: {
      type: null,
      effectiveType: null,
      downlink: null,
      rtt: null,
      saveData: null,
    },
  });

  const handleStatusChange = (e) => {
    const isOnline = e.type === "online";
    setNetwork("isOnline", isOnline);
  };

  const checkNetworkStatus = () => {
    const isOnline = window.navigator.onLine;
    setNetwork("isOnline", isOnline);
  };

  const handleConnectionChange = (event) => {
    const connection = event?.target || window.navigator.connection || {};

    setNetwork("connection", {
      type: connection.type,
      downlink: connection.downlink,
      effectiveType: connection.effectiveType,
      rtt: connection.rtt,
      saveData: connection.saveData,
    });
  };
  onMount(() => {
    checkNetworkStatus();
    if (typeof window.navigator.connection !== "undefined") {
      handleConnectionChange();
      window.navigator.connection.addEventListener(
        "change",
        handleConnectionChange
      );
    }
    window.addEventListener("online", handleStatusChange);
    window.addEventListener("offline", handleStatusChange);
  });

  onCleanup(() => {
    window.removeEventListener("online", handleStatusChange);
    window.removeEventListener("offline", handleStatusChange);
    if (typeof window.navigator.connection !== "undefined") {
      window.navigator.connection.removeEventListener(
        "change",
        handleConnectionChange
      );
    }
  });

  return {
    network,
  };
}

onMount 및 onCleanup는 solidjs의 수명 주기 함수입니다. onMount는 구성 요소가 마운트될 때 실행되고 onCleanup는 구성 요소가 마운트 해제될 때 실행됩니다.

여기서 우리는 초기 값을 가져오고 읽기 및 쓰기 튜플을 반환하는 createStore 함수를 사용하여 저장소를 만들었습니다.
isOnline 필드는 현재 사용자 네트워크를 추적하고 부울 값을 저장합니다. 개발 도구 > 네트워크에서 네트워크 상태를 offline로 변경하여 이를 테스트할 수 있습니다.
type 필드에는 장치가 Wi-Fi와 같은 네트워크와 통신하는 데 사용하는 연결 유형이 포함됩니다.
effectiveType에는 3g, 4g 등과 같은 네트워크 연결 유형이 포함되어 있습니다.
downlink에는 25kbps의 가장 가까운 배수로 반올림된 초당 메가비트 단위의 유효 대역폭 추정치가 포함됩니다.
rtt에는 현재 연결의 예상 유효 왕복 시간이 포함되며 가장 가까운 25밀리초의 배수로 반올림됩니다.
saveData 사용자가 사용자 에이전트에서 데이터 사용량 감소 옵션을 설정한 경우 true와 같은 부울 값을 포함합니다.
useNetwork를 App.jsx에 연결해 보겠습니다. Hope UI를 사용하여 멋진 UI를 추가했습니다.
App.jsx

import {
  Box,
  CircularProgress,
  CircularProgressIndicator,
  CircularProgressLabel,
  Container,
  GridItem,
  Heading,
  HopeProvider,
  HStack,
  SimpleGrid,
  Tag,
  Text,
  VStack,
} from "@hope-ui/solid";
import ThemeSwitcher from "./components/ThemeSwitcher";
import useNetwork from "./hooks/useNetwork";

function App() {
  const { network } = useNetwork();
  return (
    <HopeProvider config={{ initialColorMode: "dark" }}>
      <Box minH={"100vh"} h="$full" w={"$full"} py="$10">
        <VStack spacing={"$3"}>
          <Heading textAlign={"center"} fontSize={"$6xl"}>
            Network &nbsp;
            <Box as="span" color={"$primary10"}>
              Status
            </Box>
          </Heading>

          <HStack spacing={"$2"}>
            <Tag
              colorScheme={network.isOnline ? "success" : "danger"}
              size={"lg"}
              variant="dot"
              dotPlacement="start"
            >
              <Show when={network.isOnline} fallback="Offline">
                Online
              </Show>
            </Tag>

            <ThemeSwitcher />
          </HStack>
        </VStack>
        <Container mt={"$10"}>
          <SimpleGrid
            w={"$full"}
            columns={{ "@initial": 1, "@sm": 2, "@md": 2, "@xl": 4 }}
            justifyContent="center"
          >
            <GridItem mx={"auto"}>
              <CircularProgress thickness={"$0_5"} size={"$xs"} value={100}>
                <CircularProgressIndicator color={"$warning10"} />
                <CircularProgressLabel>
                  <VStack spacing={"$6"}>
                    <Heading fontSize={"$xl"}> Effective Type</Heading>
                    <Text fontSize={"$xl"}>
                      {network.connection?.effectiveType}
                    </Text>
                  </VStack>
                </CircularProgressLabel>
              </CircularProgress>
            </GridItem>
            <GridItem mx={"auto"}>
              <CircularProgress size={"$xs"} value={100} thickness={"$0_5"}>
                <CircularProgressIndicator color={"$success10"} />
                <CircularProgressLabel>
                  <VStack spacing={"$6"}>
                    <Heading fontSize={"$xl"}> Downlink</Heading>
                    <Text fontSize={"$xl"}>{network.connection.downlink} </Text>
                  </VStack>
                </CircularProgressLabel>
              </CircularProgress>
            </GridItem>

            <GridItem mx={"auto"}>
              <CircularProgress thickness={"$0_5"} size={"$xs"} value={100}>
                <CircularProgressIndicator color={"$primary10"} />
                <CircularProgressLabel>
                  <VStack spacing={"$6"}>
                    <Heading fontSize={"$xl"}> Rtt</Heading>
                    <Text fontSize={"$xl"}>{network.connection.rtt}</Text>
                  </VStack>
                </CircularProgressLabel>
              </CircularProgress>
            </GridItem>
            <GridItem mx={"auto"}>
              <CircularProgress thickness={"$0_5"} size={"$xs"} value={100}>
                <CircularProgressIndicator color={"$whiteAlpha10"} />
                <CircularProgressLabel>
                  <VStack spacing={"$6"}>
                    <Heading fontSize={"$xl"}> Type</Heading>
                    <Text fontSize={"$xl"}>{network.connection?.type}</Text>
                  </VStack>
                </CircularProgressLabel>
              </CircularProgress>
            </GridItem>
          </SimpleGrid>
        </Container>
      </Box>
    </HopeProvider>
  );
}

export default App;

거친 망 갈람 / 솔리드 네트워크 상태

solidjs의 웹 네트워크 상태 후크

용법

이러한 템플릿 종속성은 pnpm을 통해 pnpm up -Lri를 통해 유지됩니다.
이것이 pnpm-lock.yaml 가 표시되는 이유입니다. 즉, 모든 패키지 관리자가 작동합니다. 템플릿을 복제하면 이 파일을 안전하게 제거할 수 있습니다.

$ npm install # or pnpm install or yarn install

Solid 웹사이트에서 자세히 알아보고 Discord에서 대화를 나누세요.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

npm dev 또는 npm 시작

개발 모드에서 앱을 실행합니다.
브라우저에서 보려면 http://localhost:3000을 여십시오.
수정하면 페이지가 다시 로드됩니다.

npm 실행 빌드

프로덕션용 앱을 dist 폴더에 빌드합니다.
프로덕션 모드에서 Solid를 올바르게 번들하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!

전개

당신은 할 수 있습니다…

View on GitHub