#100DaysOfCode 37일차: PWA + SPA: Create React App(CRA)에서 PWA 초기화

4156 단어 100daysofcodereactpwajavascript

소개



PWA(Progressive Web Apps)의 목표는 네이티브 앱과 같은 멋진 경험을 제공하는 것입니다. PWA에는 세 가지 주요 사항이 있습니다.
  • 안정적: 빠르게 로드되고 오프라인에서도 작동해야 합니다
    • .
  • 빠름: 직관적인 방식으로 장치 기능에 액세스할 수 있어야 합니다
    • .
  • 참여: 모바일 장치의 기본 앱처럼 느껴짐

    • 이 기사는 React 앱에서 PWA 초기화에 대해 설명합니다.

    단계



    1. 반응 앱 만들기


  • 다음 명령을 사용하여 React 앱을 생성합니다.

    • create-react-app pwa-example


    2. 숨겨진 구성 파일 표시


  • 숨겨진 폴더를 표시하려면 다음 명령을 사용하십시오.

    • npm run eject


  • 구성 폴더에 다음이 표시됩니다.


    • 3. src/index.js 편집



    마지막 줄을 다음에서 변경하십시오.

    serviceWorker.unregister();


    에게

    serviceWorker.register();


    4. 프로덕션용 파일 생성


  • 정적 파일 광고 자산을 구축하려면 다음 명령을 사용하십시오.

    • npm run build


  • service-worker.js를 포함하는 파일로 빌드 폴더를 생성합니다.


    • 5. 페이지 렌더링을 위한 임시 서버 생성


  • 다음 명령을 사용하여 serve을 설치하고 실행하여 빌드 폴더를 수신합니다.

    • npm install -g serve
serve -s build


  • 서버가 요청을 듣기 시작합니다.


    • 6. 검증


  • 브라우저를 열고 http://localhost:5000/을 방문하십시오.
  • 개발자 도구를 열고 응용 프로그램/서비스 작업자를 선택합니다.
  • 오프라인을 선택하고 다시 로드합니다. 페이지가 올바르게 렌더링되어야 합니다.


    • 그게 다야!

    참조


  • Progressive Web Apps (PWA) - The Complete Guide
  • 三步驟客製化 Create React App 的 Service Worker
  • Create-react-app service worker not functioning

    • 조항



    제 글이 있습니다. 마음에 드시면 체크해주세요!
  • 소프트웨어 개발을 위한 내 블로그 게시물: https://medium.com/a-layman
  • 내 웹 이력서: https://jenhsuan.github.io/ALayman/cover.html
  • 페이스북 페이지: https://www.facebook.com/imalayman
  • 매일 학습: https://daily-learning.herokuapp.com/
    • Unable to load image ntoskrnl.exe 문제
    'if-else-condition'은pug/jade,scss,javascript,python(백엔드)-(창고 강좌3)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage