プログレッシブ Web アプリ (PWA)-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-08-08 08:26:11

オリジナル

1175 人が閲覧しました

Progressive Web Apps (PWAs)

プログレッシブ 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 の作成:

プロジェクトのセットアップ:
```
mkdir my-pwa
cd my-pwa
npm init -y
npm install express
```
ログイン後にコピー

プロジェクト構造:

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My PWA</title>
  <link rel="stylesheet" href="/styles.css">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Welcome to My Progressive Web App!</h1>
  <script src="/app.js"></script>
</body>
</html>

ログイン後にコピー

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

アプリを開きます:
- ブラウザで http://localhost:3000 に移動します。
Service Worker 登録:
- 開発者ツールを開きます (F12 キーを押すか、右クリックして [検査] を選択します)。
- 「アプリケーション」タブに移動します。
- 「Service Workers」の下に、登録されている Service Worker が表示されます。
ホーム画面に追加:
- モバイルデバイスでは、ブラウザで PWA を開きます。
- 「ホーム画面に追加」というプロンプトが表示されます。