next pwa
5.6.1
이 플러그인은 workbox 및 기타 유용한 기능으로 구동됩니다.
여기에 멋진 PWA 프로젝트를 공유하세요
특징
next-i18next 예제를 사용한 국제화(일명 I18N)blitz.config.js 에 추가)next.config.js 에 experimental.modern true 로 설정된 경우 .module.js 사전 캐싱참고 1 -
next-pwa버전 2.0.0+는next.js9.1+에서만 작동해야 하며 정적 파일은public디렉터리를 통해서만 제공되어야 합니다. 이렇게 하면 일이 더 간단해집니다.참고 2 - 빌드 중에
TypeError: Cannot read property **'javascript' of undefined**오류가 발생하는 경우next.config.js에서 webpack5로 업그레이드하는 것을 고려하십시오.
next.js또는react.js처음 사용하는 경우 먼저 next.js 또는 next.js 문서를 확인하는 것이 좋습니다. 그런 다음 next.js 저장소의 간단한 예제 또는 프로그레시브 웹 앱 예제에서 시작하세요.
yarn add next-pwa 다음을 사용하여 next.config.js 업데이트하거나 생성하세요.
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
} )
module . exports = withPWA ( {
// next.js config
} ) next build 실행하면 public 파일에 workbox-*.js 및 sw.js 두 개의 파일이 생성되며 자동으로 정적으로 제공됩니다.
Next.js 버전 9 이상을 사용하는 경우 아래 옵션을 건너뛰고 2단계로 이동하세요.
버전 9 이전의 Next.js를 사용하는 경우 2단계로 진행하기 전에 아래 옵션을 선택해야 합니다.
https://yourdomain.com/sw.js 및 https://yourdomain.com/workbox-*.js 경로에서 액세스할 수 있도록 파일을 정적 파일 호스팅 서버에 복사합니다.
한 가지 예는 Firebase 호스팅 서비스를 사용하여 해당 파일을 정적으로 호스팅하는 것입니다. 배포 워크플로의 스크립트를 사용하여 복사 단계를 자동화할 수 있습니다.
보안상의 이유로 이러한 파일은 도메인에서 직접 호스팅해야 합니다. 리디렉션을 사용하여 콘텐츠가 전달되면 브라우저는 서비스 워커 실행을 거부합니다.
HTTP 요청이 수신되면 해당 파일이 요청되었는지 테스트한 다음 해당 정적 파일을 반환합니다.
예제 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
if ( pathname === '/sw.js' || / ^/(workbox|worker|fallback)-w+.js$ / . test ( pathname ) ) {
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 } ` )
} )
} )다음 설정은
next-pwa플러그인과 아무 관련이 없으며 아마도 이미 설정했을 것입니다. 그렇지 않은 경우 계속해서 설정하세요.
public 폴더에 manifest.json 파일을 만듭니다.
{
"name" : " PWA App " ,
"short_name" : " App " ,
"icons" : [
{
"src" : " /icons/android-chrome-192x192.png " ,
"sizes" : " 192x192 " ,
"type" : " image/png " ,
"purpose" : " any maskable "
},
{
"src" : " /icons/android-chrome-384x384.png " ,
"sizes" : " 384x384 " ,
"type" : " image/png "
},
{
"src" : " /icons/icon-512x512.png " ,
"sizes" : " 512x512 " ,
"type" : " image/png "
}
],
"theme_color" : " #FFFFFF " ,
"background_color" : " #FFFFFF " ,
"start_url" : " / " ,
"display" : " standalone " ,
"orientation" : " portrait "
} _document.jsx 또는 _app.tsx 의 에 다음을 추가하세요:
< meta name =" application-name " content =" PWA App " />
< meta name =" apple-mobile-web-app-capable " content =" yes " />
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " />
< meta name =" apple-mobile-web-app-title " content =" PWA App " />
< meta name =" description " content =" Best PWA App in the world " />
< meta name =" format-detection " content =" telephone=no " />
< meta name =" mobile-web-app-capable " content =" yes " />
< meta name =" msapplication-config " content =" /icons/browserconfig.xml " />
< meta name =" msapplication-TileColor " content =" #2B5797 " />
< meta name =" msapplication-tap-highlight " content =" no " />
< meta name =" theme-color " content =" #000000 " />
< link rel =" apple-touch-icon " href =" /icons/touch-icon-iphone.png " />
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" /icons/touch-icon-ipad.png " />
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" /icons/touch-icon-iphone-retina.png " />
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" /icons/touch-icon-ipad-retina.png " />
< link rel =" icon " type =" image/png " sizes =" 32x32 " href =" /icons/favicon-32x32.png " />
< link rel =" icon " type =" image/png " sizes =" 16x16 " href =" /icons/favicon-16x16.png " />
< link rel =" manifest " href =" /manifest.json " />
< link rel =" mask-icon " href =" /icons/safari-pinned-tab.svg " color =" #5bbad5 " />
< link rel =" shortcut icon " href =" /favicon.ico " />
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:300,400,500 " />
< meta name =" twitter:card " content =" summary " />
< meta name =" twitter:url " content =" https://yourdomain.com " />
< meta name =" twitter:title " content =" PWA App " />
< meta name =" twitter:description " content =" Best PWA App in the world " />
< meta name =" twitter:image " content =" https://yourdomain.com/icons/android-chrome-192x192.png " />
< meta name =" twitter:creator " content =" @DavidWShadow " />
< meta property =" og:type " content =" website " />
< meta property =" og:title " content =" PWA App " />
< meta property =" og:description " content =" Best PWA App in the world " />
< meta property =" og:site_name " content =" PWA App " />
< meta property =" og:url " content =" https://yourdomain.com " />
< meta property =" og:image " content =" https://yourdomain.com/icons/apple-touch-icon.png " />
팁: 필요한 경우
viewport헤드 메타 태그를_app.js가 아닌_document.js에 넣으세요.
< meta
name = 'viewport'
content = 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/ > 오프라인 폴백은 캐시와 네트워크 모두에서 가져오기가 실패한 경우 유용합니다. 브라우저에 오류가 표시되는 대신 미리 캐시된 리소스가 제공됩니다.
시작하려면 pages/_offline.js , pages/_offline.jsx , pages/_offline.ts 또는 pages/_offline.tsx 와 같은 /_offline 페이지를 추가하기만 하면 됩니다. 그러면 모든 준비가 완료되었습니다! 사용자가 오프라인일 때 캐시되지 않은 모든 페이지는 '/_offline'으로 대체됩니다.
이 예제를 사용하여 실제로 작동하는 모습을 확인하세요
next-pwa 첫 번째 로드 시 해당 리소스를 사전 캐시한 다음 모든 runtimeCaching 구성에 handlerDidError 플러그인에 대한 폴백 핸들러를 삽입하여 가져오기가 실패할 때 사전 캐시된 리소스가 제공되도록 도와줍니다.
비슷한 기능을 구현하기 위해 RuntimeCaching 구성 항목에서 precacheFallback.fallbackURL 설정할 수도 있습니다. 차이점은 위의 방법은 리소스 유형을 기반으로 하는 반면, 이 방법은 일치하는 URL 패턴을 기반으로 한다는 것입니다. 이 구성이 런타임 캐싱 구성 항목에 설정된 경우 충돌을 피하기 위해 이 특정 URL 패턴에 대해 리소스 유형 기반 대체가 자동으로 비활성화됩니다.
next.config.js 의 다음 구성에 pwa 객체를 추가하여 이 플러그인의 동작을 사용자 정의하는 데 사용할 수 있는 옵션이 있습니다.
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
// disable: process.env.NODE_ENV === 'development',
// register: true,
// scope: '/app',
// sw: 'service-worker.js',
//...
} )
module . exports = withPWA ( {
// next.js config
} )falsedisable: false 설정하여 dev 와 prod 모두에서 서비스 워커를 생성합니다.disable: truedev 에서 서비스 워커를 디버깅할 필요가 없다면 disable: process.env.NODE_ENV === 'development'truefalse 로 설정하세요. 루트 앱의 componentDidMount 에서 이 작업을 수행할 수 있습니다. 예를 들어 Register.js를 고려해 볼 수 있습니다.next.config.js 의 basePath 또는 //app 아래의 경로가 PWA가 되고 다른 경로는 PWA가 되지 않도록 /app 로 설정합니다./sw.jspublic 폴더의 파일이 사전 캐시되지 않도록 제외하기 위한 glob 패턴 문자열의 배열입니다.['!noprecache/**/*'] - 이는 기본 동작이 public 폴더 내의 모든 파일을 사전 캐시하지만 /public/noprecache 폴더 내의 파일을 사전 캐시한다는 의미입니다. 이를 구성하지 않고 파일을 미리 캐시하지 않으려면 해당 폴더 안에 파일을 넣기만 하면 됩니다.['!img/super-large-image.jpg', '!fonts/not-used-fonts.otf'].next/static (또는 사용자 정의 빌드) 폴더에서 사전 캐시되지 않도록 제외하는 추가 패턴 또는 함수의 배열입니다.[][/chunks/images/.*$/] - .next/static/chunks/images 아래에 파일을 미리 캐시하지 마세요. ( next-optimized-images 플러그인과 함께 작동하려면 이 방법을 적극 권장합니다.)truetruecacheStartUrl true 로 설정된 경우 유효합니다./login 과 같은 다른 경로로 리디렉션되는 경우 최상의 사용자 경험을 위해 이 리디렉션된 URL을 설정하는 것이 좋습니다.undefineddynamicStartUrlRedirect true 로 설정된 경우 유효합니다.pages/_offline.js 와 같은 /_offline 페이지를 생성하면 모든 설정이 완료됩니다. 구성이 필요하지 않습니다.objectfallbacks.document - 문서(페이지)에 대한 대체 경로, 해당 페이지를 만든 경우 기본값은 /_offlinefallbacks.image - 이미지의 대체 경로, 기본값은 없음fallbacks.audio - 오디오 대체 경로, 기본값은 없음fallbacks.video - 비디오의 대체 경로, 기본값은 없음입니다.fallbacks.font - 글꼴 대체 경로, 기본값은 없음next/link 있는 페이지 간을 탐색할 때 추가 경로 캐시를 활성화합니다. 이것이 구현된 이유에 대한 몇 가지 맥락을 보려면 이 예제를 확인하세요.false"" - 즉, 접두사가 없는 기본값example.com/subdomain 에서 호스팅되는 경우 /subdomainlocation.reload() 를 호출해야 하는지 여부를 나타냅니다.truenext-pwa workbox에 의해 생성된 서비스 워커에 추가할 사용자 정의 작업자 구현을 찾는 디렉터리를 사용자 정의합니다. 자세한 내용은 커스텀 작업자 예제를 확인하세요.worker next-pwa workbox-webpack-plugin 사용하며, pwa 객체에 추가할 수 있는 다른 옵션은 생성SW 및 InjectManifest에 대한 문서에서 찾을 수 있습니다. swSrc 지정하면 InjectManifest 플러그인이 사용되고, 그렇지 않으면 서비스 워커를 생성하는 데 GenerateSW 사용됩니다.
next-pwa 기본 런타임 캐시.js를 사용합니다.
자신만의 런타임 캐싱 규칙을 사용자 정의할 가능성이 높습니다. 기본 cache.js 파일을 자유롭게 복사하고 원하는 대로 규칙을 맞춤설정하세요. next.config.js 의 pwa 구성에 구성을 삽입하는 것을 잊지 마세요.
백그라운드 동기화 및 브로드캐스트 업데이트 기능 등을 포함하여 런타임 캐싱 구성을 작성하는 방법에 대한 문서는 다음과 같습니다!
postMessage 때 {command: 'doSomething', message: ''} 객체와 같은 규칙을 사용합니다. 따라서 리스너에서는 if...else... 사용하여 여러 가지 다른 작업을 수행할 수 있습니다.clean application cache 불안정한 오류를 줄이세요.options.cacheableResponse.statuses=[200,302] 와 같이 runtimeCaching 에서 이를 지정할 수 있습니다. options.cacheableResponse.statuses=[200,302] .sw.js 파일의 형식을 지정할 수 있습니다.next.config.js 의 pwa 섹션에 mode: 'production' 지정하여 next-pwa 작업자 상자 프로덕션 빌드를 생성하도록 강제합니다. next-pwa 개발 중에( next 실행하여) 작업자 상자 개발 빌드를 자동으로 생성하고 프로덕션 중에( next build 및 next start 실행하여) 작업자 상자 프로덕션 빌드를 자동으로 생성합니다. 다음과 같은 이유로 웹 앱을 개발하는 동안에도 프로덕션 빌드를 강제로 수행할 수 있습니다.worker/index.js 에 self.__WB_DISABLE_DEV_LOGS = true 입력하면 됩니다(없는 경우 하나 생성).userAgent 문자열을 사용해야 하는 것이 일반적이며, ua-parser-js 라이브러리는 그러한 목적에 좋은 친구입니다. MIT
