프로그레시브 웹 앱: 웹 개발의 미래-JS 튜토리얼-php.cn

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

PHPz

풀어 주다： 2024-09-05 06:48:07

원래의

740명이 탐색했습니다.

Progressive Web apps: O futuro do desenvolvimento web

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

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

PWA의 유래

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <h1>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>
</body>
</html>

로그인 후 복사

파트 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));
    });
}

로그인 후 복사