CSSとPWAS：プログレッシブWebアプリを構築するためのいくつかのヒント

プログレッシブWebアプリ（PWAS）：CSSと開発に深く潜ります

オンラインの風景は、モバイルデバイスの台頭とともに劇的に変化しました。ウェブサイトは、単一のバージョンからデスクトップ/モバイルのバリエーション、レスポンシブデザイン、そして最後にネイティブモバイルアプリに進化しました。 最新のイテレーションは、Progressive Webアプリ（PWA）です。これは、最高のWebとネイティブのアプリエクスペリエンスをブレンドすることを目指しています。この記事では、PWA開発に不可欠なCSS技術について説明します

重要な概念：

PWAは、ネイティブアプリの信頼性、速度、および魅力的なエクスペリエンスをWebのアクセシビリティと組み合わせて、アプリストアのダウンロードの必要性を排除します。
• PWA開発には標準のWebアプリ開発に似ていますが、
ファイル（PWA外観の制御）、サービスワーカー（オフライン機能を有効）、およびCSS。
• 重要なCSSの考慮事項には、プラットフォーム固有のUIアドヒアランス、デバイス機能設計、優雅な劣化/プログレッシブ強化の実装が含まれます。 無駄のないミニマリストのデザインは、最適なパフォーマンスのための鍵です Create React App、Angular、Ionicなどのフレームワークは、PWAの開発を簡素化しますが、パフォーマンスに影響を与える可能性があります。それらの使用を注意深く考えてください。manifest.json Google Lighthouseなどのパフォーマンス監視ツールは、PWAの速度と応答性を最適化するために非常に貴重です。
• PWASを理解する：
• 3つのCore PWA機能アドレス典型的なWebアプリの欠点：

信頼性：PWAは信頼できるロードで、標準のWebページとは異なり、ネットワーク接続が不十分であってもネイティブアプリを模倣しています。

速度：

PWAのパフォーマンスは、場所、ネットワーク速度、またはその他の外部要因に関係なく、一貫性を維持しています。

1. 魅力的：pwasは、ネイティブアプリに似た没入型のフルスクリーンエクスペリエンスを提供し、アプリストアのインストールなしで、しばしばプッシュ通知をサポートします。
2. GoogleはPWAの採用を支持しており、その人気は急速に増加しています。 DudaのCEOであるItai SadanがCloudFest 2018で述べています。
3. PWA開発エッセンシャル：
PWA開発は、標準のWebアプリ開発に似ており、展開にHTTPSが必要です（LocalHostテストは受け入れられます）。 主要な要件には、次のものが含まれます

1. マニフェストファイル（manifest.json）：このJSONファイルは、デバイスのホーム画面でのPWAの外観を制御し、名前、アイコン、色などを定義します。CSSはここに直接関与していません。純粋に構成です。 （以下に示す例）

   

2. サービスワーカー：ブラウザとは独立して実行されているJavaScriptファイル、ネットワークリクエストの傍受、キャッシュリソース、プッシュ通知の処理。これがオフライン機能の基盤です。 （以下のスニペットの例）

   self.addEventListener('install', function(e) {
   e.waitUntil(
     caches.open('airhorner').then(function(cache) {
       return cache.addAll([
         '/',
         '/index.html',
         '/index.html?homescreen=1',
         '/?homescreen=1',
         '/styles/main.css',
         '/scripts/main.min.js',
         '/sounds/airhorn.mp3'
       ]);
     })
   );
   });

3. サイトアセット（CSSを含む）：サービスワーカーのインストール中、CSS、JavaScript、メディアファイルを含むすべてのサイト資産がインストールされます。 これは、CSSスタイリングが有効になる場所です

PWASのCSSの考慮事項：

いくつかの重要な決定は、CSSの実装に影響を与えます：

• プラットフォーム固有のUIS：プラットフォーム固有のUISを回避すると、ユーザーの疎外が妨げられ、潜在的に変化するプラットフォーム設計への依存度が低下します。ネイティブのような行動を目指して努力しながら、プラットフォームに依存しないアプローチが一般的に推奨されます。

• デバイス機能：デスクトップを含むすべてのプラットフォームのデザイン（ChromeはすでにデスクトップPWASをサポートしています）。 CSSとサービスワーカーを使用して、利用可能なリソースに基づいて機能を適応させます。
  優雅な劣化と進行性の強化：
CSSの固有の優雅な劣化（サポートされていない特性を無視）は、進行性の強化によって補完する必要があります。 サービスワーカーのような機能を使用する前に、APIサポートをテストします：

• if (!('serviceWorker' in navigator)) {
    console.log('Service Worker not supported');
    return;
  }

  一般的な提案：
ユーザーエクスペリエンスと開発リソースのバランス。 プラットフォームに依存しないデザインに設計標準（材料デザインなど）とフレームワーク（ブートストラップなど）を利用します。 プラットフォームに基づいた条件付きCSSロード（
• または

  を使用しますが、後者の信頼性が低くなります）は、複雑さを追加します。 navigator.platformnavigator.userAgentpwaフレームワーク：

フレームワークはPWAの開発を加速しますが、パフォーマンスに悪影響を与える可能性があります。 特に初期学習段階では、慎重に使用してください。 その後、無駄のないミニマリストのスタイルシートとプラットフォームに依存しないデザインを目指して努力してください
CREATE REACT APP：

PWA開発のためのReactコンポーネントを提供します。

• Angular： Googleのフレームワークは、ネイティブのPWAサポート（）を提供します

  

• イオン：クロスプラットフォームPWA開発のための角度、コルドバ、および組み込みのサービスワーカー/マニフェストサポート。

  

PWAパフォーマンスの最適化：

速度とエンゲージメントの維持が重要です。 CSSを無駄のないミニマリストに保ちます。 考えてみてください：

http/2サーバーの使用
• 重要なCSSの場合
• rel=preloadNetworkInformationApiおよびキャッシュ
重要なCSSをインランス
• リソースの最小化と最適化

Google lighthouse：このパフォーマンス監視ツール（Chrome Devtoolsに統合）は、PWAのパフォーマンスを最適化するために詳細なレポートを生成します。

結論：

CSSを使用してPWAを開発するには、パフォーマンスと応答性を慎重に検討する必要があります。 多くのWeb開発手法が適用されますが、フレームワークの使用とCSSの最適化に関する情報に基づいた決定は、高性能で魅力的なユーザーエクスペリエンスを作成するために不可欠です。 無駄のない効率的なデザインに優先順位を付けることを忘れないでください

以上がCSSとPWAS：プログレッシブWebアプリを構築するためのいくつかのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。