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

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

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

PWAの起源

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

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

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

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

まず、基本的な 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>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: 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));
    });
}

PWA のスーパーパワーをテストする

• オフライン モード: インターネットをオフにして、ページを更新します。アプリはまだ動作するはずです!
• インストール プロンプト: サポートされているブラウザでは、PWA をインストールするオプションが表示されます。
• Lighthouse Audit: Chrome の Lighthouse ツールを使用して、PWA のスーパーパワーをチェックします。

未来は進歩的です

おめでとうございます!最初の PWA を構築しました。まるでお子さんが最初の一歩を踏み出すのを見ているようですね。 (悪い冗談と言えば…)

2024 年に向けて、PWA はさらに強力になっています。デバイスの機能にアクセスし、オフラインで作業し、アプリ ストアの手間をかけずにアプリのようなエクスペリエンスを提供できます。

つまり、次回誰かがウェブサイトかアプリを作成できるか尋ねてきたら、「なぜ両方も作成できないのですか?」と言うことができます。そして、PWA の素晴らしい世界を紹介してください!

クレジット

プログレッシブ Web アプリ: Web 開発の未来、元々は Baransel によって書かれました

この記事をお読みいただきありがとうございます。何か有益な情報を提供できれば幸いです。もしそうなら、この投稿を推薦して♥ボタンをクリックして、より多くの人に見てもらえるととても嬉しいです

以上がプログレッシブ Web アプリ: Web 開発の未来の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。