プログレッシブWebアプリ（PWAS）モバイルユーザーに最高の機能を提供することにより、モバイルWebアプリとネイティブモバイルアプリの世界に重複してみてください。
アプリのようなユーザーエクスペリエンス（スプラッシュスクリーンとホーム画面アイコン）を提供し、HTTPSが固定されたサーバーから提供されます。条件、およびオフラインサポート、インスタントロード、プッシュ通知があります。 PWAの概念はGoogleによって最初に導入され、多くのChrome機能やLighthouseなどの優れたツールでサポートされています。 > このクラッシュコースを通して、ES6でPWAをゼロから構築し、UXとパフォーマンスに関して最良の結果を達成するまで、灯台で段階的に反応して最適化します。プログレッシブという用語は、PWAが多くの新機能とテクノロジーがすでにサポートされているが、古いブラウザでも正常に機能する最新のブラウザーで徐々に拡張できるようにPWAが設計されていることを意味します。最先端の機能はありません。
これらは最も重要な知覚された違いです。アプリの分布への各アプローチには、エンドユーザー（ユーザーエクスペリエンス、可用性など）とアプリの所有者（コスト、顧客の範囲など）に利点があります。それを考慮に入れて、GoogleはPWASを導入して、各サイドの最高の機能を1つの概念にまとめました。これらの側面は、Google ChromeエンジニアのAlex Russellによって導入されたこのリストにまとめられています。 （出典：めったに記録
次のように実行できます
灯台はChrome拡張機能としてインストールすることもできますが、GoogleはDevToolsと統合されたバージョンを使用し、DevToolsを何らかの形で使用できない場合にのみ拡張機能を使用することをお勧めします。
<span>npm install -g lighthouse </span>
最初のPWAをゼロから構築します
このセクションでは、プログレッシブWebアプリをゼロから作成します。まず、ReactとRedditのAPIを使用してシンプルなWebアプリケーションを作成します。次に、Lighthouseレポートで提供された指示に従ってPWA機能を追加します。lighthouse https://sitepoint.com/
開始する前に、このコースでは、NodeJSとNPMがインストールされた開発環境のセットアップがあると仮定します。そうでない場合は、それぞれの最新のバージョンを実行している素晴らしいホームステッドの改善から始めて、箱から出して開発とテストの準備ができています。
Webパック構成の手間からあなたを救うReactチームによって作成されたプロジェクトのボイラープレートであるCreate React Appをインストールすることから始めます。
<span>npm install -g lighthouse </span>
このアプリシェルには、パフォーマンスに多くの利点があります。アプリケーションシェルをキャッシュできます。ユーザーが次回アプリにアクセスすると、ブラウザがリモートサーバーからアセットを取得する必要がないため、すぐにロードされます。
からパッケージをインストールしましょう
次にsrc/app.jsを開きます。次に追加します
次に、2つの方法を使用してRedditの投稿を取得する必要がありますfetchfirst（）とfetchnext（）：
lighthouse https://sitepoint.com/
このgithubリポジトリにソースコードを見つけることができます。
<span>npm install -g create-react-app </span>create-react-app react-pwa <span>cd react-pwa/ </span>
このコマンドは、Package.jsonでビルドスクリプトを呼び出し、React-PWA/ビルドフォルダーにビルドを作成します。
これで、任意のローカルサーバーを使用してアプリを提供できます。 Homesteadの改善では、nginx仮想ホストをビルドフォルダーに向けて、BrowserでHomestead.appを開くだけで、nodejs経由でサーブパッケージを使用できます。<span>npm install material-ui --save </span>
サーブを使用すると、アプリはhttp：// localhost：5000/。
から地元で提供されます
<span>import <span>React, { Component }</span> from 'react';
</span><span>import <span>MuiThemeProvider</span> from 'material-ui/styles/MuiThemeProvider';
</span><span>import <span>AppBar</span> from 'material-ui/AppBar';
</span><span>import <span>{Card, CardActions, CardHeader,CardTitle,CardText}</span> from 'material-ui/Card';
</span><span>import <span>FlatButton</span> from 'material-ui/FlatButton';
</span><span>import <span>IconButton</span> from 'material-ui/IconButton';
</span><span>import <span>NavigationClose</span> from 'material-ui/svg-icons/navigation/close';
</span>
<span>import logo from './logo.svg';
</span><span>import './App.css';
</span>
<span>class App extends Component {
</span>
<span>constructor(props) {
</span> <span>super(props);
</span>
<span>this.state = {
</span> <span>posts: []
</span> <span>};
</span> <span>}
</span>
<span>render() {
</span> <span>return (
</span>
<span><MuiThemeProvider>
</span> <span><div>
</span> <span><AppBar
</span> title<span>={<span >React PWA</span>}
</span>
iconElementLeft<span>={<IconButton><NavigationClose /></IconButton>}
</span> iconElementRight<span>={<FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
</span> <span>}
</span> <span>/>
</span>
<span>{this.state.posts.map(function (el<span>, index</span>) {
</span> <span>return <Card key={index}>
</span> <span><CardHeader
</span> title<span>={el.data.title}
</span>
subtitle<span>={el.data.author}
</span> actAsExpander<span>={el.data.is_self === true}
</span> showExpandableButton<span>={false}
</span> <span>/>
</span>
<span><CardText expandable={el.data.is_self === true}>
</span> <span>{el.data.selftext}
</span> <span></CardText>
</span> <span><CardActions>
</span> <span><FlatButton label="View" onClick={() => {
</span> <span>window.open(el.data.url);
</span> <span>}} />
</span>
<span></CardActions>
</span> <span></Card>
</span> <span>})}
</span>
<span><FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
</span> <span></div>
</span> <span></MuiThemeProvider>
</span>
<span>);
</span> <span>}
</span><span>}
</span>
<span>export default App;
</span>問題なくアプリを監査することはできますが、モバイルデバイスでテストする場合は、Surge.shなどのサービスを使用して1つのコマンドで展開することもできます！
<span>fetchFirst(url) {
</span> <span>var that = this;
</span> <span>if (url) {
</span> <span>fetch('https://www.reddit.com/r/' + url + '.json').then(function (response) {
</span> <span>return response.json();
</span> <span>}).then(function (result) {
</span>
that<span>.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });
</span>
<span>console.log(that.state.posts);
</span> <span>});
</span> <span>}
</span> <span>}
</span> <span>fetchNext(url<span>, lastPostName</span>) {
</span> <span>var that = this;
</span> <span>if (url) {
</span> <span>fetch('https://www.reddit.com/r/' + url + '.json' + '?count=' + 25 + '&after=' + lastPostName).then(function (response) {
</span> <span>return response.json();
</span> <span>}).then(function (result) {
</span>
that<span>.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });
</span> <span>console.log(that.state.posts);
</span> <span>});
</span> <span>}
</span> <span>}
</span> <span>componentWillMount() {
</span>
<span>this.fetchFirst("reactjs");
</span><span>}
</span>このリンクからこのアプリのホストバージョンを見つけることができます。
ここで、Chrome Devtoolsを開き、監査パネルに移動して、監査の実行をクリックしましょう。
レポートから、プログレッシブWebアプリでは45/100のスコア、パフォーマンスに68/100のスコアがすでにあることがわかります。
プログレッシブWebアプリでは、6つの監査に失敗した監査と5つの合格監査があります。これは、生成されたプロジェクトには、Webマニフェスト、ビューポートメタ、<span>npm run build </span>
Lighthouseは、ダウンロードサイズを縮小するか、不要なリソースのダウンロードを延期することにより、クリティカルレンダリングチェーンの長さを短縮することにより、ページの負荷性能を改善することをお勧めします。
現在のネットワーク状態や現在のマシン状態などのさまざまな条件の影響を受けるため、同じマシンの異なる監査セッション間でパフォーマンススコアとメトリックの値が変化する可能性があることに注意してください。
なぜページロードパフォーマンスと速度クライアント側アプリの大部分は、React、Preact、Angular、Vueなどの何らかのJavaScriptライブラリまたはフレームワークを使用して構築されています。PWAを構築する場合は、モバイルファーストライブラリを選択する必要がありますまたは、言い換えれば、そもそもモバイルWeb用に設計されたライブラリです。それ以外の場合、パフォーマンスのためにアプリを最適化することは不可能なミッションになります。
灯台は異なるメトリックを使用しています。それらを1つずつカバーしましょう：
最初の意味のあるペイント
に等しくなります。
最初の意味のあるペイントは、私たちが意味のあるものと見なすことができるものに本当に依存しており、それは異なるユーザー間で異なる場合があります。ユーザーが投稿の読み取りにのみ関心がある場合、最初の意味のあるペイントは3秒のマークの後です。 Googleがこのドキュメントからこのメトリックをどのように計算するかを見ることができます。 
2.560msと報告した同じアプリのもう1つのフィルムストリップであり、ポスト見出しが上記の領域に完全に表示されています。 第二に、ページは一度にはなく徐々にレンダリングされていることがわかります。これはパフォーマンスの適切な兆候です。
重要なレンダリングパスを最適化することにより、この尺度を最適化できます。
重要なレンダリングパス重要なレンダリングパスは、Webブラウザーがページをレンダリングする方法に関連する概念です。つまり、HTML、CSS、JavaScriptアセットを受信した最初の瞬間から、ブラウザが実際の意味のあるコンテンツを処理およびレンダリングするステップまでです。重要なレンダリングパスを最適化するには、ユーザーの現在のアクションに関連するコンテンツにより優先度を高める必要があります。つまり、彼らがあなたのアプリにアクセスしようとしている場合、最初にUIの可視部分、または上記の領域と呼ばれるものを表示することから始めることができます。
重要なCSS資産を挿入するためのキュレーションされたツールのこのリストも表示されます。また、JavaScriptおよびその他の資産を挿入するためのこれらのツールを確認してください：
Inliner：Webページのインライン画像、CSS、JavaScriptへのノードユーティリティ
インラインソース：html
インラインソースとインラインソース-CLIを使用してこの問題を解決してみましょう：
以上がプログレッシブWebアプリ：クラッシュコースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
