네트워크 정보 API를 사용하여 Adaptive Compliance에 대한 서비스 제공

지난 몇 년 동안 우리는 줄곧 성능을 고려해 왔다.인터넷 개발에 적응하려면 우리의 최종 사용자를 고려하여 저급 설비와 인터넷 연결을 위해 체험과 제품을 개발하고 우리의 업무 품질을 희생하지 않도록 해야 한다.

네트워크 정보 API
Network information API 우리는 우리의 디자인을 다시 고려하고 사용자 인터페이스를 만드는 데 도움을 주었다. 우리는 사용자의 연결 속도를 감지하고 행동을 취할 수 있기 때문이다.이 API는 실험 모드이지만 크롬에서 제공되고 있으며 머지않아 더 많은 브라우저가 생길 것이다.
API는 읽기 전용 속성navigator.connection을 사용하여 사용할 수 있습니다.nestednavigator.connection.effectiveType 속성이 사용하는 네트워크를 공개합니다.effectiveType 속성 외에 navigator.connection.type 사용자의 물리적 네트워크 유형도 공개했다.
왕복 시간 도량과 유효 대역폭 추정에 관한 다른 정보도 공개됐다.
다음 표에서는 사양명세에 표시된 유효한 연결 유형을 정의합니다.
발사형 컴퓨터 단층 스캐너
최소 RTT(ms)
최대 다운스트림 속도(Kbps)
해석하다
느리다
2000
50
이 네트워크는 일반 텍스트 페이지와 같은 소형 전송에만 적용된다.
2g
1400
70
이 네트워크는 작은 이미지를 전송하기에 적합하다.
3g
270
700
이 네트워크는 고해상도 이미지, 오디오, SD 영상 등 대형 자산의 전송에 적용된다.
4g
0
∞
이 네트워크는 고화질 영상, 실시간 영상 등에 적용된다.

반응/예작용을 가진 자체 적응 부품.
네트워크 API를 사용하여 성능 지표, 특히 네트워크 구성 요소에 대한 속도를 높일 수 있습니다.예를 들어, 우리가 간단한 React 구성 요소를 가지고 있다면, 해상도와 크기에 따라 다른 이미지를 렌더링할 수 있다.이 구성 요소는 네트워크 의식을 가지고 연결 유형을 효과적으로 처리해야 한다.navigator.onLine 속성을 사용하면 우리는 오프라인 사용 상황을 검측할 수 있고 PWA와 자체 적응 구성 요소와 오프라인 검측을 결합시켜 사용자에게 일류의 체험을 제공할 수 있다.
Dell<Img /> 구성 요소는 다음과 같은 출력을 효과적으로 제공합니다.

4g: 고해상도 이미지(2400픽셀)

3h: 중간 해상도 이미지(1200px)

2g: 저해상도 이미지(600px)

오프라인: 사용자에게 경고하는 자리 표시자

React를 사용하여 네트워크 인식 구성 요소를 생성합니다.naive 구성 요소는 src 속성을 수락하고 접두어 이미지를 제공합니다.src가 my-awesome-image.jpg와 같으면 상대적인 출력은 hq-my-awesome-image.jpg과 md-my-awesome-image.jpglofi-my-awesome-image.jpg일 수 있다.
다음과 같이 간단한 React 구성 요소를 먼저 생성합니다.

import React, {Component} from 'react';

export default class Img extends Component {
  render() {
    const {src} = this.props;
    return (<img src={src}/>)
  }
}

그런 다음 네트워크 변화를 감지하기 위한 전용 방법을 만듭니다.

class Img extends Component {
  //...
  detectNetwork = () => {
    const {connection = null, onLine = false} = navigator;
    if (connection === null) {
      return 'n/a';
    }
    if(!onLine) {
      return 'offline';
    }
    return {effectiveType = '4g'} = connection;
  }
  //...
}

마지막으로 우리는 출력을 다음과 같이 보여야 한다.

class Img extends Component {
  //...
  render() {
    const {src, ...rest} = this.props;
    const status = this.detectNetwork();
    // The network API is not available :()
    if (status === 'n/a') {
      return <img src={src} {...rest}/>
    }
    if (status === 'offline') {
      return <div>You are currently offline</div>
    }
    const prefix = status === '4g' ? 'hq' : status === '3g' ? 'md' : 'lofi';
    return <img src={`${prefix}-${src}`} {...rest}/>
  }
  //...
}

고급분량
고급 구성 요소는 당신의 디자인 시스템을 확장하고 네트워크 감지 구성 요소를 더욱 우아하게 처리하기 위해 사실상 해결 방안을 제공할 수 있습니다.

const emptyComponent = () => null;

const detectNetwork = () => {
  const {connection = null, onLine = false} = navigator;
  if (connection === null) {
    return 'n/a';
  }
  if (!onLine) {
    return 'offline';
  }
  return ({effectiveType = '4g'} = connection);
};

const withNetwork = (
  components = {
    '4g': emptyComponent,
    '3g': emptyComponent,
    '2g': emptyComponent,
    offline: emptyComponent,
    'n/a': emptyComponent
  }
) => props => {
  const status = detectNetwork();
  const NetworkAwareComponent = components[status];
  return <NetworkAwareComponent {...props} />;
};

고급 구성 요소를 쉽게 사용할 수 있습니다.

import React from 'react';
import withNetwork from './hocs//withNetwork';

export default withNetwork({
  offline: () => <div>This is offline</div>,
  '4g': () => <div>This is 4g</div>,
  '3g': () => <div>This is 3g</div>,
  '2g': () => <div>This is 2g</div>,
  'n/a': () => <div>Network API is not supported 🌐</div>,
});

또한 고급 구성 요소를 단순화하고 fast 및 slow 네트워크 연결 구성 요소를 다음과 같이 구분할 수 있습니다.

const detectNetwork = () => {
  const {connection = null, onLine = false} = navigator;
  if (connection === null) {
    return 'n/a';
  }
  if (!onLine) {
    return 'offline';
  }
  const {effectiveType = '4g'} = connection;
  return (/\slow-2g|2g|3g/.test(effectiveType)) ? 'slow' : 'fast';
};

반작용력이 있는 동적 로드react-loadable를 사용하면 이 예시를 더 잘 알 수 있고 동적 가져오기를 사용하여 구성 요소를 불러올 수 있습니다.이런 방식을 통해 우리는 필요에 따라 블록을 다시 불러와서 더욱 빠른 네트워크를 얻을 수 있다.

import React from 'react';
import withNetwork from './hocs/withNetwork';

import Loadable from 'react-loadable';

const HiQ = Loadable({
  loader: () => import('./hiQualityImg')
});

// For slow networks we don't want to create a network overhead
const SlowNetworkComponent = () => <div>That's slow or offline</div>;

export default withNetwork({
  offline: () => <div>This is offline</div>,
  '4g': () => <HiQ />,
  '3g': () => <SlowNetworkComponent />,
  '2g': () => <SlowNetworkComponent />,
  'n/a': () => <SlowNetworkComponent />
});

Vue 구성 요소
Addy Osmani Vue와 자체 적응 구성 요소를 사용하는 좋은 예가 있습니다.Vue 구성 요소의 예는 다음과 같습니다.

<template>
  <div id="home">
    <div v-if="connection === 'fast'">
      <img src="./hq-image.jpg" />
    </div>
    <div v-if="connection === 'slow'">
      <img src="./lofi-image.jpg" />
    </div>
  </div>
</template>

Vue 동적 로드
Vue는 조건부 가져오기를 사용하여 동적 로드를 우아하게 처리할 수 있습니다.

Vue.component(
  'async-network-example',
  // The `import` function returns a Promise.
  () => detectNetwork() === 'fast' ? import('./hq-component') : import('./lofi-component')
);

웹 구성 요소
마지막으로, 우리는 web components 을 사용할 수 있으며, 다시 사용할 수 있는 구성 요소를 만들기 위해 별도의 프레임워크가 필요하지 않으며, 우리는 나중에 이 구성 요소를 사용할 수 있다.
간단한 방법은 다음과 같습니다.

const detectNetwork = () => {
  const { connection = null, onLine = false } = navigator;
  if (connection === null) {
    return "n/a";
  }
  if (!onLine) {
    return "offline";
  }
  const { effectiveType = "4g" } = connection;
  return /\slow-2g|2g|3g/.test(effectiveType) ? "slow" : "fast";
};

export class NetworkMedia extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });

    const parsed = this.getAttributeNames().reduce((acc, key) => {
      return { ...acc, [key]: this.getAttribute(key) };
    }, {});
    const status = detectNetwork();
    const { hq, lofi, ...rest } = parsed;
    const htmlAttrs = Object.assign({}, rest, {
      src: status === "fast" ? hq : lofi
    });

    const attrs = Object.keys(htmlAttrs)
      .map(key => `${key}=${htmlAttrs[key]}`)
      .join(" ");
    shadowRoot.innerHTML = `
            <img ${attrs} />
        `;
  }
}

웹 구성 요소를 설명하고 최종적으로 사용해야 합니다.

import { NetworkMedia } from "./network-media.js";

customElements.define("network-media", NetworkMedia);
const ref = document.getElementById("ref");

<p>Lorem ipsum</p>
<network-media
      hq="https://dummyimage.com/600x400/000/fff&text=fast"
      lofi="https://dummyimage.com/600x400/000/fff&text=slow"
    ></network-media>

HTM(Hyperscript 태그의 태그)
HTM는 제이슨 밀러가 개발한 아주 좋은 소형 라이브러리로 JSX와 같은 문법으로 다시 사용할 수 있는 모듈을 만들 수 있다.

<script type="module">
      import {
        html,
        Component,
        render
      } from "https://unpkg.com/htm/preact/standalone.mjs";
      const detectNetwork = () => {
        const { connection = null, onLine = false } = navigator;
        if (connection === null) {
          return "n/a";
        }
        if (!onLine) {
          return "offline";
        }
        const { effectiveType = "4g" } = connection;
        return /\slow-2g|2g|3g/.test(effectiveType) ? "slow" : "fast";
      };
      class Media extends Component {
        render({ hq, lofi }) {
          const status = detectNetwork();
          return html`
            <img src="${status === "fast" ? hq : lofi}" />
          `;
        }
      }

      render(html`<${Media} hq="./hq.jpg" lofi="./lofi.jpg" />`, document.body);
    </script>

바닐라 자바스크립트
또한 네트워크 및 상태 검색을 위한 유틸리티 지원을 작성하고 제공되는 사용자 환경을 단계적으로 개선할 수 있습니다.Google은 사용자가 오프라인 상태일 때 경고를 표시하고, 네트워크 속도에 따라 서로 다른 자원을 얻을 수 있으며, 심지어는 저가 네트워크에 서로 다른 묶음 서비스를 제공할 수도 있습니다.

const detectNetwork = () => {
  const {
    effectiveType
  } = navigator.connection
  console.log(`Network: ${effectiveType}`)
}


if (navigator.connection) {
  navigator.connection.addEventListener('change', detectNetwork)
}

if (navigator.onLine) {
  window.addEventListener('offline', (e) => {
    console.log('Status: Offline');
  });
  window.addEventListener('online', (e) => {
    console.log('online');
  });
}

한층 더 읽다

Adaptive Serving using JavaScript and the Network Information API

https://deanhume.com/dynamic-resources-using-the-network-information-api-and-service-workers/

Connection-Aware Components

너도 vorillaz.com에서 이 문장을 찾을 수 있다