プログレッシブ Web アプリ (PWA)

プログレッシブ Web アプリ (PWA) の構築

この投稿では、ネイティブ アプリのようなエクスペリエンスを提供する Web アプリケーションを構築する最新のアプローチであるプログレッシブ Web アプリ (PWA) について説明します。 PWA の基本、その利点、および PWA を最初から作成する手順について説明します。

1. プログレッシブ Web アプリ (PWA) の概要

プログレッシブ Web アプリ (PWA) とは何ですか?

プログレッシブ Web アプリは、Web を通じて配信されるアプリケーション ソフトウェアの一種で、HTML、CSS、JavaScript などの一般的な Web テクノロジーを使用して構築されます。 PWA は、標準に準拠したブラウザを使用するあらゆるプラットフォームで動作することを目的としています。

PWA の主な機能:

• レスポンシブ: あらゆるデバイスと画面サイズで動作します。
• オフライン機能: Service Worker を使用して、オフラインまたはネットワーク状態が悪い場合に機能します。
• アプリのようなエクスペリエンス: ホーム画面のインストールなどの機能を備えたアプリのようなユーザー エクスペリエンスを提供します。
• 安全: スヌーピングを防止し、コンテンツの整合性を確保するために HTTPS 経由で提供されます。
• 再エンゲージメント可能: プッシュ通知を有効にしてユーザーのエンゲージメントを維持します。

2. PWAのメリット

PWA を構築する理由

• パフォーマンスの向上: 読み込み時間が短縮され、操作がよりスムーズになりました。
• ユーザーエンゲージメントの強化: プッシュ通知とホーム画面へのアクセス。
• 開発コストの削減: Web とモバイルの両方のエクスペリエンスを単一のコードベースで実現します。
• SEO の利点: PWA は検索エンジンで見つけられます。

3. PWA のセットアップ

前提条件:

• HTML、CSS、JavaScript の基本的な知識
• Node.js と npm/yarn がインストールされています。

シンプルな PWA の作成:

1. プロジェクトのセットアップ:
   

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

2. プロジェクト構造:
   

   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:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
  1fc2df4564f5324148703df3b6ed50c1
  4f2fb0231f24e8aef524fc9bf9b9874f
  b2386ffb911b14667cb8f0f91ea547a7My PWA6e916e0f7d1e588d4f442bf645aedb2f
  810801fb5d57e2948359b7eef57cb689
  02ccac29734b382144275b53674934d7
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
  4a249f0d628e2318394fd9b75b4636b1Welcome to My Progressive Web App!473f0a7621bec819994bb5020d29372a
  1e1ccda7e68c35a670bf47149c0f0c612cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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 のセットアップ

Service Worker は、ブラウザが Web ページとは別にバックグラウンドで実行するスクリプトです。ネットワーク リクエストをインターセプトし、リソースをキャッシュしてパフォーマンスとオフライン機能を向上させることができます。

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 のテスト

1. アプリを開きます:

   • ブラウザで http://localhost:3000 に移動します。

2. Service Worker 登録:

   • 開発者ツールを開きます (F12 キーを押すか、右クリックして [検査] を選択します)。
   • 「アプリケーション」タブに移動します。
   • 「Service Workers」の下に、登録されている Service Worker が表示されます。

3. ホーム画面に追加:

   • モバイル デバイスでは、ブラウザで PWA を開きます。
   • 「ホーム画面に追加」というプロンプトが表示されます。

9. PWA のベスト プラクティス

ベストプラクティス:

• HTTPS を使用する: PWA には安全なコンテキストが必要です。
• 画像の最適化: 応答性の高い画像と遅延読み込みを使用します。
• ネットワークリクエストを最小限に抑える: リソースを効果的にキャッシュします。
• オフライン機能の確保: 有意義なオフライン体験を提供します。

10. 結論

ここで取り上げた重要なポイントを要約します:

• PWA とその利点の紹介。
• マニフェスト、Service Worker、キャッシュを使用した単純な PWA のセットアップ。
• 堅牢な PWA を構築するためのベスト プラクティス。

11. 追加リソース

• PWA ドキュメント
• 高度な PWA トピックに関するチュートリアルとガイド。
• コミュニティ フォーラムとサポート。

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