다음 단계에서는 PWA(Progressive Web Appliance)를 참조하십시오.js

11892 단어 reactnextjs

가장 먼저 해야 할 일--무엇이 점진적 네트워크 응용, 약칭 PWA입니까?


시간이 있으면 MDN docs을 참조하십시오.만약 내가 내 말로 PWA를 정의해야 한다면, 이것은 모바일이나 데스크톱 장치에서 웹 응용 프로그램에 접근할 수 있는 방식이다. 마치 원본 응용 프로그램에 접근하는 것과 같다.

그렇다면 도대체 무엇이 한 응용 프로그램을 진보적인 인터넷 응용 프로그램으로 만들었을까?


비록 나는 이 방면에 공식적인 기준이 있다고 생각하지 않지만 고려해야 할 몇 가지 관건적인 원칙은 다음과 같다.
  • 은 설치할 수 있습니다. 이렇게 하면 방문할 수 있습니다. 예를 들어 핸드폰의 메인 화면에서?
  • 은 오프라인/네트워크 연결이 잘못된 상태에서 작동합니까?
  • 은 사용 중인 모든 장치에 응답합니까?
  • 은 비교적 오래된 설비(더 기본적인 차원에서)도 만족시킬 수 있고 새로운 설비도 만족시킬 수 있기 때문에 점진적인 강화를 견지합니까?

    • 당신은 왜 당신의 인터넷 응용 프로그램을 PWA로 바꾸는 것을 고려해야 합니까?


    모바일 브라우저를 통해 애플리케이션에 대한 액세스를 계속할 수 있을 정도로 간단할 수 있지만 기본 화면에서 사용자 애플리케이션으로 직접 액세스할 수 있습니다.
  • 이 더 효율적입니다.
    서비스 종사자와 캐시를 사용했기 때문에
  • 의 마운트 시간은 순식간에 가까워질 수 있습니다.
  • 기본 어플리케이션 전체를 업데이트하는 대신 실제 변경된 비트의 업데이트만 보내면 됩니다.
    • 웹 브라우저에 비해
  • 은 더욱 좋은 로컬 체험을 제공했다(예를 들어 모바일 기기에 특정한 응용 프로그램 아이콘, 응답성 디자인과 기능, 전체 화면 모드를 갖추고 있다).
  • 을 통해 사용자는 네트워크 연결 없이 애플리케이션에 액세스할 수 있습니다.
  • 은 푸시 알림 등의 기능을 사용하여 최종 사용자와 더욱 직접적인 연결과 상호작용을 제공합니다.

    • Next에서 PWA를 작성하는 방법js


    넥스트 정말 괜찮아요.js의 뜻은 그들이 next-pwa 패키지를 처리하는 공식적인 방식이 있다는 것이다.다음은 제가 수행한 단계입니다.
  • 은 yarn add next-pwa을 사용하여 패키지를 설치합니다.
  • 아직 없는 경우 manifest.json 폴더에 /public 파일을 만듭니다.이 파일은 기본적으로 브라우저에 응용 프로그램에 대한 메타데이터를 제공합니다. 그러면 응용 프로그램이 데스크톱이나 모바일 장치에 확장되어 다운로드될 때 응용 프로그램을 어떻게 보여주는지 알 수 있습니다.온라인 검색 목록 생성기는 사용할 수 있지만, 프로그램에 아이콘을 미리 설정해야 합니다.아래의 부록에서 제 명세서 파일의 예시를 보실 수 있습니다.
  • 현재 브라우저가 로드될 때 manifest.json 파일에 액세스해야 합니다./pages 디렉토리에서 _document.tsx 파일을 열거나 생성합니다.만약 이전에 이 문서를 본 적이 없다면, 그것에 대한 더 많은 정보를 읽어 주십시오. here.기본적으로, 브라우저가 접근할 수 있도록 <Head> 태그에 명세서 JSON에 링크를 추가하기를 원합니다.또는, 만약 당신이 다른 곳에서 응용 프로그램의 <Head> 탭 (예를 들어 index.tsx) 을 방문했다면, 그것을 거기에 두십시오.
    •   <Head>
    // ...
    <link rel="manifest" href="/manifest.json" />
    // ...
  </Head>
  • 은 next.config.js에서 next-pwa 패키지가 필요하며 이 패키지로 모듈을 포장하여 기능을 내보냅니다.(상세 설명은 next-pwa Github 재구매 계약 참조)
    •   const withPWA = require('next-pwa')

  module.exports = withPWA({
    target: 'serverless',
    pwa: {
      dest: 'public',
      disable: process.env.NODE_ENV === 'development',
    },
    // ... whatever other config you might have
  })
    또한 PWA를 구성하여 다른 설정을 준수할 수도 있으므로 공식 문서를 보면 자세한 내용을 확인할 수 있습니다.
    요컨대 이것이 기본적인 설정이다.예상대로 작동하는지 확인하기 위해서, 위의 설정 파일에서 dev 환경의 disable 줄에 대한 설명을 취소하고, Next에서 프로그램을 구축할 수 있습니다. (저는 yarn build을 사용합니다.)localhost:3000으로 이동하면 브라우저에서 '설치' 프로그램의 옵션을 볼 수 있습니다.
    이것은 나의 제작 사이트의 모습이다.

    이 버전을 처음 실행하면 서비스 담당자인 public 폴더에 새 PWA 파일이 많이 생성됩니다.이 파일들이 캐시되지 않도록 해야 하기 때문에 버전 제어에서 이 파일들을 무시하는 것을 기억하십시오. (아래의 난해한 힌트를 참고하십시오.)

    오프라인 지원


    주의해야 할 점은 sw.js 패키지가 캐시와 네트워크에서 내용을 가져와서 내용을 불러오려고 시도하는 것이다.두 소스가 모두 실패하면 오류 페이지가 표시됩니다.더 좋은 사용자 체험을 위해 next-pwa 디렉터리에 _offline.tsx이라는 새 파일을 만들어서 사용자가 볼 수 있도록 사용자 정의 페이지를 정의할 수 있습니다.다운로드할 수 없는 모든 페이지에 이 페이지가 표시됩니다.
    이 예비(fallback) 페이지의 파일 위치를 덮어쓰려면 이미지, 비디오, 글꼴 등 다른 미디어 유형에 대한 예비(fallback) 내용을 설정하는 것 외에 pages 설정의 next.config.js 파일에 이러한 내용을 정의할 수 있습니다.
    module.exports = withPWA({
  target: 'serverless',
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
    fallbacks: {
      image: '/offline.png',
      document: '/pages/offline-2.tsx',
    },
  },
  // ...
})
    이것이 바로 나의 오프라인 페이지의 외관이다.

    문제 해결 팁

  • 로컬 개발 환경에서 테스트를 하고 비슷한 오류를 보려면 웹 패키지를 개발 의존 항목으로 설치해야 할 수도 있습니다.
    •   Could not find files for / in .next/build-manifest.json
    이를 위해 pwa을 운행한다.
  • 은 다음 PWA 파일을 yarn add webpack --dev(git를 사용할 경우)에 추가하여 내용을 업데이트하도록 함으로써 이 파일들은 서명과 캐시가 아니라 응용 프로그램을 구축할 때마다 생성됩니다.
    •   # .gitignore

  /public/sw.js
  /public/workbox-*.js
  /public/worker-*.js
  /public/sw.js.map
  /public/workbox-*.js.map
  /public/worker-*.js.map
  /public/fallback-*.js

    부록.


    내 .gitignore 파일:
    {
  "name": "Bionic Julia",
  "short_name": "Bionic Julia",
  "description": "My thoughts and learnings",
  "start_url": "/",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}
    이 댓글 마음에 드세요?https://bionicjulia.com을 통해 대화를 계속합시다.
    EC2 생성 후 Django 환경 세팅하기
    작업 로그 GoogleWorkspace 달력에 대한 도메인 간 공유

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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