JS 서비스 — 머리말

웹 응용 프로그램을 오프라인으로 만드는 여정

무엇 때문에

너는 이미 아주 좋은 사이트를 만들었고, 모든 사람에게 그것을 제공할 준비가 되어 있다.너는 그것을 민감하게 만드는 고통을 겪었다. 그것은 모든 표준 설비에서 보기에 매우 좋다.가설적인 개발자를 통해 제품 관리자와 대화를 나눕시다.

PM: Is this application responsive?

Dev: Yes boss!

PM: Does it work when he is on a slow internet?

Dev: Well, I have minimized the assets, serving them up gzipped, so its optimised, but might take a while to load.

PM: What if he goes offline?

Dev: (Dumbfounded)Web… Web application? Why would someone use a web application offline? We need to create apps if we want to provide offline capabilities!

다음 대화는 즐겁지 않을 수도 있으니 이것을 건너뛰자.만약 내가 너에게 너의 인터넷 응용 프로그램이 오프라인으로 전환될 수 있다고 말한다면?만약 내가 당신에게 당신의 응용 프로그램이 여러 플랫폼에서 본체 응용 프로그램처럼 실행되고 시작 화면에 고정되어 접근을 편리하게 할 수 있다고 말한다면 어떻게 될까요?보화영도에 오신 걸 환영합니다. 미래에 오신 걸 환영합니다. (진짜가 아니라 한동안 존재해 왔지만Google introduced PWA은 2015년, Steve Jobs conceptualized it는 2007년에!)

무엇이 필요합니까?

한 단어:JavaScript
만약 당신이 전방 개발자라면, 당신은 이미 JS와 그 세부 사항을 이해했다.자바를 배울 필요가 없다. 안드로이드 프로그램을 개발하기 위해 소프트웨어를 다운로드할 필요도, iOS 프로그램을 다운로드할 필요도 없다.너는 여러 상점에서 그것을 발표하는 데 신경 쓸 필요가 없다.너는 단지 네가 이미 존재하는 아주 좋은 웹 페이지에 세우기만 하면 된다.

구글 등대

크롬 개발자 도구에 있는 라이트하우스 탭을 보셨습니까?어떤 사이트에 가든지 그것을 실행해라.당신은 사이트의 표현이 어떠한지, 방문성을 고려했는지, 최선의 실천을 따랐는지, 마지막으로 PWA가 되는 데 필요한 조건을 갖추고 있는지 몇 가지 지표를 보게 될 것입니다.이 보고서는 웹 사이트를 어떻게 개선하는지 상세하게 소개하여 응용 프로그램을 개선하기 시작하는 좋은 부분이다.

서비스 담당자란?

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. — Matt Gaunt on Web Fundamentals

구글Introduction to Service Workers 서비스 인원 개술
이제 정의를 분석해 보겠습니다.
서비스 담당자는 스크립트입니다. JavaScript로 구성됩니다.또한 작업자이기 때문에 DOM 요소 [No more alert("hello!")]에 액세스할 수 없습니다.하지만 정보로 소통해야 한다.
백그라운드에서 실행 - 주 JS 짝수 순환과 다른 스레드에서 실행됩니다.사용하지 않을 때 종료되고 필요할 때 다시 시작할 수 있기 때문에 전역 변수를 사용하는 것은 매우 나쁜 생각입니다.
기능의 문을 엽니다. 이것은 프로그래밍이 가능한 네트워크 에이전트로 요청을 차단할 수 있으며 서버와 캐시 자원에 대한 응답을 나타냅니다.
웹 페이지나 사용자의 상호작용이 필요 없다. 알림 전송, 백엔드 동기화, 지불 업데이트. 서비스 작업은 웹 플랫폼에 많은 편리한 기능을 가져다 주었다.

서비스 인력 수명 주기

서비스 직원의 생명 주기는 웹 페이지와 결합되지 않는다.첫 번째 로드 페이지부터 시작하지만 브라우저 탭이 닫힌 후에도 오랫동안 남아 있습니다.

서비스 인력 수명 주기Matt Gaunt~Web Fundamentals
등록 서비스 직원의 첫 번째 단계는 설치 단계입니다.일반적으로 이 단계에서 자산을 다운로드하고 캐시합니다.모든 것이 순조롭다면 활성화 단계에 들어갈 것입니다. 그렇지 않으면 오류 상태에 들어갈 것입니다.활성화되면 요청과 메시지를 차단할 수 있습니다.보통, 오래된 캐시가 여기에 있으면 무효입니다.활동이 없으면 유휴 상태가 유지되며 유휴 상태가 몇 초 후에 종료됩니다.당황할 필요가 없다. 새로운 사건이 발생할 때, 요청이나 메시지 같은 것은 활력을 회복할 것이다.워크맨은 언제든지 종료할 수 있기 때문에 전역 변수를 사용하지 않는 것을 강력히 권장합니다.IndexedDB는 캐시를 포함한 영구적인 데이터에 사용할 수 있습니다.서비스 직원들은 메모리에 없는 것을 확보하기 위해 몇 초 동안 활동하지 않은 후에 자원을 소모하게 된다.
서비스 직원들은 광범위하게 비동기적이고 약속을 사용한다.노동자 중에는 어떠한 막힌 조작도 허용하지 않는다. 그렇지 않으면 정지될 것이다.

종업원을 이용해도 됩니까?

브라우저가 웹 표준에서 벗어났기 때문에 웹 개발자들은 이미 많은 경험을 잃었다. 본문을 읽을 때, 자연히 이 문제를 생각하게 될 것이다.요컨대 답은 정해지지 않았다. 어떤 것은 모든 기능을 지원하지 않지만, 어떤 것은 제한된 기능을 허용한다.스토리지 용량도 플랫폼과 브라우저에 따라 다릅니다.

서비스 직원의 브라우저 호환성caniuse.com 화면 캡처
따라서 서비스 직원을 설치하기 전에 기능 테스트를 하는 것은 좋은 방법이다.호환되지 않는 플랫폼인 브라우저 조합에서 실행될 수 있기 때문에 우리는 서비스 인원들 사이에서 핵심 기능을 가지고 있어서는 안 된다.
또 하나 기억해야 할 요소는 서비스 직원들이 HTTPS를 지원하는 사이트에서만 사용할 수 있다는 것이다.localhost를 통해 HTTP에서 작업할 수 있지만 안전하지 않은 사이트에서는 작동하지 않습니다.서비스 직원은 매우 강대하다. 권력이 클수록 책임도 크다.HTTPS는 스크립트의 소스가 관리되는 사이트인지 확인하고 브로커 공격을 방지합니다.

인코딩할 때가 됐어요.

일회용 코드를 만들 때가 됐어!간단한 HTML 파일과 일부 스크립트로 시작합니다.id가 있는div가 있습니다. 변경할 것입니다.우선 서비스 인원을 다시 고용할 수 있는지 확인하고 가능하면 등록을 하겠습니다.등록되면 DOM이 업데이트됩니다.장애가 발생하면 오류 메시지와 의미 있는 메시지가 DOM에 기록됩니다.
색인html

<!doctype html>
<title>First Service Worker</title>

<h1>Service Worker Test</h1>
<div id="response"></div>

<script>
// chcek if the browser supports service workers
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register("serviceworker.js",
        { scope: "/" })
        .then( registration => {
            // registration is an handle of the worker.
            // More event listeners can be attached or messages can be sent to this.
            // For this example, we just change the DOM to display message
            document.getElementById("response").innerHTML = 
                "Service Worker registered properly";
        })
        .catch( error => {
            // Update DOM and log error in case resgistration fails
            document.getElementById("response").innerHTML = 
                "Service Worker NOT registered";
            console.error(error);
        });
} else {
    // UPdate DOM to reflect service workers cannot be used
    document.getElementById("response").innerHTML = 
                "Service Worker NOT available";
}
</script>

종업원.js

console.log("We are a service worker");

// This is called once the worker is installed
self.addEventListener("install", event => {
   console.log("Install event");
});

// This is called once the worker becomes active
self.addEventListener("activate", event => {
   console.log("Activate event");
});

종업원.js 파일은 현재 적나라한 파일입니다.우리는 일지를 가지고 절차를 설명한다.우선, 그것은 설치되어 있고, 활성화됩니다.
이걸 어떻게 운행하는지 소개해 드릴게요.위의 요점에서 두 파일을 가져올 수 있지만 브라우저에서 파일을 열면 해당 파일이 작동하지 않습니다.너는 안의 물건을 들어올려야 한다.가장 간단한 방법은'serve'라는 npm 패키지NodeJS를 사용하는 것입니다.파일을 저장할 폴더로 이동하여 다음을 수행할 수 있습니다.

npm i -g serve
serve

이것은 포트 5000곳에서 폴더의 내용을 제공하기 시작할 것입니다.링크http://localhost:5000를 클릭하면 서비스 직원이 정확하게 등록된 것을 볼 수 있습니다.네트워크 링크(로컬 아래 링크)를 클릭하면 서비스 담당자가 작업을 수행할 수 없습니다(HTTPS를 기억하십시오).디버거에서 아래 그림과 같이 '프로그램' 옵션 카드에서 상세한 정보를 볼 수 있습니다.개발할 때 '다시 불러올 때 업데이트' 가 선택되어 있는지 확인하십시오. 작업자에 대한 변경 사항을 선택할 수 있습니다.기본적으로 서비스 담당자는 설치하면 항상 설치 상태를 유지합니다(나중에 자세히 설명).

서비스 직원의 Chrome 디버그 도구 확인

임박

이것은 이 시리즈의 첫 편이다.앞으로 몇 주 동안 더 많은 서비스 인원에 대한 정보를 발표할 것이다.동시에 이 글은 네가 탐색할 수 있는 많은 자원을 제공했다.계속 공부해!
https://medium.com/ones-zeros/js-service-workers-an-introduction-12aabeea1a2b

Reference

이 문제에 관하여(JS 서비스 — 머리말), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/royniladri/js-service-workers-an-introduction-39p4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JS 서비스 — 머리말