간단한 8단계로 웹사이트를 PWA로 변환 | Next.js | PWA 시리즈 PART-2
17187 단어 webdevpwajavascriptnextjs
소개
여러분, 웹사이트를 PWA로 변환하는 방법에 대한 2부입니다. PWA가 어떻게 작동하는지 알고 싶다면 1부Introduction to PWA를 확인하십시오.
I highly recommend reading this article once completely before doing a hands-own.
지루한 부분에 대해 이야기 했으므로 이제 코딩으로 넘어 갑시다 🐱💻
First things first, you should already have a website which is responsive and work on mobile devices. As a tutorial you can use the below code to bootstrap a next.js website
1단계: 샘플 웹사이트 만들기
아직 없는 경우 create next app을 사용하여 샘플 웹 사이트를 부트스트랩할 수 있습니다.
npx create-next-app my-pwa-site
이것이 첫 번째 단계 이후의 폴더 구조 모습입니다.
2단계: 종속성 설치
next.js 웹사이트를 PWA로 변환하기 위해 next-pwa이라는 패키지를 사용할 것입니다. 다음을 통해 npm에서 설치하십시오.
npm i next-pwa
설치 후 npm run dev 명령으로 실행할 수 있습니다.
3단계: Next.js 구성 파일 편집
루트 디렉토리에서 next.config.js라는 파일이 있는지 확인하고 파일이 없는 경우 파일을 만들고 **다음 코드를 붙여넣습니다. **next.config.js를 변경한 후 서버를 다시 시작해야 합니다.
// next.config.js
const path = require("path");
const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");
module.exports = withPWA({
pwa: {
dest: "public",
runtimeCaching,
},
// This is not required to make it into a PWA, but is a nice way to clean up your imports
webpack: (config) => {
config.resolve.modules.push(path.resolve("./"));
return config;
},
});
4단계: 필요한 자산 만들기
앱의 아이콘을 생성해야 합니다. 이 아이콘site을 사용하여 표준화된 아이콘을 얻고 아이콘을 생성한 후 루트에 배치할 수 있습니다.
그런 다음 pwa-asset-generator이라는 멋진 패키지를 사용하여 PWA 및 스플래시 화면 이미지, 파비콘 등에 필요한 아이콘을 자동으로 생성합니다.
터미널에서 아래 명령을 실행하고 적절한 아이콘 이름을 지정했는지 확인하십시오. 아이콘 이미지의 이름을 아이콘으로 지정하는 것이 좋습니다.
$ npx pwa-asset-generator icon.png icons
위의 명령은 필요한 모든 이미지가 있는 아이콘 폴더를 생성합니다.
이제 아이콘 폴더를 공용 폴더로 이동하십시오.
5단계: manifest.json 파일 만들기
공용 폴더에서 아래와 같이 manifest.json 파일을 만듭니다. 아래를 보면 이미지 속성이 있는 아이콘이라는 배열을 볼 수 있습니다. pwa-asset-generator를 사용하여 얻을 수도 있습니다. 위의 코드를 실행하면 자동으로 생성됩니다.
매니페스트 파일을 편집하여 앱의 모양과 느낌을 변경할 수 있습니다.
// public/manifest.json
{
"name": "pwa-is-cool",
"short_name": "PWA",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "fullscreen",
"orientation": "portrait",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "icons/manifest-icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/manifest-icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
],
"splash_pages": null
}
6단계: _document.js 파일 편집
기본적으로 _document.js라는 파일은 없으며 페이지 디렉토리에 파일을 만들어야 합니다.
의심스러운 경우 여기official documentation를 확인하십시오. 이 파일은 모든 페이지에 메타 태그를 삽입하는 데 사용됩니다.
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/manifest.json" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
<link href="/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-icon.png"></link>
<meta name="theme-color" content="#317EFB" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
6. PWA를 테스트하십시오!
이제 앱에서 PWA를 사용할 수 있습니다. 우리는 이것을 테스트하기만 하면 됩니다. next-pwa 를 사용하면 서비스 워커는 프로덕션에서만 활성화됩니다. 따라서 npm run build 또는 yarn build로 앱을 빌드할 수 있습니다. 그런 다음 npm start 또는 yarn start로 시작합니다.
// build the project by
npm run build
// Start the build by
npm start
이제 localhost:3000으로 이동하면 다음과 같은 내용이 표시됩니다. 웹 사이트를 설치하면 기본 앱처럼 사용할 수 있습니다. PWA가 모바일 장치에서 어떻게 보이는지 알고 싶다면 모바일 브라우저에서 내 웹사이트milindsoorya.com를 확인하고 설치해 보십시오.
이제 첫 번째 PWA가 실행됩니다. 🎉🎉🎉
다음은
I highly recommend reading this article once completely before doing a hands-own.
First things first, you should already have a website which is responsive and work on mobile devices. As a tutorial you can use the below code to bootstrap a next.js website
1단계: 샘플 웹사이트 만들기
아직 없는 경우 create next app을 사용하여 샘플 웹 사이트를 부트스트랩할 수 있습니다.
npx create-next-app my-pwa-site
이것이 첫 번째 단계 이후의 폴더 구조 모습입니다.
2단계: 종속성 설치
next.js 웹사이트를 PWA로 변환하기 위해 next-pwa이라는 패키지를 사용할 것입니다. 다음을 통해 npm에서 설치하십시오.
npm i next-pwa
설치 후 npm run dev 명령으로 실행할 수 있습니다.
3단계: Next.js 구성 파일 편집
루트 디렉토리에서 next.config.js라는 파일이 있는지 확인하고 파일이 없는 경우 파일을 만들고 **다음 코드를 붙여넣습니다. **next.config.js를 변경한 후 서버를 다시 시작해야 합니다.
// next.config.js
const path = require("path");
const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");
module.exports = withPWA({
pwa: {
dest: "public",
runtimeCaching,
},
// This is not required to make it into a PWA, but is a nice way to clean up your imports
webpack: (config) => {
config.resolve.modules.push(path.resolve("./"));
return config;
},
});
4단계: 필요한 자산 만들기
앱의 아이콘을 생성해야 합니다. 이 아이콘site을 사용하여 표준화된 아이콘을 얻고 아이콘을 생성한 후 루트에 배치할 수 있습니다.
그런 다음 pwa-asset-generator이라는 멋진 패키지를 사용하여 PWA 및 스플래시 화면 이미지, 파비콘 등에 필요한 아이콘을 자동으로 생성합니다.
터미널에서 아래 명령을 실행하고 적절한 아이콘 이름을 지정했는지 확인하십시오. 아이콘 이미지의 이름을 아이콘으로 지정하는 것이 좋습니다.
$ npx pwa-asset-generator icon.png icons
위의 명령은 필요한 모든 이미지가 있는 아이콘 폴더를 생성합니다.
이제 아이콘 폴더를 공용 폴더로 이동하십시오.
5단계: manifest.json 파일 만들기
공용 폴더에서 아래와 같이 manifest.json 파일을 만듭니다. 아래를 보면 이미지 속성이 있는 아이콘이라는 배열을 볼 수 있습니다. pwa-asset-generator를 사용하여 얻을 수도 있습니다. 위의 코드를 실행하면 자동으로 생성됩니다.
매니페스트 파일을 편집하여 앱의 모양과 느낌을 변경할 수 있습니다.
// public/manifest.json
{
"name": "pwa-is-cool",
"short_name": "PWA",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "fullscreen",
"orientation": "portrait",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "icons/manifest-icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/manifest-icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
],
"splash_pages": null
}
6단계: _document.js 파일 편집
기본적으로 _document.js라는 파일은 없으며 페이지 디렉토리에 파일을 만들어야 합니다.
의심스러운 경우 여기official documentation를 확인하십시오. 이 파일은 모든 페이지에 메타 태그를 삽입하는 데 사용됩니다.
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/manifest.json" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
<link href="/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-icon.png"></link>
<meta name="theme-color" content="#317EFB" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
6. PWA를 테스트하십시오!
이제 앱에서 PWA를 사용할 수 있습니다. 우리는 이것을 테스트하기만 하면 됩니다. next-pwa 를 사용하면 서비스 워커는 프로덕션에서만 활성화됩니다. 따라서 npm run build 또는 yarn build로 앱을 빌드할 수 있습니다. 그런 다음 npm start 또는 yarn start로 시작합니다.
// build the project by
npm run build
// Start the build by
npm start
이제 localhost:3000으로 이동하면 다음과 같은 내용이 표시됩니다. 웹 사이트를 설치하면 기본 앱처럼 사용할 수 있습니다. PWA가 모바일 장치에서 어떻게 보이는지 알고 싶다면 모바일 브라우저에서 내 웹사이트milindsoorya.com를 확인하고 설치해 보십시오.
이제 첫 번째 PWA가 실행됩니다. 🎉🎉🎉
다음은
// build the project by
npm run build
// Start the build by
npm start
유용한 리소스:
👉🏼 내 웹사이트를 확인하세요, milindsoorya.com .
제 글을 읽어주시고, 좋아요를 눌러주시고, 댓글을 달아주셔서 정말 감사합니다. 제 글이 즐거우셨거나 도움이 되셨다면 buying me a coffee ☕ 😇로 저를 응원해주세요.
Reference
이 문제에 관하여(간단한 8단계로 웹사이트를 PWA로 변환 | Next.js | PWA 시리즈 PART-2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/milindsoorya/convert-your-website-into-a-pwa-in-8-simple-steps-next-js-pwa-series-part-2-3l3h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
