プログレッシブWebアプリの構築方法


Tue 10 January 2017 By Lise Kemen

前のブログでは、プログレッシブWebアプリ(PWA)とは何かについて説明しました。今日は、優れたPWAを構築するために必要なことについて理解を深めていきます。

アプリケーションを定義する要素を簡単に見てみましょう。

これらの機能は、ブラウザにネイティブに存在します。アクセス可能なHTML5 APIをブラウザですぐに確認することができます

##プログレッシブWebアプリを構築する主な手順

モバイルネットワークの世界の制約を考慮しながら、これらのすべてのAPIを活用するには、技術的には、次のことが必要です。

アプリシェルには、プログレッシブWebアプリの基本的なユーザインタフェースを表示するための、アプリケーションの最小限のHTML、CSS、および主要コンポーネントが含まれています。アプリケーションのUIをデータから完全に分離して、初期ロード時の速度に集中します。アプリシェルが定義され、最初のアプリスケルトンとしてロードされると、サービスワーカーがそのシーンに入ります。

サービスワーカーは、イベントを捕まえてネットワーク要求の処理方法を制御するための保証に基づいたワーカースクリプトです。これはあなたのアプリとは独立しており、しばしばプロキシとして記述されます。これらのワーカーは、あなたのアプリシェルをキャッシュし、ネットワークの状態に依存せずに、バックグラウンドコンテンツの更新とコンテンツキャッシュの管理も行います。オフラインの場合、ユーザは接続を待つ間にキャッシュされたデータをブラウズし、サーバから最新のデータを取得します。webプッシュ通知の管理もしてくれるので、助かります。

次のステップでは、アプリケーションマニフェストを定義して、ユーザの関与の仕方を制御します。アプリケーションマニフェストはJSONファイルで、ユーザのホーム画面用のアイコンと名前を定義し、リソースをキャッシュからダウンロードまたは復元している間にスプラッシュ画面を定義し、テーマの色を設定し、初期のページ向きを指定し、ブラウザの検索バーもなくし、ネイティブのアプリケーション感覚を向上させることができます。

Webアプリはほぼ準備ができています。最後に、PWAがユーザにとって安全でセキュアであることを確認してください。ユーザは、HTTPSを使って安全な情報源から提供を受ける必要があります。さあ、どうぞ!あなたには、今、優れた、安全で、接続に依存しない、常に最新かつ記憶に残るアプリケーションを構築する鍵が用意されています。

さあ、コードを書いてください!PWAを構築するのに役立つ最高のリンクを集めました。

スターターキット
あなたの最初のプログレッシブWebアプリ
プログレッシブWebアプリの初心者ガイド
Webには今、何ができるか?
https://pwa.rocks/

App Shell、AMP&Webプッシュ通知
アプリシェルモデル
アクセラレーションモバイルページ(AMP)
Webプッシュ通知:適時でかつ関連性が高く、正確

サービスワーカー & HTTPS
https://serviceworke.rs/
サービスワーカー:概要
サービスワーカーのレシピ
なぜHTTPSか
混合コンテンツの防止

ツール、テスト、デバッグ
Lighthouseを使ってWebアプリを監査する
プログレッシブWebアプリのデバッグ
プログレッシブWebアプリチェックリスト
プログレッシブWebアプリサミット2016ビデオ

TwitterでPWAの経験を楽しく共有してください!


Tagged: Nuxeo UI, Progressive Web App, How to
Check out the features of our latest Nuxeo Platform Download Nuxeo