서비스 작업자를 사용하여 브라우저 탭에서 통신하는 방법

이 기사는 Sitepoint의 일일 구독 뉴스 레터 버전에서 발췌 한 것으로, 개발자에게 프론트 엔드, 백엔드, 디자인 및 사용자 경험, 뉴스, 비즈니스 및 기타 분야에서 선택된 링크를 제공하여 최신 지식과 정보를 유지하는 데 도움이됩니다. 자세한 내용을 배우고 가입하여 구독하고 여기를 방문하십시오.

Tim Evko는 주로 React를 기반으로 코드 기반을 관리하는 프론트 엔드 개발자이며 전문가에게 구직 정보를 제공하는 데 중점을 둔 회사 인 Execthread의 팀 리더이기도합니다. 여가 시간에 그는 지역 체육관에서 운동을하고 더 나은 경쟁력있는 Crossfit 운동 선수가되기 위해 노력하고 있습니다. 현재 가장 관심있는 기술적 개념이나 트렌드는 무엇입니까?

저는 최근에 서비스 작업자 기술, 특히 더 빠른 웹 사이트로드 및 빠른 상호 작용을 위해 집착했습니다. 저는 웹 응용 프로그램의 성능과 오프라인 기능을 좋아하며, 커뮤니티는 탄력적이고 보편적이며 빠른 응용 프로그램을 구축하는 데 더 큰 관심을 가질 수 있다고 생각합니다. 서비스 작업자는 많은 기능을 구현할 수 있기 때문에 특히 흥미 롭습니다. 최근에 서비스 작업자를 사용하여 브라우저 탭간에 통신 할 수 있다는 사실을 알게되어 캐시가 만료되면 각 개별 탭이 다시로드 될 수 있습니다. 이 기술은 마스터하기가 쉽지 않지만, 그것이 존재하게되어 매우 기쁩니다!

이 기술에 대해 많이 모르겠습니다. 자세히 소개 할 수 있습니까?

브라우저에서 서비스 작업자는 현재 활성화 된 탭뿐만 아니라 사용 가능한 범위 내의 모든 클라이언트를 제어 할 수 있습니다. 즉, Service Worker가 브라우저의 웹 사이트와 통신 할 때 현재 웹 사이트를 표시하는 모든 탭과 통신합니다. 서비스 작업자와 함께 제공되는 Message API를 사용할 때는이 기능을 활용할 수 있습니다. 자세한 예는 여기에서 찾을 수 있습니다. execthread에서는이 기능을 사용하여 서비스 작업자가 새 태그가있는 이전 CSS 파일과 함께 페이지를 제공하는 경우 모든 탭을 다시로드합니다. 최근에 건축, 설계 또는 제작 한 흥미로운 작품을 설명하십시오 (또는 링크!). 왜 이것을 자랑스럽게 생각하십니까?

나는 최근에 가상 DOM 알고리즘이 어떻게 작동하는지 이해하기 시작했으며, 프로세스에서 내 자신의 구성 요소 렌더러 : Baddom [Github]을 구축했습니다. 600 바이트 만 있으며 전체 웹 응용 프로그램을 구축하는 데 사용할 수 있습니다. 600 바이트에 불과하기 때문에이 사실을 자랑스럽게 생각하며 전체 웹 애플리케이션을 구축하는 데 사용할 수 있습니다. 나쁜 도는 실제로 매우 간단하므로 내가 좋아하는 이유입니다. 노드 (예 : 페이지의 div) 및 es6 템플릿 문자열을 제공하는 경우 템플릿 문자열과 일치하도록 첫 번째 div를 업데이트합니다. 기본적으로 대상이 템플릿 문자열처럼 보이게하는 DOM 분화 함수입니다. 그러나 ES6 템플릿 문자열이므로 차별화에 논리를 추가 할 수 있습니다. 즉, 논리를 기반으로하는 모든 상태를 업데이트하기 위해 언제든지 분화 기능을 호출 할 수 있으며 원래 DOM 대상이 새 상태와 일치합니다. 전체 프로세스는 템플릿 문자열을 사용하여 보이지 않는 요소를 생성하고 템플릿 문자열을 기반으로하는 요소까지 대상 요소 (및 자식)를 비교하여 모든 DOM 노드를 찾거나 삭제하거나 수정합니다. 업데이트가 필요하지 않은 요소를 업데이트하지 않으므로 브라우저에서 불필요한 처리를 방지하기 때문에 효율적입니다. 당신이 100 개의 중첩 요소가 있고 그 중 하나만 클래스 이름이 변경되면, 악의는 요소를 찾아 클래스 이름 만 변경합니다.

어떻게 만들었습니까?

대부분의 프로젝트와 마찬가지로 Codepen에 구축했습니다. 가능한 한 간단하게 유지하고 가능한 한 빌드 도구/설정을 최소화하는 데 집중하고 싶습니다. 이런 식으로 어떤 플랫폼이나 장치를 사용하든 누구나 이해하고 참여하는 것이 더 쉽습니다. Codepen은 프론트 엔드 라이브러리를 처리하기 위해 IDE를 설정할 필요가 없기 때문에 훌륭합니다. 나는 하루 종일 Codepen, 커뮤니티, 그리고 다른 사람들의 일에서 배운 것에 대해 이야기 할 수 있지만 모든 사람들이 스스로 그것을 봐야한다고 말합니다. 모듈 패턴을 사용하여 모든 JavaScript 코드를 작성하는 것을 좋아하며 여기서도 동일합니다. 모듈 패턴은 JavaScript를 작성하는 방법이며 모든 코드는 독립형 객체에 있습니다. 객체 내의 메소드는 함수 속성으로 저장되며 구성 값은 객체 속성으로 저장 될 수 있습니다. 코드 (특히 라이브러리)를 구성하는 것은 매우 쉽기 때문에이 패턴을 사용하는 것을 좋아합니다. 이 모드에 대해 자세히 알아볼 수 있습니다. 최근에 읽은 최고의 기술 기사는 무엇이며 그 이유는 무엇입니까?

Jeremy Keith의 탄력성 웹 디자인 - Jeremy는 훌륭한 저자 이며이 책의 코드는이 책에 설명 된 코드처럼 정확하게 작성되었습니다.

최근에 가장 흥미롭거나 재미있는 테마 링크는 최근 친구에게 보낸 링크는 무엇입니까?

미국의 동해안에서 여전히 겨울입니다. 며칠 전에 아내에게 보냈습니다.

사실입니다! 이것은 이번 주에 그의 가장 열정적 인 기술을 공유 한 Tim 덕분에 인터뷰입니다. FAQS (FAQS)는 서비스 작업자를 사용하여 브라우저 탭간에 통신하는 것에 대해 서비스 작업자는 무엇이며 어떻게 작동합니까? 서비스 작업자는 일종의 웹 워커입니다. 웹 페이지/웹을 제어하고 내비게이션 및 리소스 요청을 가로 채고 수정하고 수정하고 오프라인 경험을 완료하거나 성능을 향상시키는 매우 세심한 방법으로 리소스를 캐시하는 JavaScript 파일입니다.

서비스 작업자를 사용하여 브라우저 탭간에 통신하는 방법은 무엇입니까?

서비스 작업자를 사용하여 브라우저 탭간에 통신하려면 먼저 서비스 작업자를 등록해야합니다. 등록 후 Message PostMessage API를 사용하여 서비스 작업자와 페이지간에 메시지를 보낼 수 있습니다. 그런 다음 서비스 작업자는 이러한 메시지를 제어하에있는 모든 탭으로 방송 할 수 있습니다. 여러 탭의 서비스 작업자 메시지를 한 번에 처리하는 방법은 무엇입니까? 여러 탭의 서비스 작업자 메시지를 한 번에 처리하려면 Clients.MatchAll () 메소드를 사용할 수 있습니다. 이 방법은 서비스 작업자를 제어 할 때 모든 클라이언트를 얻고 각 클라이언트에게 메시지를 보냅니다. 이렇게하면 각 탭이 메시지를 한 번만 처리 할 수 ​​있습니다.

서버없이 브라우저 투 브라우저 커뮤니케이션에 서비스 작업자를 사용할 수 있습니까?

아니요, 서비스 작업자는 서버없이 브라우저 투 브라우저 통신에 사용할 수 없습니다. 서비스 작업자는 오프라인 경험을 가능하게하고 자원을 캐싱하여 성능을 향상 시키도록 설계되었습니다. 페이지와 서비스 작업자 사이와 서비스 작업자 제어 하의 탭간에 통신 할 수는 있지만 브라우저간에 직접 통신 할 수는 없습니다.

서비스 작업자에서 Messmessage API의 역할은 무엇입니까?

PostMessage API는 서비스 작업자에게 중요한 역할을합니다. 서비스 작업자를 제어 할 때 페이지와 서비스 작업자 사이에 메시지를 보내고 방송 메시지를 모든 탭에 보낼 수 있습니다. 이것이 서비스 작업자가 브라우저 탭간에 통신하는 방식입니다.

서비스 작업자를 등록하는 방법은 무엇입니까?

서비스 작업자를 등록하려면 navigator.serviceworker.register () 메소드를 사용해야합니다. 이 메소드는 두 가지 매개 변수를 취합니다. 첫 번째는 서비스 작업자 파일의 경로이고 두 번째는 옵션 객체입니다. 서비스 작업자에 등록한 후 페이지/사이트를 제어 할 수 있습니다.

서비스 작업자가 내 웹 페이지/웹 사이트의 성능을 향상시킬 수 있습니까?

예, 서비스 작업자는 웹 페이지/웹 사이트의 성능을 크게 향상시킬 수 있습니다. 자원을 세심한 방식으로 캐싱함으로써 서비스 작업자는 네트워크 요청 대신 캐시 리소스를 제공하여 오프라인 경험을 제공하거나 성능을 향상시킬 수 있습니다.

오프라인 경험을 제공하기 위해 서비스 작업자를 사용하는 방법은 무엇입니까?

서비스 작업자를 사용하여 오프라인 경험을 제공하려면 리소스를 캐시해야합니다. 서비스 작업자가 내비게이션 또는 리소스 요청을 가로 채면 네트워크 요청을하는 대신 캐시 된 리소스로 응답 할 수 있습니다. 이렇게하면 오프라인 상태에서도 페이지/사이트가 제대로 작동 할 수 있습니다.

서비스 작업자의 clients.matchall () 메소드는 무엇입니까?

Clients.matchall () 서비스 작업자의 메소드는 서비스 작업자를 제어 하에서 모든 고객을 얻는 방법입니다. 이 방법은 서비스 작업자 제어 하의 모든 탭에 메시지를 방송하는 데 유용합니다.

WebRTC와 함께 서비스 작업자를 사용할 수 있습니까?

아니요, 서비스 작업자는 WEBRTC와 함께 사용할 수 없습니다. Service Worker는 오프라인 경험 및 성능 향상을 가능하게하도록 설계되었으며 WEBRTC는 브라우저 간의 실시간 통신을 가능하게하도록 설계되었습니다. 이 두 기술은 다른 목적으로 사용되며 함께 사용할 수 없습니다.

위 내용은 서비스 작업자를 사용하여 브라우저 탭에서 통신하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!