В тази статия, ние ще разработи прост PWA с помощта на реагирате, което ще ни даде шаблон за развитието на по-сложни приложения.

За да започнете, нека създадем просто приложение, използвайки реагира създаде реагира приложението.

Отидете до директорията, в която да съхранявате вашата кандидатура и изпълнете следните команди:

Започнете NPM старт, за да тествате приложението. Вижте още нищо, но за нашите цели това е едно добро начало. Нека да започнем да конвертирате всичко това в Прогресивен Web App.

1. Инсталация Lighthouse

Нека да го инсталирате в Chrome. и след това да се оцени нашата молба. Можете да стартирате одит Lighthouse, като кликнете върху иконата в горния десен ъгъл на браузъра и след това кликнете върху бутона «Създаване на отчет".

Досега нашата бърза молба (защото имаме много малко съдържание), но не успява в повечето ключови области.

Нека да работим с един от проблемите по един.

2. Конфигуриране Service Worker

За да започнете с Service Worker'om, което трябва да направим 3 неща:

• Създаване на услуги worker.js файл в публичната папка;
• Регистрирайте работник чрез нашите index.js;
• Конфигуриране на кеширането;

Нека да го направя.

Втората стъпка е малко объркващо. Искаме да проверим дали браузърът поддържа worker'y услуга, а след това се регистрирате за услугата-worker.js.

За да направите това, нека да добавите маркер за скриптове в публичния / index.html файл.

Рестартирайте молба, като NPM тичам старт и трябва да видите следното в конзолата:

Нека да затворите конзолата и стартирайте отново одитите Lighthouse:

Правим прогрес! Сега имаме регистрирана служба работник. Тъй като ние имаме кеширане инвалиди, отбележете вторият не е маркиран, но след като ние даваме възможност на кеш паметта ще работи!

3. Добавяне на прогресивните подобрения

Точно сега, файла index.html показва празен Разделение (#root). който взима ни реагират приложение.

Вместо това, ние искаме да се покаже някои основни HTML и CSS, още преди прилагането се инициализира реагират.

Най-лесният начин да направите това - да се движат някои от основните ни HTML структура в същата тази Разделение # корен. Това HTML ще бъдат презаписани, веднага след като ReactDOM App показва компонент, но ще покаже на потребителя нещо, вместо празна страница, на която би трябвало да се взира, докато сваляте bundle.js.

Тук е нашата нова index.html. Моля, имайте предвид, че стиловете са в главата. и HTML Разделение # корен.

На него ще присъстват нашия проект в строя папка. което ще Firebase deploit.

Firebase ни връща URL адрес. Нека да го отворите в браузъра и да започне Lighthouse одит на финала отново.

Къде да отидем

Цялата същност на Прогресивно Web App - скорост. В тази статия, сме пропуснали много неща, свързани с подобряване на производителността, тъй като нашата молба е скелетната.

Въпреки това, с растежа на вашата кандидатура, main.js файл ще расте и расте и Фарът ще бъде по-малко и по-малко доволни от вас.

Последвай ни да не пропуснете статията по-задълбочено за оптимизиране на работата с и реагират реагират рутер, който ще се прилага и за прогресивна Web App, както и за старомодни уеб приложения.

Сега имаме работещ скелет за развитие на PWA и сме готови за бъдещето на уеб приложения.

Благодарим ви за четене!