next offline 다운로드 - next offline 소스 코드 다운로드

next offline

웹사이트 데이터

1.0.0

다운로드

다음 플린

Next.js와 함께 WorkBox를 사용하십시오
응용 프로그램에서 오프라인 기능을 쉽게 활성화하십시오!

설치

$ npm install --save next-offline

$ yarn add next-offline

용법

설정해야 할 두 가지 중요한 사항이 있습니다. 먼저 next-offline 필요합니다.

아직 그렇지 않은 경우 프로젝트에서 next.config.js 를 만듭니다.

 // next.config.js
const withOffline = require ( 'next-offline' )

const nextConfig = {
  ...
}

module . exports = withOffline ( nextConfig )

다음으로 응용 프로그램이 서비스 작업자에게 올바르게 서비스를 제공하고 있는지 확인해야합니다.이 설정은 응용 프로그램을 호스팅하는 방법에 따라 다릅니다. 아래에 문서가 있습니다. 현재 2.0을 사용하지 않는 경우 현재 1.0 예제는 대부분의 상황에서 작동해야합니다.

선적 서류 비치

서비스 직원 봉사
- 이제 1.0 / aws
- 이제 2.0
서비스 직원 등록
- 컴파일 타임 등록
- 런타임 등록
서비스 작업자 사용자 정의
- 작업 상자 사용
- 다음 플린 옵션
캐시 전략
서비스 직원 경로
다음 수출
개발 모드
다음 오프라인 5.0
논란의 여지가 있습니다
특허

서비스 직원 봉사

서비스 근로자는 매우 강력하기 때문에 API에는 몇 가지 제한이 내장되어 있습니다. 예를 들어, 서비스 작업자는 사용중인 도메인에서 제공되어야합니다. CDN을 사용할 수 없습니다.

이제 1.0

Next.js Custom Server API를 사용하고 싶을 것입니다. 가장 쉬운 방법은 다음과 같이 보이는 server.js 만드는 것입니다.

 const { createServer } = require ( 'http' )
const { join } = require ( 'path' )
const { parse } = require ( 'url' )
const next = require ( 'next' )

const app = next ( { dev : process . env . NODE_ENV !== 'production' } )
const handle = app . getRequestHandler ( )

app . prepare ( )
  . then ( ( ) => {
    createServer ( ( req , res ) => {
      const parsedUrl = parse ( req . url , true )
      const { pathname } = parsedUrl

      // handle GET request to /service-worker.js
      if ( pathname === '/service-worker.js' ) {
        const filePath = join ( __dirname , '.next' , pathname )

        app . serveStatic ( req , res , filePath )
      } else {
        handle ( req , res , parsedUrl )
      }
    } )
    . listen ( 3000 , ( ) => {
      console . log ( `> Ready on http://localhost: ${ 3000 } ` )
    } )
  } )

다음에 사용자 정의 서버에 대한 자세한 내용을 읽을 수 있습니다. JS Docs

지금과 함께 호스팅하지 않는다면 사용자 정의 서버 API가 많은 기능을 활성화 할 수 있기 때문에 지금 1.0 접근 방식을 따를 것입니다. 이제 2.0에서는 잘 작동하지 않습니다.

이제 2.0

이제 2.0은 이전 버전과 매우 다르기 때문에 서비스 작업자에게도 서비스를 제공합니다. 이 작업을 수행하는 몇 가지 방법이 있지만이 Now2 예제 앱을 확인하는 것이 좋습니다. 알아야 할 변경 사항은 Now.json 및 Next.config.js에 있습니다.

서비스 직원 등록

컴파일 타임 등록

기본적으로 next-offline 아래 스크립트와 함께 서비스 작업자를 등록하면 이렇게하면 withOffline 측 번들이 자동으로 추가됩니다.

 if ( 'serviceWorker' in navigator ) {
  window . addEventListener ( 'load' , function ( ) {
    navigator . serviceWorker . register ( '/service-worker.js' , { scope : '/' } ) . then ( function ( registration ) {
      console . log ( 'SW registered: ' , registration )
    } ) . catch ( function ( registrationError ) {
      console . log ( 'SW registration failed: ' , registrationError )
    } )
  } )
}

런타임 등록

컴파일 타임 대안으로, next-offline/runtime 모듈을 사용하여 응용 프로그램 코드에 등록/등록을 제어 할 수 있습니다.

 import { register , unregister } from 'next-offline/runtime'

class App extends React . Component {
  componentDidMount ( ) {
    register ( )
  }
  componentWillUnmount ( ) {
    unregister ( )
  }
  . .
}

필요한 경우 서비스 작업자 경로와 범위를 통과하도록 선택할 수 있습니다.

 import { register , unregister } from 'next-offline/runtime'

class App extends React . Component {
  componentDidMount ( ) {
    /** 
      * Default service worker path is '/service-worker.js' 
      * Refer https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register for default scope rules
      *
    */
    register ( '/sub_folder/service-worker.js' , { scope : '/sub_folder' } ) 
  }
  componentWillUnmount ( ) {
    unregister ( )
  }
  . .
}

직접 등록을 처리하는 경우 dontAutoRegisterSw 다음 플린에게 전달하십시오.

 // next.config.js
const withOffline = require ( 'next-offline' )

module . exports = withOffline ( { dontAutoRegisterSw : true } )

서비스 작업자 사용자 정의

작업 상자 사용

WorkBox를 처음 사용하는 경우이 빠른 가이드를 읽는 것이 좋습니다. workboxOpts 내부의 모든 내용은 workbox-webpack-plugin 으로 전달됩니다.

next.config.js 에 workboxOpts 객체를 정의하면 workbox-webpack-plugin으로 전달됩니다. WorkBox는 next-offline 후드 아래에서 서비스 작업자를 생성하기 위해 사용하는 것입니다. 여기에서 자세히 알아볼 수 있습니다.

 // next.config.js
const withOffline = require ( 'next-offline' )

const nextConfig = {
  workboxOpts : {
    ...
  }
}

module . exports = withOffline ( nextConfig )

다음 플린 옵션

WorkBox 옵션 외에도 Next-Fline에는 플래그가 내장 된 몇 가지 옵션이 있습니다.

이름	유형	설명	기본
생성	부울	False 인 경우 Next-Offline은 서비스 작업자를 생성하지 않고 WorkBoxOpts.swsrc에서 WorkBox의 [Inject Plugin] (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-ppinject#inject_plugin)에서 찾은 파일을 수정하려고합니다.	진실
Dontautoregistersw	부울	true 인 경우 Next-Offline은 등록 스크립트를 응용 프로그램 코드에 자동으로 푸시하지 않습니다. 런타임 등록을 사용하거나 직접 등록을 처리하는 경우 필요합니다.	거짓
Devswsrc	끈	개발 중에 다음 플린이 등록 할 경로. 기본적으로 다음 플린은 개발 중에 노프를 등록합니다	거짓
생성 된 indevmode	부울	사실이라면 서비스 작업자도 개발 모드에서 생성됩니다. 그렇지 않으면 DevSWSRC에 정의 된 서비스 작업자가 사용됩니다.	거짓
RegisterSwpRefix	끈	서비스 작업자가 응용 프로그램의 루트 레벨에 있지 않으면 경로를 접두사하는 데 도움이 될 수 있습니다. foobar.com/my/long/path/service-worker.js에서 서비스 작업자를 원한다면 유용합니다. 이것은 서비스 작업자의 [https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope)에 영향을 미칩니다.	거짓
범위	끈	이는 자동으로 등록 된 서비스 작업자에게 전달되어 서비스 작업자가 통제 할 수있는 것을 늘리거나 감소시킵니다.	"/"

캐시 전략

기본적으로 next-offline 에는 다음 블랭킷 런타임 캐싱 전략이 있습니다. workboxOpts 로 next-offline 사용자 정의하면 기본 동작이 workbox-webpack-plugin 으로 전달되지 않습니다. 이 기사는 다양한 캐시 레시피를 분류하는 데 좋습니다.

 {
  runtimeCaching : [
    {
      urlPattern : / ^https?.* / ,
      handler : 'NetworkFirst' ,
      options : {
        cacheName : 'offlineCache' ,
        expiration : {
          maxEntries : 200
        }
      }
    }
  ]
}

 // next.config.js
const withOffline = require ( 'next-offline' )

module . exports = withOffline ( {
  workboxOpts : {
    runtimeCaching : [
      {
        urlPattern : / .png$ / ,
        handler : 'CacheFirst'
      } ,
      {
        urlPattern : / api / ,
        handler : 'NetworkFirst' ,
        options : {
          cacheableResponse : {
            statuses : [ 0 , 200 ] ,
            headers : {
              'x-test' : 'true'
            }
          }
        }
      }
    ]
  }
} )

서비스 직원 경로

응용 프로그램이 도메인의 루트에 남아 있지 않으면 registerSwPrefix 사용할 수 있습니다. 응용 프로그램이 Domain.com/my/custom/path에있는 경우 기본적으로 next-offline 응용 프로그램이 domain.com에 있다고 가정하고 domain.com/service-worker.js를 등록하려고합니다. 서비스 작업자는 루트 도메인에서 제공되어야하기 때문에 assetPrefix 사용을 지원할 수 없습니다. 해당 제한에 대한 기술적 고장은 다음 링크를 참조하십시오. CDN/원격 원산지에서 서비스 직원에게 서비스를 제공 할 수 있습니까?

기본적으로 next-offline 은 다음 모든 다음으로 선정됩니다. JS 웹 팩 방출 된 파일과 사용자 정의 된 정적 파일 (내부 /static )-본질적으로 내보내는 모든 것도 내보내는 모든 것.

더 많은 것을 포함 시키거나 정적 파일의 원점을 변경하려면 주어진 작업 상자 옵션을 사용하십시오.

workboxOpts: {
  modifyURLPrefix : {
    'app' : assetPrefix ,
  } ,
  runtimeCaching : { ... }
}

개발 모드

기본적으로 next-offline 개발에 NO-OP 서비스 작업자를 추가합니다. 자신의 패스를 제공하려면 FilePath를 devSwSrc 옵션으로 제공하십시오. 예를 들어 개발에서 웹 푸시 알림을 테스트하려는 경우 특히 유용합니다.

 // next.config.js
const withOffline = require ( 'next-offline' )

module . exports = withOffline ( {
  devSwSrc : '/path/to/my/dev/service-worker.js'
} )

generateInDevMode 옵션을 true 로 설정 하여이 동작을 비활성화 할 수 있습니다.

다음 수출

다음 7.0.0의 추가 사항 덕분에 다음 [email protected]으로 내보내기 기능을 다시 작성하여 더 많은 경우에 더 안정적으로 작동합니다!

Next.js Docs에서 내보내는 것에 대한 자세한 내용을 읽을 수 있지만 다음 오프라인에서는 ™ 팜 만 작동해야합니다.

다음 오프라인 5.0

최신 버전의 next-offline 으로 업그레이드하는 경우 5.x 릴리스의 Workbox 내부에 추가/변경 된 내용과 4.0 릴리스가 포함 된 4.0 릴리스를 포함하는 것을 권장합니다. 다음 오프라인의 API는 변경되지 않았지만 핵심 의존성이 있습니다!

질문? 피드백? 알려주세요

기여

next-offline 원사 작업 공간을 사용하는 Lerna Monorepo입니다. 레포를 복제 한 후 다음을 실행하십시오

$ yarn bootstrap

이렇게하면 다음 플린의 개발 버전이 예제 및 테스트에서 상징적으로 변경되어 신속하게 변경할 수 있습니다!

라이센스 (MIT)

 WWWWWW||WWWWWW
 W W W||W W W
      ||
    ( OO )__________
     /  |           
    /o o|    MIT     
    ___/||_||__||_|| *
         || ||  || ||
        _||_|| _||_||
       (__|__|(__|__|

이에 따라이 소프트웨어 및 관련 문서 파일 ( '소프트웨어')의 사본을 얻는 사람에게는 허가가 부여됩니다. 소프트웨어의 사용, 복사, 수정, 합병, 배포, 배포, 숭고 및/또는 소프트웨어의 사본을 판매 할 권한을 포함하여 제한없이 소프트웨어를 처리 할 수 있도록 소프트웨어를 제공 할 권한이 없습니다.

이 소프트웨어는 상업성, 특정 목적에 대한 적합성 및 비 침해에 대한 보증을 포함하여 명시 적 또는 묵시적 보증 없이도 '있는 그대로'제공됩니다. 어떠한 경우에도 저자 또는 저작권 보유자는 계약, 불법 행위 또는 기타, 소프트웨어 또는 소프트웨어의 사용 또는 기타 거래에서 발생하는 계약, 불법 행위 또는 기타의 행동에 관계없이 청구, 손해 또는 기타 책임에 대해 책임을지지 않습니다.

확장하다

추가 정보