プログレッシブ Web アプリ: Web 開発の未来-jsチュートリアル-php.cn

プログレッシブ Web アプリ: Web 開発の未来

PHPz

リリース： 2024-09-05 06:48:07

オリジナル

722 人が閲覧しました

Progressive Web apps: O futuro do desenvolvimento web

PWA について話題になっているのは何ですか?

想像してみてください。あなたは地下鉄に乗っていて、携帯電話でウェブサイトにアクセスしようとしましたが、インターネット信号は低下し続けています。イライラしますよね?
ここで、Web 世界のスーパーヒーローである Progressive Web App が登場します。オフラインでも動作し、超高速で読み込まれ、通知も送信されます。それはあなたのウェブサイトにスーパーパワーを与えるようなものです!

PWAの起源

過去 (2015 年など) に戻ってみましょう。選択肢は、Web サイトを構築するか、アプリを構築するかでした。それは自転車か車かを選択するようなものでした。そこで Google の賢い人たちが「なぜ両方もだめなのか？」と考えました。こうして PWA が誕生しました!

最初の PWA を構築しましょう: 冒険の始まり

力を合わせてシンプルな PWA を一緒に構築しましょう。
「悪いジョーク」アプリを作成しましょう。悪いジョークが嫌いな人がいるでしょうか?

パート 1: 基本 - 単純な Web ページ

まず、基本的な 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: JavaScript の魔法 = 悪いジョークを要求する

ここで、ちょっとした JavaScript を追加して、ジョークを返す API にリクエストを送信しましょう。

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 への変革 - ほんの少しのスーパーパワー

それでは、通常の Web サイトを PWA に変換しましょう。まず、マニフェストファイルが必要です。「manifest.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 ファイルに Service Worker を登録します

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

ログイン後にコピー