프로그레시브 웹 앱: 웹 개발의 미래

PWA에 대한 모든 소문은 무엇입니까?

상상해 보세요. 지하철에서 휴대전화로 웹사이트에 접속하려고 하는데 인터넷 신호가 계속 끊어집니다. 답답하시죠?
이것이 바로 웹 세계의 슈퍼 히어로인 Progressive Web App이 등장하는 곳입니다. 오프라인으로 작동하고 매우 빠른 속도로 로드되며 알림도 보냅니다. 이는 귀하의 웹사이트에 강력한 힘을 부여하는 것과 같습니다!

PWA의 유래

2015년과 같이 과거로 돌아가 보면 옵션은 웹사이트 구축 또는 앱 구축이었습니다. 그것은 자전거와 자동차 중 하나를 선택하는 것과 같았습니다. 그러자 Google의 일부 똑똑한 사람들은 "왜 둘 다 안 될까?"라고 생각했습니다. 그리하여 PWA가 탄생했습니다!

첫 번째 PWA를 만들어 봅시다: 모험 시작하기

팔을 걷어붙이고 간단한 PWA를 함께 만들어 볼까요.
나쁜 농담을 좋아하지 않는 사람이 어디 있겠습니까?

1부: 기본 - 간단한 웹페이지

먼저 기본 HTML을 만들어 보겠습니다. 이것이 우리의 "자전거"입니다. 작동하지만 아직 강력하지는 않습니다.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dad Jokes PWA</title>
    <link rel="stylesheet" href="style.css">


    <h1 id="Dad-Jokes">Dad Jokes</h1>
    <p id="joke">Click the button for a dad joke!</p>
    <button id="jokeBtn">Get New Joke</button>
    <script src="app.js"></script>

파트 2: 스타일 추가 - 모든 나쁜 농담에는 멋진 모습이 필요하기 때문입니다.

CSS를 추가하여 애플리케이션을 더욱 우아하게 만들어 보겠습니다.

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
}

#joke {
    margin: 20px 0;
    font-style: italic;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

3부: 자바스크립트의 마법 = 나쁜 농담을 요청하세요

이제 농담을 반환하는 API에 요청하기 위해 약간의 JavaScript를 추가해 보겠습니다.

const jokeElement = document.getElementById('joke');
const jokeBtn = document.getElementById('jokeBtn');

async function fetchJoke() {
    try {
        const response = await fetch('https://icanhazdadjoke.com/', {
            headers: {
                'Accept': 'application/json'
            }
        });
        const data = await response.json();
        jokeElement.textContent = data.joke;
    } catch (error) {
        jokeElement.textContent = "Oops! Looks like the joke got stuck in dad's old briefcase.";
    }
}

jokeBtn.addEventListener('click', fetchJoke);

// Faz o request na API quando a página carrega
fetchJoke();

4단계: PWA로의 전환 - 엄청난 힘

이제 일반 웹사이트를 PWA로 변환해 보겠습니다. 먼저 매니페스트 파일이 필요합니다. 매니페스트.json이라는 파일을 만듭니다.

{
    "name": "Dad Jokes PWA",
    "short_name": "DadJokes",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#4285f4",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

HTML 파일에 매니페스트 링크를 추가하는 것을 잊지 마세요

<link rel="manifest" href="manifest.json">

5단계: 비법: 서비스 워커

서비스 워커는 눈에 보이지 않는 웹의 작은 집사와 같습니다. 자산을 캐시하고 오프라인에서도 작업할 수 있습니다. service-worker.js라는 파일을 만듭니다.

const CACHE_NAME = 'dad-jokes-cache-v1';
const urlsToCache = [
    '/',
    '/index.html',
    '/style.css',
    '/app.js',
    '/icon.png'
];

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

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

이제 app.js 파일에 서비스 워커를 등록하세요

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

PWA 초능력 테스트

• 오프라인 모드: 인터넷을 끄고 페이지를 새로 고치세요. 앱이 계속 작동할 것입니다!
• 설치 프롬프트: 지원되는 브라우저에 PWA 설치 옵션이 표시됩니다.
• Lighthouse 감사: Chrome의 Lighthouse 도구를 사용하여 PWA의 강력한 성능을 확인하세요.

미래는 진보적이다

축하합니다! 방금 첫 번째 PWA를 구축했습니다. 마치 아이가 첫발을 내딛는 모습을 지켜보는 것과 같죠? (농담이라고 하면...)

2024년을 향해 나아가면서 PWA는 더욱 강력해지고 있습니다. 번거로운 앱 스토어 없이 기기 기능에 액세스하고, 오프라인으로 작업하고, 앱과 같은 경험을 제공할 수 있습니다.

그러므로 다음에 누군가가 웹사이트나 앱을 만들 수 있는지 묻는다면 "둘 다 하면 안 될까요?"라고 대답할 수 있습니다. PWA의 멋진 세계를 소개해주세요!

크레딧

프로그레시브 웹 앱: 웹 개발의 미래, 원래 Baransel 작성

이 글을 읽어주셔서 감사합니다. 유용한 정보를 제공해드릴 수 있기를 바랍니다. 그렇다면 이 글을 추천해주시고, 더 많은 분들이 보실 수 있도록 ♥ 버튼을 눌러주시면 정말 좋겠습니다.

위 내용은 프로그레시브 웹 앱: 웹 개발의 미래의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!