Իմացեք ավելին «ինչու» և «ինչպես» ստեղծելու առաջադեմ վեբ հավելվածներ

Պրոգրեսիվ վեբ հավելվածները, որոնք կարճ ժամանակ հայտնի են որպես PWA, վեբ հավելվածների նոր սերունդ են, որոնք ապահովում են օգտատերերի բնօրինակ հավելվածների փորձը: PWA-ն հավելվածներ են, որոնք ստեղծվել են ժամանակակից զննարկիչի API-ների միջոցով՝ յուրաքանչյուրին, ցանկացած վայրում և ցանկացած սարքում մեկ կոդերի բազայով օգտատերերի ընդլայնված փորձը մատուցելու համար:

Ինչպես սահմանված է Google Developers-ի կողմից, Պրոգրեսիվ վեբ հավելվածներն օգտագործում են ժամանակակից վեբ հնարավորություններ՝ հավելվածի նման օգտատերերի փորձ մատուցելու համար: Դրանք զարգանում են զննարկիչի ներդիրների էջերից մինչև սուզվող, վերին մակարդակի հավելվածներ՝ ամեն պահ պահպանելով համացանցի ցածր շփումը:

Ինչու՞ մեզ պետք է ունենալ PWA

Բիզնեսի համար PWA կառուցելու շատ պատճառներ կան: Նախքան պատճառներին անցնելը, եկեք տեսնենք որոշ վիճակագրություն.

  1. Բջջային սարքերի առաջխաղացման և աճող հնարավորությունների շնորհիվ մարդկանց մոտավորապես 70–75%-ը նախընտրում է զննարկել իրենց բջջային հեռախոսներով։
  2. Մարդկանց մեծամասնությունը սպասում է, որ վեբ էջը բեռնվի առավելագույնը 2 վայրկյանում, հակառակ դեպքում նրանք սկսում են կորցնել իրենց հետաքրքրությունը և, հավանաբար, դուրս են գալիս կայքից:
  3. Քանի որ հայրենի հավելվածները չափի առումով մեծանում են, մարդիկ խուսափում են իրենց հեռախոսներում բնիկ հավելվածներ ներբեռնելուց

Այս վիճակագրությունը ապացուցում է, որ հավելվածները պետք է ավելի արագ բեռնվեն ցանկացած սարքի վրա և իդեալականորեն պետք է օգտագործողի սարքի վրա ավելի քիչ տարածք սպառեն: PWA-ները օգնում են հաղթահարել վերը թվարկված խնդիրները և տալիս են հետևյալ առավելությունները.

  • Ունեն ավելի քիչ բեռնման ժամանակ և կարող են գործել առանց ցանցային միացման: Նրանք կարող են տեղադրվել և սահուն աշխատում են նույնիսկ ցանցի ավելի ցածր թողունակության դեպքում
  • Աշխատեք բոլոր խաչմերուկային սարքերի վրա: Մշակողները պետք է ստեղծեն միայն մեկ փաթեթավորված հավելված, որը կարող է տեղակայվել բազմաթիվ ալիքներով, ինչպիսիք են վեբը, բջջային հեռախոսը և այլն, ապահովելով օգտատերերի հետևողական փորձ:
  • Նրանք կառուցված են վեբի վերևում, հետևաբար այս հավելվածների ամբողջ բովանդակությունը ինդեքսավորվում է և ստանում է SEO-ի առավելությունները, ինչպես սովորական վեբ հավելվածները:
  • Ունեցեք օգտատերերին ներգրավված պահելու հնարավորություն՝ ուղարկելով push ծանուցումներ
  • Կարող է հեշտությամբ տեղադրվել և մուտք գործել իրենց հիմնական էկրաններից

PWA ընդդեմ բնիկ հավելվածի

  • Բնական հավելվածները կարող են տեղադրվել պլատֆորմի հատուկ հավելվածների խանութից, մինչդեռ PWA-ները կարելի է ներբեռնել և ավելացնել իրենց հիմնական էկրաններին հենց բջջային բրաուզերից:
  • Բնական հավելվածները նախագծված են հատուկ սարքի կառուցվածքի համաձայն, մինչդեռ PWA-ները հիմնականում նման են կայքի արձագանքող տեսքին:
  • Մայրենի հավելվածների մեծ մասը չի գործում անցանց միջավայրում, մինչդեռ PWA-ները լավ են գործում անցանց միջավայրում՝ օգտագործելով քեշավորված տվյալները:

Ինչպես կառուցել PWA

Նախքան իրական PWA կառուցելը, մենք պետք է բացահայտենք հիմնական տարրերը, որոնք անհրաժեշտ են PWA կառուցելու համար:

PWA-ի հիմնական տարրերը

  • Անվտանգ համատեքստեր — Սա պատուհան է, որի համար պահպանվում են նույնականացման և գաղտնիության որոշակի նվազագույն չափանիշներ: Անվտանգ համատեքստում փոխանցված վեբ հավելվածները վստահության զգացում են հաղորդում օգտատերերին:
  • Սպասարկման աշխատողներ — Սրանք սկրիպտներ են, որոնք կատարվում են դիտարկիչի կողմից ֆոնային ռեժիմում: Սպասարկման աշխատողների օգնությամբ մշակողները կարող են ստեղծել վեբ էջեր, որոնք չափազանց արագ են և կարող են աշխատել օֆլայն միջավայրում: Նրանք ապահովում են այնպիսի գործառույթներ, ինչպիսիք են push ծանուցումները և ֆոնային համաժամացումը:
  • Մանիֆեստի ֆայլ — Ֆայլ, որը պարունակում է հավելվածի մետատվյալներ, ինչպիսիք են անունը, սկզբի URL-ը և հավելվածի պատկերակը: Դա JSON ֆայլ է, որը վերահսկում է հավելվածի տեսքը և համոզվում, որ դրանք կարող են ինդեքսավորվել որոնման համակարգերի կողմից:

Շենք PWA

Մենք կստեղծենք PWA React հավելվածի համար, այնպես որ մենք նախ կկարգավորենք React հավելվածը՝ օգտագործելով create-react-app: Արագ տեղադրման համար կարող եք ստեղծել React հավելվածը՝ օգտագործելով նախապես սահմանված ձևանմուշը, որը հասանելի է PWA. Նախապես սահմանված ձևանմուշ օգտագործելու հիմնական առավելությունն այն է, որ ավտոմատ կերպով կավելացվեն այնպիսի գործառույթներ, որոնք անհրաժեշտ են օֆլայն քեշավորումն օգտագործելու համար: PWA-ի համար անհրաժեշտ ֆայլերը, ինչպիսիք են manifest.json և service-worker.js-ը, ավտոմատ կավելացվեն: React հավելվածը ստեղծելու համար կատարեք հետևյալ հրամանը.

create-react-app your-app-name --template cra-template-pwa

Boilerplate հավելվածը տեղադրելուց հետո մենք կարող ենք ստուգել manifest.json ֆայլի բովանդակությունը public գրացուցակում:

manifest.json ֆայլում սահմանված յուրաքանչյուր հատկություն ունի նշանակալի նպատակ:

  • short_name — անուն, որը ցուցադրվում է, երբ հավելվածը տեղադրվում է աշխատասեղանի կամ բջջայինի վրա
  • անուն — հավելվածի իրական անվանումը
  • սրբապատկերներ — պարունակում է ֆավիկոններ և ցայտած էկրանի պատկերակներ
  • start_url — սահմանում է այն ուղին, որի վրա հասանելի կլինի «Ավելացնել» կոճակը

Դուք կարող եք կատարել հետևյալ հրամանը՝ արտադրական կառուցվածքը ստեղծելու համար.

npm run build

Երբ տեղադրեք այս կառուցումը տեղական սերվերի վրա և այցելեք էջը, «Տեղադրեք» կոճակը դեռ տեսանելի չի լինի: Դա պայմանավորված է նրանով, որ հավելվածը սահմանել է սպասարկող աշխատողներ, բայց նրանք գրանցված չեն լռելյայնորեն, այնպես որ դուք պետք է գրանցեք սպասարկման աշխատողներին: Դուք կարող եք գրանցել սպասարկման աշխատողին` օգտագործելով register() մեթոդը:

Ծառայողին գրանցելուց հետո դուք կարող եք նորից ստեղծել արտադրական կառուցվածքը և տեղադրել այն ցանկացած տեղական սերվերի վրա:

PWA-ները գործում են ապահով համատեքստերում և localhost URL-ներով, ուստի այս հավելվածը արտադրության մեջ ստուգելու համար կարող եք այն տեղադրել ցանկացած HTTPS-ով միացված հարթակներում, ինչպիսին է netlify::

Երբ սպասարկման աշխատողը հաջողությամբ ակտիվացվի, դուք կտեսնեք «Տեղադրել» կոճակը, երբ այցելեք էջ: Սեղմելով դրա վրա PWA-ն կտեղադրվի ձեր սարքի հիմնական էկրանին:

Երբ անցնեք ցանցից դուրս և նորից այցելեք էջը, հավելվածը կբեռնվի քեշավորված ռեսուրսներից՝ առանց ցանցի միացման որևէ սխալ տեսնելու:🚀

Ամբողջ աղբյուրի կոդը հասանելի է այստեղ:
Կենդանի ցուցադրություն՝ https://demo-react-pwa.netlify.app/

Հղումներ

Այս ամենը PWA-ի մարդկանց մասին է: Մեկնաբանություններում կիսվեք PWA ունենալու առավելություններով: Ուրախ կոդավորում:👩‍💻