NextJS 및 Typescript로 PWA 구축
17722 단어 pwanextjsnextjspwapwatypescript
소개
Hello GUYS!!
Are you tired of building the same app thing twice or even more? What if I tell and so you one way that can help you save time and a lot of effort? So let me introduce to you a way that can help you saving time time sometimes. So what I'm gonna introduce to you is a way of creating PWA Next JS .목차
PWA가 무엇인가요?
According to Developer Mozilla , PWA(Progressive Web App)는 서비스 작업자, 매니페스트 및 기타 웹 플랫폼 기능을 점진적 개선과 함께 사용하여 사용자에게 기본 앱과 동등한 경험을 제공하는 웹 앱입니다. .그리고 이것이 무엇을 의미합니까? 즉, 웹 앱을 기본 앱처럼 작동하게 할 수 있으며(사용할 플랫폼, Windows, Mac OS, Android, IOS 등 상관없이) 한 번만 작성하고 웹 앱을 설치할 수 있게 만들 수 있습니다. 앱 브라우저를 독립적으로 만듭니다.
PWA에 대한 자세한 내용을 확인하십시오: web.dev , Developer Mozilla
무엇을 만들고 있습니까?
We'll build an Countdown App, that notifies the user in every two hours, to help us stand up and fight against the sedentary.
우리의 무기고
Since the goal is to build a Next JS app, it's mandatory to know the basics of React jS .이 아이디어를 실현하기 위해 다음 도구를 사용합니다. Next JS , TypeScript 및 Mantine UI .
TypesScript는 JavaScript를 기반으로 하는 강력한 형식의 프로그래밍 언어로 모든 규모에서 더 나은 도구를 제공합니다.
Mantine UI는 모든 기능을 갖춘 반응 구성 요소 라이브러리입니다.
신청
If you already have your app done and you just want make it a PWA app, you can jump into Making The Application PWA 섹션.그렇지 않으면 복제하여 별표 표시
git clone https://github.com/Dalcio/sedentarism-alert
cd sedentarism-alert
yarn install && yarn run dev
또는
npm install && npm run dev
정주 앱 알림
이제 프로젝트가 확정되었으므로 프로젝트 구조를 빠르게 살펴보겠습니다.
이제 프로젝트를 이해했으므로 작은 앱을 PWA로 만들어 보겠습니다.
애플리케이션 PWA 만들기
Now that we have an app (if don't) 앱을 PWA로 만들 차례입니다.먼저 존재하는 다른 화면 때문에 아이콘의 크기를 4배로 조정하겠습니다.
단계
앱을 PWA로 만들려면 다음 단계를 수행해야 합니다.
다음 PWA 종속성 설치
We have to install next-pwayarn add next-pwa
또는
npm i next-pwa
다음 구성 구성
Now we need to configure our next.config.js to look the following:
/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa');
const nextConfig = withPWA({
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
},
reactStrictMode: true,
});
module.exports = nextConfig;
매니페스트 생성
There's many option available that can help you generate the manifest, I'll just use simicart양식을 작성하십시오.
생성을 클릭하고 생성된 파일을 공용 폴더에 업로드합니다. 결국
manifest.webmanifest를 manifest.json로 이름을 바꿉니다.생성된 JSON 파일
{
"theme_color": "#247ED6",
"background_color": "#77eed8",
"display": "standalone",
"scope": "/",
"start_url": "/",
"name": "Sedentarism Alert",
"short_name": "SAlert",
"description": "It's an app that plays a sound when the time is 0 ",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
_document.tsx에 매니페스트 추가
Now we'll configure the manifest in our _document.tsx file, looking like:
import { createGetInitialProps } from '@mantine/next';
import Document, { Head, Html, Main, NextScript } from 'next/document';
const getInitialProps = createGetInitialProps();
export default class _Document extends Document {
static getInitialProps = getInitialProps;
render() {
return (
<Html>
<Head>
<title>Sedentarism Alert - PWA</title>
<link
rel="shortcut icon"
href="alarm-clock.png"
type="image/x-icon"
/>
<link rel="manifest" href="/manifest.json" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
축하합니다
Now our app is a PWA. Congratulation. Now you can deploy it on *Vercel?»참조
Progressive web apps (PWAs)Progressive Web Apps
How to make a Next.js app a PWA
프로젝트
프로젝트 저장소
데모 보기
라이브 데모
Reference
이 문제에 관하여(NextJS 및 Typescript로 PWA 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dalcio/building-a-pwa-with-nextjs-and-typescript-4kf3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
