PWA- ներ. Բարի գալուստ բջջային հեղափոխություն

Բովանդակություն

• PWA- ների վերելք
• PWA- ներն այսօր գործում են
• Տեղադրում
• Անցանց և անմիջապես գործարկում
• Առաջին կարգի փորձ
• Հավելվածների խանութներ
• Պլատֆորմների ինտեգրում
• Դիզայն և UX մարտահրավերներ
• PWA- ների տարի

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

• Ինչպես կառուցել առաջադեմ վեբ հավելված

Ակնհայտ է, որ սա որոշակի ընտրողական ճնշումներ է առաջ բերում: Նախ և առաջ, յուրաքանչյուր խորշի համար բնիկ ծրագրեր ստեղծելը պարտադիր չէ ռեսուրսների արդյունավետ օգտագործում. Օգտվողները հայտնվում են հարյուրավոր մեծ ծրագրերի միջոցով, որոնք վատնում են թողունակությունը և արժեքավոր սկավառակի տարածությունը, և ընկերությունները մեծ գումարներ են ծախսում ՝ ծրագրեր ստեղծելով միայն նրանց համար, որպեսզի դրանք լքվեն: դրանց առաջին վարկածներից հետո: Եվ այս ծրագրերի մեծ մասը պարզապես առաջնորդվում է վեբ բովանդակությամբ. Տեղեկատվություն, որը գալիս է վեբ ծառայություններից կամ բովանդակության կառավարման համակարգից:

Առաջադեմ վեբ հավելվածի սահմանումը հստակ չէ: PWA- ն պարզապես վեբ ծրագիր է, որն օգտագործում է մի քանի նոր API- ներ և կարողություններ համացանցային հարթակում `օգտագործելով առաջադեմ կատարելագործում` նույն կոդի բազայի յուրաքանչյուր հարթակում հավելվածի նման փորձ առաջարկելու համար: Դա ավելի շատ լավագույն փորձի և API- ի օգտագործման շարք է, որը ստեղծում է հիանալի հավելվածի նման փորձ ձեր օգտվողների համար, այնպես որ այնպես չէ, որ ունենաք կամ չունեք PWA: դա ավելի շատ նման է, որ ձեր կայքը քիչ թե շատ PWA է:

Դուք պատրաստվում եք սկսել նոր կայքի կառուցումը: Փորձեք օգտագործել կայք ստեղծող: Եվ համոզվեք, որ անհրաժեշտ աջակցություն եք ստանում նաև պատշաճ վեբ հոստինգի ծառայությունից: Կամ մի փոքր այլ բանի համար տե՛ս ամպի լավագույն պահեստի մեր ուղեցույցը:

PWA- ների վերելք

Չնայած PWA անունը ստեղծվել է 2015 թ.-ին Ալեքս Ռասելի կողմից Google- ում աշխատող Ալեքս Ռասելի կողմից Chrome- ի թիմի համար աշխատող Ալեքս Ռասելի «Փախչել ներդիրներից առանց մեր հոգին կորցնելու» հոդվածում, նրանց ճանապարհը փաստորեն այնտեղ չի սկսվել: Նախկինում մենք ունեինք HTML ationsրագրեր (HTA), որոնք ստեղծվել են Microsoft- ի կողմից 1999 թ.-ին, ինչպես նաև Nokia- ի, BlackBerry- ի և այլ ընկերությունների վեբ ծրագրերի շատ այլ ծրագրեր: Դրանից հետո ՝ 2007 թ.-ին, Սթիվ sոբսը ներկայացրեց այն ժամանակաշրջանում, որը սկզբնական iPhone- ի համար ծրագրեր ստեղծելու միակ միջոցն էր ՝ PWA- ներ, չնայած այլ անունով: Chrome- ը սկսեց այնտեղից, մի քանի տարի անց բարելավեց API- ներն ու հորինեց PWA անունը:

Նախկինում ձախողված այսքան շատ փորձեր ունենալով, որոնք փորձում են վեբ բովանդակություն բերել ծրագրերի աշխարհ, ինչու՞ ենք կարծում, որ այն հիմա կգործի: Հիմնականում դա կախված է այն ընկերություններից, որոնք այժմ աշխատում և խթանում են PWA- ների հիմքում ընկած տեխնոլոգիաները, ինչպիսիք են Microsoft- ը, Google- ը, Apple- ը և Mozilla- ն, նշելու համար միայն մի քանիսը: Բացի այդ, վեբ պլատֆորմի կատարումը հասավ մի կետի, երբ ընկալվող տարբերություն չկա, երբ լավ մշակված PWA- ն համեմատում ես հարազատ ծրագրի հետ: Այդ պայմանները նախկինում երբևէ գոյություն չեն ունեցել, և դա է պատճառը, որ վեբ համայնքը որոշել է, որ եկել է PWA- ների ժամանակը:

PWA- ներն այսօր գործում են

Այսօր PWA- ները լիովին գործունակ և տեղադրելի են հետևյալի վրա.

• Android ՝ զննարկիչների մեծամասնությամբ, Chrome- ն առաջարկում է լավագույն փորձը
• iOS Safari- ով
• Chromebook- ներ
• Windows 10 Microsoft Store- ից
• KaiOS- ի առանձնահատկությունները `Firefox OS- ի պատառաքաղ, որն այժմ հասանելի է հիմնականում Հնդկաստանում միլիոնավոր օգտվողների համար

Այս տարվա վերջին Chrome- ի միջոցով աջակցությունը գալիս է նաև macOS- ին, Windows- ին և Linux- ին: Այն այսօր հասանելի է որպես «Desktop PWA» փորձնական դրոշ, եթե ուզում եք այն հիմա փորձել: Windows- ի վրա Edge- ին առանց խանութի օգտագործման տեղադրումը նույնպես գալիս է ավելի ուշ, չնայած որևէ հստակ ժամկետ սահմանված չէ:

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

Բացի այդ, PWA- ները ներկայումս ստեղծվում են CLI- ների մեծամասնությունից `տարբեր շրջանակների համար, ներառյալ Angular 6+ CLI, React Create App, PWA Starter Kit Polymer- ից և Preact CLI: Վերջապես, Ionic Framework- ի թիմը եկավ Capacitor- ի `Cordova- ի բաց աղբյուրով փոխարինող գաղափարի գաղափարը, որը հնարավոր է դարձնում հայրենի PWA- ները յուրաքանչյուր հավելվածի խանութում:

Տեղադրում

PWA- ի կրիտիկական ասպեկտներից մեկը ծրագրի տեղադրումն է: Այս գործընթացը կատարվում է երկու կամընտիր քայլերով. Հավելվածի ֆայլերի ներբեռնում և անցանց պահում և OS- ում պատկերակների տեղադրում: Քանի որ երկու քայլերն էլ պարտադիր չեն, զննարկիչում կարող եք առաջարկել անցանց փորձ կամ կարող եք առաջարկել պատկերակ առանց անցանց տեղադրման: Բայց իսկական PWA- ն պետք է ներառի երկուսն էլ. Այն պետք է մատուցվի TLS- ի ներքո HTTPS- ի ներքո, և օգտագործողը կորոշի `դրանք կօգտագործի զննարկչում, թե՞ իր տեղադրած պատկերակի ներսում:

Անցանց և անմիջապես գործարկում

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

Սպասարկող աշխատող տեղադրելու համար ձեր HTML փաստաթուղթը պետք է ներառի հետևյալը.

if ('serviceWorker' նավիգատորում) navigator.serviceWorker.register ("sw.js");

Դա կտեղադրի «sw.js» ֆայլը օգտվողների սարքերի վրա ներկայիս տիրույթի ընթացիկ թղթապանակի համար. Հասկացություն, որը հայտնի է որպես շրջանակ: Այն տեղադրելուց հետո, դրա գործողության ցանկացած URL- ի հաջորդ այցելությունները կկառավարվեն այդ ծառայության աշխատողի կողմից:

Ասենք, որ մենք ունենք չորս PWA PWA ՝ index.html, app.js, app.css և logo.png: Առաջին բանը այն է, որ այդ ֆայլերը տեղադրենք sw.js ֆայլի քեշի մեջ:

const ռեսուրսներ = ["index.html", "app.js", "app.css", "logo.png"]; ես addEventListener ("տեղադրել", իրադարձություն => {իրադարձություն. սպասել մինչև (caches.open ("myPWAcache"): այնուհետև (cache => cache.addAll (ռեսուրսներ)));});

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

self.addEventListener ("վերցնել", e => e.respWith (caches.match (էլեկտրոնային հարցում). ապա (res => res);

Այս դեպքում, ամեն անգամ, երբ օգտվողը մուտք է գործում PWA (ինչպես զննարկիչից, այնպես էլ տեղադրված պատկերակից), շարժիչը ֆայլերը կստանա պահոցից: PWA- ի առավելությունն ընդդեմ բնիկ հավելվածների այն է, որ սարքերը կարիք չունեն նորից ներբեռնելու բոլոր ֆայլերը, երբ փոփոխություն է տեղի ունենում, միայն թափանցիկ գործընթացով փոխված ֆայլն է: Բացի այդ, մենք դեռ կարող ենք ներբեռնել հավելվածի մասերը ըստ պահանջի:

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

Տեղյակ եղեք, որ ձեր PWA- ի ֆայլերը կջնջվեն, եթե սարքի վրա պահպանման ճնշում կա, եթե չեք պահանջում Համառ պահեստ ՝ առկայության դեպքում.

if ('պահեստ' նավիգատորում && 'համառորեն' նավիգատորում. պահեստ) navigator.storage.persist ();

Chrome- ում և Android զննարկիչների մեծ մասում ձեր հավելվածն ի վիճակի չէ օգտագործել առկա տարածքի ավելի քան հինգ տոկոսը: iOS- ում դա 50MiB (մոտ 50 MB) է միայն մեկ հյուրընկալողի համար; Edge- ում դա փոփոխական է `ըստ հիշողության ընդհանուր չափի, իսկ Windows Store- ում` անսահմանափակ:

Առաջին կարգի փորձ

Մենք ունենք ուղեղ, և այժմ եկել է սրտի ժամանակը. Վեբ հավելվածը բացահայտվում է: Կայքը PWA- ի վերածելու նպատակը ոչ միայն ապահովելն է, որ այն հասանելի լինի արագ կամ անցանց, այլ նաև հնարավորություն ընձեռի ունենալ իր սեփական պատկերակը ՕՀ-ում և առաջարկել ինքնուրույն փորձ, ինչպես ցանկացած այլ տեղադրված ծրագիր:

Մանիֆեստը JSON ֆայլ է, որը սահմանում է մետատվյալները զննարկչի կամ հավելվածների խանութի կողմից օգտագործվող PWA- ի համար ՝ տեղադրման վարքագիծը սահմանելու համար:

Ֆայլը սահմանում է մի քանի հատկություններ որպես մետատվյալներ ձեր PWA- ի համար: Յուրաքանչյուր օպերացիոն համակարգ կկարդա այս հատկությունները և կփորձի հնարավորինս համապատասխանել ձեր նախընտրած փորձին: Օրինակ, Android- ը կկարդա «էկրան ՝ ինքնուրույն» և կստեղծի հավելվածների սովորական փորձ: «Դիսփլեյով. Minimal-ui» ՝ դա կստեղծի տեսանելի URL- ի և TLS սերտիֆիկատի փորձ ՝ օգտակար անվտանգության համար զգայուն ծրագրերի համար: «Displayուցասարքով. Լրիվ էկրանով» այն ստեղծում է լիովին սուզվող ծրագրեր ՝ առանց կարգավիճակի տողի կամ հետ տեսանելի կոճակի: Սրբապատկերների և գույների մի շարք սահմանում է, թե ինչպես են թափթփված էկրանները կամ վերնագրի տողերը փնտրելու ձեր ծրագրի պատուհանը:

Կան մի քանի մանիֆեստ գեներատորներ, ինչպիսիք են Web App Manifest Generator կամ PWA Builder, որոնք նաև կփոխեն պատկերակը ձեզ համար տարբեր լուծումներով, եթե տրամադրեք բարձր բանաձևով մեկ (նվազագույնը 512 պիքսել):

Երբ ձեր HTML փաստաթղթում կցված լինի մանիֆեստի ֆայլը, օգտվողները կկարողանան տեղադրել ծրագիրը ՝ օգտագործելով զանազան դիտարկիչներից տարբեր մեթոդներ, որոնք սովորաբար կոչվում են Ավելացնել հիմնական էկրանին, Տեղադրել կամ պարզապես ավելացնել: Եթե ​​ձեր PWA- ն տեսանելի է Bing- ի կողմից, Microsoft- ը ավտոմատ կերպով այն կավելացնի Microsoft Store- ում, որպեսզի Windows 10-ի օգտվողները կարողանան այն տեղադրել այնտեղից:

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

Եթե ​​դուք ընդունեք PWA- ի պահանջները, որոնք մենք սահմանում ենք այստեղ, որոշ պլատֆորմներ կառաջարկեն շրջապատող տարբերանշան (փոքր պատկերակ, սովորաբար URL- ի գոտում, նշելով, որ ոստայնը տեղադրելի է) կամ վեբ ծրագրի դրոշ: Եթե ​​նախընտրում եք, կարող եք նաև ավելացնել ձեր սեփական պատվերով Տեղադրելու կոճակը ՝ օգտագործելով հետևյալ հատվածը.

windows.addEventListener ("beforeinstallpr ompt", գործառույթ (e) {e.prompt (); // ցույց կտա տեղադրման մայր տող})

Եթե ​​PWA- ն տեղադրված է, «ապատեղադրված» իրադարձությունը գործարկվելու է պատուհանի օբյեկտի վրա, որպեսզի կարողանաք հետևել դրա համար լսվող վիճակագրությանը:

Հավելվածների խանութներ

Aննարկիչից տեղադրելու հիմնական առավելություններից մեկը `խանութ-սրահի հաստատման գործընթացից խուսափելը կամ հրատարակիչ լինելու համար վճարելն է: Դա գալիս է ակնհայտ առավելություններով, ինչպիսիք են ակնթարթային հրապարակումը, ընկերությունների համար մասնավոր ծրագրերի ստեղծումը կամ հավելվածները, որոնք չպետք է ընդունվեն խանութներում:

Բայց որոշ ընկերություններ ցանկանում են խանութում լինել: Այսօրվա դրությամբ միակ խանութները, որոնք պաշտոնապես ընդունում են PWA, Windows Store- ն ու kaiOS Store- ն են: Բարեբախտաբար, Capacitor- ի (ներկայումս Alpha- ում) կամ PWA Builder- ի նման գործիքների միջոցով մենք կարող ենք ստեղծել և ստորագրել հարազատ փաթեթներ նաև այլ հարթակների համար:

Google Play Store- ում արդեն հրապարակված են որոշ PWA- ներ, ինչպիսիք են Twitter Lite- ը և Google Maps Go- ն, որոնք ներկայումս իրականացվում են հատուկ կատարման ներքո: Chrome- ը լուծում կառաջարկի Chrome 68-ից ՝ վստահելի վեբ գործունեության միջոցով: Այդ պահից մենք կկարողանանք ստեղծել Android փաթեթ (APK) գործարկիչով մեր PWA- ում և վերբեռնել այն խանութում: Windows 10-ի Microsoft Store- ի համար PWA Builder կայքը ներկայումս օգնում է APPX Windows 10 փաթեթի ստեղծմանը: Օգտագործելով վեբ տեսք, դուք միգուցե կկարողանաք ձեռքով ստեղծել iOS ծրագիր App Store- ի համար, բայց չափազանց զգույշ լինել խանութի կանոնների նկատմամբ:

Պլատֆորմների ինտեգրում

Իրականացնելով առաջադեմ բարելավման տեխնիկա ՝ դուք կկարողանաք օգտագործել բազմաթիվ գործառույթներ, ներառյալ ՝ push ծանուցումները, տեսախցիկի և խոսափողի հասանելիությունը, աշխարհագրական դիրքը, տվիչները, վճարումները, բաժնետոմսերի երկխոսությունները և անցանց պահեստը: Այս բոլոր հատկությունները գործում են ուղղակիորեն զննարկչի անվտանգության մոդելի մեջ, ներառյալ թույլտվության երկխոսությունները:

Մենք կարող ենք նաև շփվել այլ ծրագրերի հետ URI սխեմաների միջոցով, ինչպիսիք են Twitter- ի, YouTube- ի կամ WhatsApp- ի բացումը իրենց URL- ների կամ անհատական ​​URI- ների միջոցով, ինչպիսիք են whatsapp: //:

Վերջապես, ստեղծելով հայրենի PWA- ներ, որոնք տպագրվում են խանութում ՝ Կոնդենսատորի կամ Microsoft Store- ի միջոցով, մենք կկարողանանք կամրջել հարազատ API- ներին, որոնք մեզ հնարավորություն կտան գործնականում իրականացնել ցանկացած բնածին կոդ: Windows 10-ի հետ այդ ինտեգրումը ներառում է ապարատային հասանելիություն, բայց նաև ինտեգրում OS- ի հետ, առաջարկելով այնպիսի ընտրանքներ, ինչպիսիք են Pin to Start- ը: Օրինակ, Twitter PWA- ն թույլ է տալիս ցանկացած օգտվողին կապել ձեր մեկնարկի էկրանին:

Դիզայն և UX մարտահրավերներ

PWA- ների ձևավորումը եզակի մարտահրավերներ ունի, ուստի կարևոր է որոշ ժամանակ հատկացնել հետազոտությանը, որքան հնարավոր է փորձարկել և հաշվի առնել հետևյալը.

• Օգտագործողները կսպասեն հավելվածի նման փորձեր:
• Տեղադրման գործընթացը դեռ նոր է, ուստի մենք պետք է լրացուցիչ ջանք գործադրենք `բացատրելու համար, թե ինչպես տեղադրել ծրագիրը:
• Theրագիրը ֆոնային ռեժիմում առանց օգտվողների փոխազդեցության թարմացնելը հիանալի է, բայց նաև որոշ մարտահրավերներ է ավելացնում UX- ի համար:
• Սեղանի վրա պատասխանատու վեբ ձևավորումը նոր սահման է բերում, քանի որ PWA պատուհանները կարող են փոքր լինել, շատ ավելի փոքր, քան բջջային տեսադաշտից: Սա նշանակում է, որ մենք պետք է ստեղծենք հատուկ դիտումներ կամ փոքր վիդջեթներ այս ձևաչափի համար, ինչպես այսօր տեսնում ենք Chrome OS- ում:
• Հրում ծանուցումները պետք է արժեք ավելացնեն միայն օգտագործողին, այնպես որ սովորեք ճիշտ պահին հարցնել և չկորցնել օգտակար կամ հետաքրքիր հաղորդագրություններ ուղարկելու հնարավորությունը:
• Մենք պետք է նախագծենք վեբ աշխատանքի և անցանց հասանելիության համար:

PWA- ների տարի

Այս տարի iOS- ի և աշխատասեղանի հավելումով PWA- ն այսօր ամենուր է: Բայց մենք պետք է հիշենք, որ նրանց ճանապարհը նոր է սկսվում, ուստի սպասեք հաճախակի փոփոխությունների և համոզվեք, որ ձեզ թարմացնեք նորագույն տեխնիկայի և գաղափարների հետ ՝ օգտագործողի գերազանց փորձը հաղորդելիս, մինչ հարթակը զարգանում է:

Այս հոդվածն ի սկզբանե տպագրվել է 308-րդ համարում ցանցաշխարհի վեբ դիզայներների և մշակողների համար ամենալավ վաճառվող ամսագիրը: Գնեք 308 համարը այստեղ կամ բաժանորդագրվել այստեղ.