syarat, dan mereka mempunyai sokongan luar talian, pemuatan segera dan pemberitahuan push. Konsep PWAS pertama kali diperkenalkan oleh Google, dan masih disokong oleh banyak ciri krom dan alat yang hebat, seperti Lighthouse, alat sumber terbuka untuk aksesibiliti, prestasi dan pengauditan kemajuan yang akan kita lihat sedikit kemudian.
Sepanjang kursus kemalangan ini, kami akan membina PWA dari awal dengan ES6 dan bertindak balas dan mengoptimumkan langkah demi langkah dengan mercusuar sehingga kami mencapai hasil terbaik dari segi UX dan prestasi.
istilah progresif semata -mata bermaksud bahawa PWA direka bentuk sedemikian Tiada ciri canggih.Aplikasi web mudah alih boleh diindeks oleh enjin carian seperti Google, dan melalui pengoptimuman enjin carian anda boleh mencapai lebih banyak pengguna. Ini juga berlaku untuk aplikasi asli, kerana kedai aplikasi mempunyai enjin carian mereka sendiri di mana pemaju boleh menggunakan teknik yang berbeza - biasanya dikenali sebagai Pengoptimuman App Store - untuk mencapai lebih banyak pengguna.
Apl asli dimuatkan dengan serta -merta, sekurang -kurangnya dengan skrin percikan, sehingga semua sumber siap untuk aplikasi dilaksanakan.
Ini adalah perbezaan yang paling penting. Setiap pendekatan untuk pengedaran aplikasi mempunyai kelebihan untuk pengguna akhir (mengenai pengalaman pengguna, ketersediaan dll) dan pemilik aplikasi (mengenai kos, jangkauan pelanggan dll.). Mengambil kira itu, Google memperkenalkan PWA untuk membawa ciri -ciri terbaik setiap sisi ke dalam satu konsep. Aspek -aspek ini diringkaskan dalam senarai ini yang diperkenalkan oleh Alex Russell, seorang jurutera Google Chrome. (Sumber: jarang dinyatakan.)
Lighthouse adalah alat untuk mengaudit aplikasi web yang dibuat oleh Google. Ia disepadukan dengan alat dev Chrome dan boleh dicetuskan dari panel audit.
anda juga boleh menggunakan Lighthouse sebagai alat NodeJS CLI:
<span>npm install -g lighthouse </span>
anda kemudian boleh menjalankannya dengan:
lighthouse https://sitepoint.com/
Lighthouse juga boleh dipasang sebagai sambungan Chrome, tetapi Google mengesyorkan menggunakan versi yang disepadukan dengan DevTools dan hanya menggunakan pelanjutan jika anda tidak dapat menggunakan DevTools.
Sila ambil perhatian bahawa anda perlu memasang Chrome pada sistem anda untuk dapat menggunakan Lighthouse, walaupun anda menggunakan versi berasaskan CLI.membina PWA pertama anda dari awal
Sila ambil perhatian bahawa Reddit API yang tidak disahkan oleh orang awam mempunyai tajuk CORS yang didayakan supaya anda boleh memakannya dari aplikasi klien anda tanpa pelayan perantara.
Sebelum kita memulakan, kursus ini akan menganggap anda mempunyai persediaan persekitaran pembangunan dengan NodeJS dan NPM dipasang. Sekiranya anda tidak, mulakan dengan Homestead yang hebat, yang menjalankan versi terkini masing -masing dan bersedia untuk pembangunan dan ujian keluar dari kotak.
Kami mulakan dengan memasang Create React App, boilerplate projek yang dibuat oleh pasukan React yang menyelamatkan anda dari kerumitan konfigurasi Webpack.
<span>npm install -g lighthouse </span>
Shell Aplikasi adalah konsep penting aplikasi web progresif. Ia hanya kod HTML, CSS dan JavaScript yang minimum yang bertanggungjawab untuk memberikan antara muka pengguna.
Untuk membina UI mudah kami akan menggunakan UI Bahan, pelaksanaan Reka Bentuk Google dalam React.
Mari pasang pakej dari npm:
lighthouse https://sitepoint.com/
<span>npm install -g create-react-app </span>create-react-app react-pwa <span>cd react-pwa/ </span>
<span>npm install material-ui --save </span>
Sebelum anda boleh menjalankan audit terhadap aplikasi anda, anda perlu membuat binaan dan melayani aplikasi anda secara tempatan menggunakan pelayan tempatan:
<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>Sekarang anda boleh menggunakan mana -mana pelayan tempatan untuk melayani aplikasi anda. Di Homestead bertambah baik, anda hanya boleh menunjuk tuan rumah maya nginx ke folder binaan dan buka homestead.app dalam penyemak imbas, atau anda boleh menggunakan pakej servis melalui NodeJS:
<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>
Anda boleh mengaudit aplikasi anda tanpa sebarang masalah, tetapi sekiranya anda ingin mengujinya dalam peranti mudah alih, anda juga boleh menggunakan perkhidmatan seperti surge.sh untuk menggunakannya dengan satu arahan!
<span>npm run build </span>
Seterusnya, lonjakan lonjakan dari dalam mana -mana direktori untuk menerbitkan direktori itu ke web.
anda boleh mencari versi yang dihoskan aplikasi ini dari pautan ini.
Sekarang mari kita buka Chrome Devtools, pergi ke Audit Panel dan klik pada melakukan audit.
dari laporan yang kita dapat lihat kita sudah mempunyai skor 45/100 untuk aplikasi web progresif dan 68/100 untuk prestasi. 
Di bawah Prestasi Kami mempunyai diagnostik dan metrik yang dikira yang berbeza, seperti cat pertama yang bermakna, indeks kelajuan interaktif, interaktif, interaktif yang konsisten, dan dianggarkan latensi input. Kami akan melihat perkara ini kemudian.
Lighthouse mencadangkan peningkatan prestasi beban halaman dengan mengurangkan panjang rantai render kritikal sama ada dengan mengurangkan saiz muat turun atau menangguhkan muat turun sumber yang tidak perlu.
Sila ambil perhatian bahawa skor prestasi dan nilai metrik boleh berubah antara sesi pengauditan yang berbeza pada mesin yang sama, kerana ia dipengaruhi oleh banyak keadaan yang berbeza -beza seperti keadaan rangkaian semasa anda dan juga keadaan mesin semasa anda.
Mengapa Page Load Prestasi dan Matter Speed Pertimbangkan prestasi
Anda perlu menggunakan alat ujian yang berbeza, seperti Chrome Devtools, Lighthouse, Google PagesPeed dan lain -lain, untuk menguji aplikasi anda dengan berat di bawah keadaan rangkaian yang berbeza dan simulasi, jadi anda boleh mengoptimumkan prestasi beban halaman aplikasi anda.
metrik prestasi PWA yang anda perlukan untuk memakai radar anda
Lighthouse menggunakan metrik yang berbeza. Mari kita tutup mereka satu demi satu:
Cat pertama yang bermakna
inilah metrik ini untuk aplikasi kami.
kita melihat bahawa dari 1.3s penyemak imbas mula menjadikan latar belakang kosong, kemudian dari 2S pelayar mula memberikan header, 2.4s kedua -dua butang pada tajuk dan bahagian bawah diberikan. Ia tidak sampai kedua yang kedua bahawa jawatan itu diberikan. Seluruh proses mengambil masa 3.4 saat dan cat pertama bermakna sama dengan butang
- apabila header tanpa seterusnya butang diberikan. Cat pertama bermakna benar -benar bergantung kepada apa yang boleh kita pertimbangkan sebagai bermakna, yang boleh berbeza antara pengguna yang berbeza. Jika pengguna hanya berminat untuk membaca siaran, maka cat pertama yang bermakna untuk mereka adalah selepas tanda 3 saat. Anda dapat melihat bagaimana Google mengira metrik ini dari dokumen ini.
2.560ms pada tangkapan skrin terakhir di mana tajuk utama dipaparkan sepenuhnya di kawasan di atas. Kedua, anda dapat melihat bahawa halaman itu diberikan secara progresif, tidak sekaligus, yang merupakan petunjuk prestasi yang baik.
anda boleh mengoptimumkan langkah ini dengan mengoptimumkan laluan rendering kritikal.
jalan rendering kritikal
Untuk maklumat lanjut, anda boleh membaca "mengoptimumkan laluan rendering kritikal".
Anda juga boleh melihat senarai alat yang dikendalikan ini untuk merangka aset CSS kritikal. Periksa juga alat ini untuk merenung JavaScript dan aset lain:
inliner: utiliti nod untuk imej inline, CSS dan javascript untuk laman web
Sekarang mari kita cuba menyelesaikan masalah ini menggunakan sumber inline dan inline-source-cli: 
Kami kemudian menavigasi di dalam folder Build dan buka index.html, kemudian tambahkan kata kunci secara sebaris ke dan <script> elemen yang kita mahu sebaris: </script>
<span>npm install -g lighthouse </span>
mari kita sebaliknya sumber -sumber ini:
lighthouse https://sitepoint.com/
<span>npm install -g create-react-app </span>create-react-app react-pwa <span>cd react-pwa/ </span>
Kedua -dua metrik ini menunjukkan masa untuk pengguna dapat berinteraksi dengan aplikasinya. Kedua-dua metrik menyatakan keupayaan dan kebolehgunaan, tetapi ada perbezaan di antara mereka. Langkah -langkah interaktif pertama apabila halaman adalah sedikit interaktif, sementara langkah -langkah interaktif secara konsisten apabila halaman itu interaktif sepenuhnya.
anda boleh mengoptimumkan masa untuk menjadi interaktif dengan mengoptimumkan laluan rendering kritikal.
Indeks kelajuan persepsi adalah metrik yang mengukur prestasi visual di atas halaman sambil mengambil kira kestabilan susun atur (tiada anjakan unsur UI secara tiba-tiba). Ia hanya menunjukkan betapa cepatnya kandungan halaman kelihatan penduduk.
PSI adalah versi yang diubahsuai dari metrik indeks SI atau kelajuan, yang merupakan masa purata di mana kawasan di atas (kelihatan) di atas dipaparkan tanpa mengambil kira kestabilan visual.
anda juga boleh mengoptimumkan metrik ini dengan mengoptimumkan laluan rendering kritikal.anggaran latency input
anda boleh membaca lebih lanjut mengenai metrik ini dan bagaimana lulus di sini.
masa untuk pertama byte (ttfb)
Masa untuk Byte Pertama (TTFB) adalah pengukuran yang digunakan sebagai petunjuk responsif pelayan web atau sumber rangkaian lain. TTFB mengukur tempoh dari pengguna atau klien yang membuat permintaan HTTP ke bait pertama halaman yang diterima oleh penyemak imbas klien.Anda boleh menggunakan alat seperti WebpageTest dan Lighthouse untuk mengukur TTFB PWA anda. Untuk maklumat lanjut, lihat pautan ini.
mari kita lihat satu set konsep dan teknik biasa yang digunakan oleh pemaju untuk mengoptimumkan metrik ini.
Pembahagian kod dan Chunking berasaskan laluan
Sebagai penyelesaian untuk masalah ini, aplikasi yang berbeza menggunakan pemisahan kod dan pemisahan berasaskan laluan (memisahkan kod ke dalam ketulan yang hanya diperlukan untuk setiap laluan). Oleh itu, penyemak imbas hanya perlu memuat turun bahagian pertama yang diperlukan untuk menjadikan halaman/laluan pertama, kemudian malas memuatkan ketulan yang tersisa apabila pengguna menavigasi laluan lain.
Rendering sisi pelayan adalah proses menjadikan kandungan awal pada pelayan dan bukannya penyemak imbas-yang mungkin, dalam banyak situasi, meningkatkan prestasi beban halaman, kerana penyemak imbas dapat memaparkan kandungan (HTML biasa) .
Rendering sisi pelayan sahaja tidak akan membantu banyak dalam mengoptimumkan masa untuk pengguna menjadi interaktif, kerana aset JavaScript perlu dimuat turun dan boot.
corak prestasi prplprpl bermaksud:
Tekan sumber kritikal untuk laluan URL awal
mengoptimumkan prestasi melalui caching
kita boleh mempertimbangkan dua kategori aplikasi di sini. Apl yang hanya memerlukan sambungan rangkaian untuk mendapatkan aset yang bertanggungjawab untuk memberikan UI dan/atau memerlukannya untuk menyediakan fungsi teras. Fikirkan, sebagai contoh, aplikasi yang menyediakan perakaunan peribadi untuk pengguna, yang hanya bergantung kepada algoritma dan pengiraan (CPU tempatan).
Kategori kedua adalah aplikasi yang bergantung kepada pelayan jauh untuk mendapatkan maklumat terkini. Anda mungkin tertanya -tanya mengapa anda perlu data cache, memandangkan ia akan menjadi usang dan pengguna kebanyakannya memerlukan maklumat terkini. Perkara itu, di banyak bahagian di dunia masalahnya bukanlah gangguan kekal sambungan rangkaian, tetapi keadaan yang berubah -ubah rangkaian antara isyarat yang perlahan dan baik, dan itulah yang mempengaruhi pengalaman pengguna walaupun aplikasinya sudah dimuatkan.
Aplikasi ini boleh menggunakan caching data (memanfaatkan API penyegerakan latar belakang) untuk menjamin perkhidmatannya apabila pengguna menavigasi antara halaman, atau bahkan jika mereka pergi dan kembali ke aplikasi dalam masa yang singkat, oleh Secara berterusan menonton keadaan rangkaian, kemudian meneruskan pengambilan/menghantar data tanpa mengganggu pengguna.
Sekarang mari kita menyelesaikan masalah yang gagal untuk skor yang lebih baik.
Audit gagal pertama mengatakan bahawa aplikasinya tidak mendaftarkan pekerja perkhidmatan. Sebelum menukarnya, mari kita mula -mula memahami pekerja perkhidmatan dan ciri -ciri yang berkaitan.
Pekerja perkhidmatan adalah teknologi penyemak imbas moden yang boleh digunakan sebagai proksi sisi klien yang membolehkan aplikasi anda (dengan memintas permintaan rangkaian) untuk melaksanakan caching untuk menambahkan ciri-ciri seperti pemuatan segera dan sokongan luar talian dan lain-lain
Pekerja perkhidmatan juga boleh digunakan untuk melaksanakan kemas kini dan terlibat dengan pemberitahuan push.
Pekerja perkhidmatan tidak dapat mengakses halaman dom, tetapi boleh berkomunikasi dengan klien (tetingkap, pekerja, atau pekerja kongsi) melalui kaedah postmessage ().
Banyak pelayar API tersedia untuk digunakan di dalam pekerja perkhidmatan, seperti:
Pekerja perkhidmatan mempunyai banyak acara kitaran hayat yang perlu dikendalikan dengan betul.
Projek React sudah mengandungi pekerja perkhidmatan. Kita boleh menggunakannya atau membuat yang baru supaya kita dapat mendapatkan idea yang lebih baik tentang bagaimana pekerja perkhidmatan berfungsi.
Dalam folder awam, mari buat fail baru bernama Service-worker.js, kemudian daftarkannya dari fail awam/index.html dengan menambahkan kod berikut sebelum
Atas ialah kandungan terperinci Aplikasi Web Progresif: Kursus Kemalangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
