This will be a do-as-you-read article, where I will provide you the base code and the code that you can use to try it along to build a basic PWA.

PWA- 점진적 네트워크 어플리케이션

PWA는 진보적인 네트워크 응용을 대표한다.PWA는 휴대전화에서 일반 앱으로 표시(플랫폼에 독립)할 수도 있고 인터넷의 일반 응답 사이트처럼 일할 수도 있는 인터넷 앱이다.이것은 당신이 사용할 같은 기술을 사용하지만 추가 기능과 선진적인 인터넷 응용 프로그램의 장점을 부여하는 일반적인 사이트를 만드는 것과 같다.그것은 가볍고 빠르며 안전하다.

진보형 인터넷 응용은 무엇을 필요로 합니까?

빠른 응답 레이아웃을 만들었고 대부분의 브라우저에서 실행할 수 있음을 감안하면 일반적인 방식으로 사이트를 구축할 수 있다.주로 자바스크립트로 구성되어 있으며, PWA의 서버는 사용자의 웹 브라우저에 저장되어 있으며, 새로운 요약을 불러오지 않습니다.이것은 PWA 속도의 주요 원인이다.따라서 이 서비스 직원들은 우리가 아래에서 토론할 기능을 책임진다.

PWA의 장점과 단점에 대해 자세히 알아보겠습니다.

기사 없음

간단히 3단계로 모든 웹 사이트*를 PWA로 변환

우리가 건설하고 있는 PWA의 특징

deskop과 모바일

에서 업무 담당

오프라인 작업

데스크탑 및 모바일 장치에 어플리케이션

처럼 설치 가능

가벼운 무게

1. 기초 사이트 구축

첫 번째 단계는 일반적인 절차에 따라 간단한 사이트를 만들어야 한다.웹 사이트는 HTML, CSS, JavaScript 등의 기본 빌드 블록으로 구성됩니다.다음을 확인해야 합니다.

웹 사이트 배포 시 HTTPS를 통한 서비스 제공(로컬 실행은 예외)

이동과 데스크톱에서 반응이 예민하게 작동할 수 있는 사이트를 구축하도록 하세요.
네가 이런 설정이 있으면, 너는 갈 수 있다.

첫 번째 단계를 빠르게 시작할 수 있도록 제 예시github 프로젝트를 복제할 수 있습니다.

타렌시프 / 스티커

2. 웹 응용 프로그램 목록 파일 만들기

명세서 파일은 JSON 파일로 PWA에 대한 메타데이터, 예를 들어 이름, 짧은 이름, 시작 URL, 범위, PWA 아이콘, 테마 색, 배경 색과 PWA의 디스플레이 방식을 포함한다.
프로젝트의 루트 폴더에 manifest.json를 만들고 다음 중 하나와 같이 JSON을 작성합니다.

{
  "name": "Stick-it Notes by Tharun",
  "short_name": "Stick-it",
  "start_url": "index.html",
  "scope": "./",
  "icons": [
    {
      "src": "contract.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "contract.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffd31d",
  "background_color": "#333",
  "display": "standalone"
}

index.html에서 목록에 링크할 링크 탭을 추가합니다.목록 파일을 사용할 수 있도록 json 파일입니다.

<link rel="manifest" href="manifest.json">

계약서에 주의하면png, 이것은 프로그램의 아이콘입니다.사용자가 선택한 도구를 사용하여 웹 사이트를 만들거나, 예를 들어 https://realfavicongenerator.net 생성기를 보면 웹 사이트에 필요한 탭과 첨부 파일을 만들 수 있다.
지금 당신의 사이트는 설치할 수 있습니다.

3. 서비스 인력 추가

서비스 제공자는 네트워크 요청, 캐시 또는 캐시에서 리소스를 검색하는 것을 차단하고 메시지를 푸시하는 별도의 스레드에서 실행되는 완전히 비동기적인 JavaScript 파일입니다.
그것은 심지어 사이트가 활동하지 않을 때도 일할 수 있다. 왜냐하면 이것은 전송 알림을 전달하는 데 필수적이기 때문이다.DOM에 직접 액세스할 수도 없습니다.이것은 웹 응용 프로그램을 오프라인으로 실행할 수 있도록 캐시 기능을 사용합니다.
이제 마지막으로 PWA를 만들도록 하겠습니다.
기존 JavaScript 파일에 행 코드를 추가하거나 새 JavaScript 파일을 만들어 링크합니다.이 프로젝트에 연결된 자바스크립트 파일이 있습니다. 이 파일을 사용해서 저희 서비스 직원을 등록할 것입니다.
MyScript에서js

if ("serviceWorker" in navigator) {
  // register service worker
  navigator.serviceWorker.register("service-worker.js");
}

이제는 자동으로 서비스 인원을 생성할 때가 되었다.js 파일.sw precache라는 NPM 패키지를 사용합니다.
명령행/터미널에서

$ npm install --global sw-precache

설치가 완료되면 다음 명령을 실행하여 프로젝트 루트 디렉터리와 같은 경로에 있는지 확인한 다음 알림을 기다리십시오

$ sw-precache

만세!

이제 웹 사이트가 완전히 PWA로 전환되고 준비가 완료되었습니다.Netlify 같은 무료 위탁 관리 서비스에 가서 GitHub 저장소를 위탁 관리하고 그 즐거움을 볼 수 있습니다.

메인 화면에 추가하면 PWA를 핸드폰에 설치할 수 있습니다.
내 유튜브 채널 구독 생각
작성자:
.ltag__user__id__378811.작업 따르기 버튼
배경색: #1e90ff!중요
색상: #fdf9f3!중요
테두리 색상: #1e90ff!중요
}

Tharun Shiv Follow

Site Reliability Engineer | Blogger | Podcasts | Youtube @ developertharun

읽어주셔서 감사합니다. 저는 Tharun Shiv a.k.a 개발자 Tharun입니다.

기사 없음