PWA: 학습, 구현 및 사랑 ft. NextJS 2분 미만

4808 단어 beginnerswebdevproductivityprogramming
웹 개발 여정을 시작할 때 항상 웹 애플리케이션을 모바일 앱으로 변환한다는 개념에 압도되었습니다. 독학 개발자로서 나는 그것을하는 방법에 대해 꽤 단서가 없었습니다. 고급 이점과 그 배후의 방법론을 깨닫는 데 3개월이 걸렸습니다. 사회에 환원해야 할 때라고 생각합니다. 그럼 지금부터 단 2분 만에 모든 것을 배워봅시다!

PWA 이해 ✨



모바일 앱과 웹에 아기가 있다면 그 아기는 PWA가 될 것입니다. 기본적으로 PWA는 기업이 기본 모바일 앱의 모양과 느낌을 가지면서도 JavaScript, CSS 및 HTML과 같은 웹 기술을 사용하여 웹 응용 프로그램을 구축할 수 있도록 지원합니다. PWA는 푸시 알림, 오프라인 지원 등과 같은 기능을 제공합니다. Progressive Web Apps는 기본적으로 안전합니다. PWA를 지원하는 기술을 사용하려면 앱이 HTTPS를 통해 작동해야 합니다. 기업들은 애플리케이션 개발, 테스트 및 유지 관리에 소요되는 시간을 줄이는 PWA를 채택하고 있습니다.

Gartner predicts, up to 20% of companies will abandon their native mobile applications. Instead, they believe that PWA will become a more viable alternative to them.





실제로 Alibaba와 같은 여러 회사는 별도의 기본 앱 대신 PWA 앱에만 노력을 집중함으로써 전환 및 평균 구매가 증가했음을 보여주었습니다. 우리 블로그는 NextJS로 2분 안에 PWA를 구축할 것을 약속하므로 직접 들어가 보겠습니다.

시간이 시작됩니다 ⏳



여기에서 처음부터 시작할 것이지만 기존 프로젝트에 PWA를 확실히 추가할 수 있습니다.

yarn create next-app --typescript


우리는 typescript를 지원하는 기본 NextJS 스타터로 시작했습니다. 이제 작업을 수행하는 종속성을 추가해 보겠습니다.

yarn add next-pwa @types/next-pwa


이제 애플리케이션에 대한 메타 데이터를 지정하려면 manifest.json이 필요합니다.

{
  "name": "PWA Application with Next",
  "short_name": "PWA",
  "icons": [
    {
      "src": "/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#000000",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}


this을 사용하여 애플리케이션에 대한 매니페스트를 생성하거나 위의 매니페스트를 복사할 수 있습니다. here 에서 생성할 수 있는 512 x 512 , 384 x 384 및 192 x 192 크기의 이미지 3개가 필요합니다. 이 모든 파일(이미지 및 manifest.json)을 공용 디렉터리에 배치합니다.

페이지 디렉토리에 _document.ts 페이지를 생성해 봅시다. 파일에 코드를 추가할 수 있습니다.

import Document, { Html, Head, Main, NextScript } from "next/document";

class NextDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/192x192.png"></link>
          <meta name="theme-color" content="#000000" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default NextDocument;


거의 완료되었습니다!🥳 마지막으로 next.config.js 에 새 구성을 추가해 보겠습니다.

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa");

const nextConfig = {
  reactStrictMode: true,
};

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
  },
  nextConfig,
});


축하합니다!🥳 정말 빠르게 PWA 애플리케이션을 구축했습니다. 바라건대 당신은 2 분 안에 그것을 할 수 있었고 과정에서 오류가 없었습니다.

귀하의 애플리케이션에 오프라인 지원을 추가하는 방법에 대한 보너스를 알려드리겠습니다. 페이지 디렉토리에 _offline.tsx 파일을 만듭니다. 그리고 특정 코드로 바꿉니다.

import type { NextPage } from "next";

const Offline:NextPage = () =>{
   return (<h1>You need to check your internet connection 😢 </h1>);

}

export default Offline;


멋진 UI 요소를 추가하고 오프라인 페이지를 단순한 문장이 아닌 대화형으로 만드세요. 아래에는 Kubernetes용 Serverless Functions 및 Workflows 구축에 중점을 둔 오프라인 지원이 포함된 PWA 기능을 Fission에 추가하는 오픈 소스 기여 중 하나가 추가되었습니다.



오류가 발생하여 응용 프로그램이 작동하지 않거나 저와 상호 작용하려는 경우 언제든지 저에게 연락하십시오 💕
쿠키와 로컬 저장소의 차이
go sync. map 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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