프로그레시브 웹 앱(PWA)-JS 튜토리얼-php.cn

프로그레시브 웹 앱(PWA)

WBOY

풀어 주다： 2024-08-08 08:26:11

원래의

1177명이 탐색했습니다.

Progressive Web Apps (PWAs)

프로그레시브 웹 앱(PWA) 구축

이 게시물에서는 네이티브 앱과 같은 경험을 제공하는 웹 애플리케이션 구축에 대한 현대적인 접근 방식인 프로그레시브 웹 앱(PWA)을 살펴보겠습니다. PWA의 기본 사항과 장점, PWA를 처음부터 만드는 단계를 다루겠습니다.

1. 프로그레시브 웹 앱(PWA) 소개

프로그레시브 웹 앱(PWA)이란 무엇인가요?

프로그레시브 웹 앱은 HTML, CSS, JavaScript 등 일반적인 웹 기술을 사용하여 구축된 웹을 통해 제공되는 일종의 애플리케이션 소프트웨어입니다. PWA는 표준 호환 브라우저를 사용하는 모든 플랫폼에서 작동하도록 고안되었습니다.

PWA의 주요 기능:

반응형: 모든 기기 및 화면 크기에서 작동합니다.
오프라인 기능: 서비스 워커를 사용하여 오프라인 또는 네트워크 상태가 좋지 않은 경우에도 작동합니다.
앱과 같은 경험: 홈 화면 설치 등의 기능으로 앱과 같은 사용자 경험을 제공합니다.
보안: 스누핑을 방지하고 콘텐츠 무결성을 보장하기 위해 HTTPS를 통해 제공됩니다.
재참여 가능: 푸시 알림을 활성화하여 사용자의 참여를 유지합니다.

2. PWA의 장점

PWA를 구축해야 하는 이유

향상된 성능: 로딩 시간이 빨라지고 상호 작용이 원활해졌습니다.
향상된 사용자 참여: 푸시 알림 및 홈 화면 액세스.
개발 비용 절감: 웹과 모바일 환경 모두를 위한 단일 코드베이스.
SEO의 이점: PWA는 검색 엔진에서 검색할 수 있습니다.

3. PWA 설정

전제 조건:

HTML, CSS, JavaScript에 대한 기본 지식
Node.js 및 npm/yarn이 설치되었습니다.

간단한 PWA 만들기:

프로젝트 설정:

mkdir my-pwa
cd my-pwa
npm init -y
npm install express

로그인 후 복사

프로젝트 구조:

my-pwa/
├── public/
│   ├── index.html
│   ├── styles.css
│   └── app.js
├── server.js
├── package.json
└── manifest.json

로그인 후 복사

4. 매니페스트 파일 생성

manifest.json:

매니페스트 파일은 PWA에 대한 메타데이터를 제공하며 홈 화면에 앱을 설치하는 데 필요합니다.

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

로그인 후 복사

5. HTML, CSS, JavaScript 파일 생성

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My PWA</title>
  <link rel="stylesheet" href="/styles.css">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Welcome to My Progressive Web App!</h1>
  <script src="/app.js"></script>
</body>
</html>

로그인 후 복사

styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}

로그인 후 복사

app.js:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

로그인 후 복사

6. 서비스 워커 설정

서비스 워커는 웹페이지와 별도로 브라우저가 백그라운드에서 실행하는 스크립트입니다. 네트워크 요청을 가로채고 리소스를 캐시하여 성능과 오프라인 기능을 향상시킬 수 있습니다.

service-worker.js:

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

로그인 후 복사

7. 서버 설정

server.js:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

로그인 후 복사

서버 실행:

node server.js

로그인 후 복사

8. PWA 테스트

앱 열기:
- 브라우저에서 http://localhost:3000으로 이동하세요.
서비스 종사자 등록:
- 개발자 도구를 엽니다(F12 또는 마우스 오른쪽 버튼을 클릭하고 '검사' 선택).
- '신청' 탭으로 이동하세요.
- '서비스 워커' 아래에 등록된 서비스 워커가 표시됩니다.
홈 화면에 추가:
- 모바일 기기의 경우 브라우저에서 PWA를 엽니다.
- '홈 화면에 추가' 메시지가 표시됩니다.