PWA un vietējās lietotnes: kuras jums vajadzētu izvēlēties?

Kura pieeja jums jāizmanto, veidojot lietotni? Vai jums vajadzētu izvēlēties PWA / tīmekļa tehnoloģiju maršrutu, vai arī jums vajadzētu sākt lietot vietni un izstrādāt konkrētas platformas? Abām iespējām ir savi plusi un mīnusi, un šajā rakstā mēs koncentrējamies uz dažām populārākajām izvēlēm, kas tiek izmantotas, lai izveidotu tīmekļa un vietējās lietotnes.

PWA (Progressive Web Apps) jeb tīmekļa lietotnes ir veidotas ar populārām tīmekļa tehnoloģijām HTML, CSS un JavaScript un darbojas tīmekļa pārlūkprogrammā. (Pārbaudiet dažus būtiskos HTML tagi lai palīdzētu jums veidot.) PWA ir efektīvas vietnes mobilajām ierīcēm, kas veidotas tā, lai tās izskatītos pēc lietotnes, un tīmekļa API izmantošana tām nodrošina līdzīgu funkcionalitāti kā vietējai lietotnei.

Lai iegūtu vairāk padomu par lietotņu veidošanu, skatiet mūsu ziņu vietnē kā izveidot lietotni vai, ja tā ir vietne, kuru vēlaties izveidot, skatiet šīs augšdaļas vietņu veidotāji un tīmekļa mitināšana pakalpojumus.



PWA un vietējās lietotnes: kāda ir atšķirība?

Progresīvo tīmekļa lietotņu priekšrocība ir tā, ka tās var instalēt un darboties ierīcē bez lietotņu veikala. Procesa daļa ir Web App Manifest, kas ļauj izstrādātājiem kontrolēt lietotnes parādīšanos un palaišanu. Arī tīmekļa dizaineriem / priekšējo izstrādātāju rīcībā jau būs prasmes, kas nepieciešamas, lai nekavējoties sāktu veidot. Atšķirībā no vietējām lietotnēm nav jāapgūst jauna valoda.

Vietējās lietotnes tiek veidotas, domājot par konkrētu OS - ti. iOS un Android - un šī mērķa sasniegšanai izmantojiet ietvaru vai valodu. iOS lietojumprogrammās parasti tiek izmantota Xcode vai Swift, kā arī Android lietotnes, JavaScript. Šajā rakstā mēs koncentrējamies uz pāris uz JavaScript balstītām atvērtā koda sistēmām - React Native un NativeScript -, kas darbojas abās platformās.

Vietējo lietotņu priekšrocības ir tādas, ka tās parasti nodrošina labāku funkcionalitāti, jo labāk izmanto ierīču aparatūru un programmatūru, ir ātrākas un atsaucīgākas, un jūs saņemat kvalitātes nodrošinājumu, lai gan vērtējumi lietotņu veikalos. Bet tas nozīmēs, ka jāiemācās izmantot noteiktu sistēmu vai bibliotēku.

Šeit mēs aplūkojam trīs dažādas iespējas - vienu tīmeklim (PWA) un divas vietējām (React Native, NativeScript) - lietotnes izveidošanai. Mēs pārdomājam, kā viņi darbojas, ko viņi var darīt, un aplūkojam viņu stiprās un vājās puses, lai palīdzētu jums izlemt, kuru iespēju izvēlēties, lai izveidotu savu lietotni.

Progresīvās tīmekļa lietotnes: veidošana tīmeklim

PWA v dzimtā

PWA izmanto tīmekļa kaudzīti - HTML, CSS un JS(Attēlu kredīts: Google)

PWA stiprās puses

  • Lietotnes darbojas arī pārlūkprogrammā
  • Izplatīšana: pārlūkprogramma, uzņēmuma un lietotņu veikali
  • Var izmantot React, Angular, Vue, vanilla vai citus ietvarus

PWA trūkumi

  • Nav piekļuves katram vietējam API
  • Iespējas un veikalu izplatīšana iOS un iPadOS ir ierobežota
  • Tas notiek nepārtraukti

PWA ir pašreizējais dizaina modelis, lai izveidotu augstas veiktspējas, bezsaistē instalējamas lietotnes, izmantojot tikai tīmekļa kaudzi: HTML, CSS, JavaScript un pārlūkprogrammu API. Pateicoties apkalpojošajam darbiniekam un tīmekļa lietotņu manifesta specifikācijām, pēc instalēšanas operētājsistēmām Android, iOS, iPadOS, Windows, macOS, Chrome OS un Linux tagad mēs varam izveidot pirmās klases lietotņu pieredzi.

Lai izveidotu PWA, varat izmantot jebkuru arhitektūru: no servera puses, vaniļas JavaScript, React, Vue, Angular vai citiem klienta puses ietvariem. Tā var būt vienas lapas lietojumprogramma vai vairāku lapu tīmekļa lietojumprogramma, un mēs definējam, kā mēs atbalstīsim lietotājus bezsaistē.

Šajā pieejā mums nav jāiesaiņo un jāparaksta mūsu lietotnes resursi: mēs vienkārši ievietojam failus tīmekļa serverī, un servisa darbinieks būs atbildīgs par failu kešatmiņu klientā un pēc instalēšanas tos apkalpos. Tas nozīmē arī, ka, ja lietotne ir jāatjaunina, jūs vienkārši maināt failus serverī, un apkalpojošā darbinieka loģika būs atbildīga par to atjaunināšanu lietotāju ierīcēs bez lietotāja vai lietotņu veikala iejaukšanās.

Izplatīšanas ziņā visizplatītākā metode ir pārlūks. Lietotāji instalē lietotni no pārlūkprogrammas, izmantojot izvēlnes vienumu Pievienot sākuma ekrānam vai Instalēt, pieņemot uzaicinājumu instalēt vai izmantojot pielāgotu tīmekļa lietotnes lietotāja saskarni saderīgās platformās. Ir vērts atzīmēt, ka Apple noraida App Store publicētos tīros PWA un mudina tīmekļa izstrādātājus tos izplatīt, izmantojot Safari.

kā izveidot kontaktu lapu Photoshop cs5

Lietotāja saskarni tīri pārvalda tīmekļa izpildlaiks, kas nozīmē, ka tīmekļa dizains ir atbildīgs par katras vadības atveidošanu ekrānā. Ja izmantojat lietotāja saskarnes ietvaru, piemēram, Ionic, vai Material Design bibliotēku, HTML un CSS atdarinās vietējās saskarnes Android vai iOS ierīcēs, taču tas nav obligāti. Veicot PWA, tīmekļa veiktspējas metožu izmantošana ir obligāta, lai saglabātu labu lietotāja pieredzi.

Runājot par spējām, PWA būs piekļuve tikai API, kas šajā platformā ir pieejami pārlūkprogrammas motorā, un to nevar paplašināt ar vietējo kodu, izņemot lietotņu veikala PWA izplatījumus. Šajā jautājumā iOS un iPadOS ir ierobežotākas platformas PWA, savukārt Chrome (Android un darbvirsmas OS) ir lielāka pieejamība, un viņš cītīgi strādā, lai pievienotu visu iespējamo API JavaScript ar Fugu projektu.

React Native

Vietējās lietotnes - React Native

Facebook React Native ir balstīts uz JavaScript un ir līdzīgs React.js(Attēlu kredīts: facebook)

React Native stiprās puses

  • Tādi paši modeļi kā ar React.js
  • Dažas tīmekļa API ir pakļautas
  • Tīmekļa un darbvirsmas atbalsts

React Native vājās puses

  • Nevar atkārtoti izmantot tīmekļa lietotāja saskarnes komponentus
  • Vietējam tiltam ir vajadzīgs zināms darbs
  • Ir nepieciešama reakcijas pieredze

React Native ir atvērtā koda JavaScript balstīta komponentu ietvars, kuru sponsorē Facebook, un kurā tiek izmantoti React dizaina modeļi, kā arī JavaScript valoda, lai no viena avota koda apkopotu vietējās lietotnes iOS, iPadOS un Android.

Bet renderēšanai netiek pieņemti HTML elementi; derīgi ir tikai citi vietējie komponenti. Tāpēc tā vietā, lai renderētu a ar

un a ar JSX, jūs renderēsit a ar un a . Stila komponentiem jūs joprojām izmantojat CSS, un izkārtojums tiek noteikts, izmantojot Flexbox.

Lietotāja saskarne netiks renderēta pārlūkprogrammas DOM, bet izmantojot vietējās lietotāja saskarnes bibliotēkas Android un iOS ierīcēs. Tāpēc a kļūs par UIButton instanci iOS un android.widget.Button klase Android; React Native nav iesaistīts tīmekļa izpildlaiks.

Tomēr viss JavaScript kods tiks izpildīts JavaScript virtuālajā mašīnā ierīcē, tāpēc, sastādot lietotni, nav JavaScript reālai vietējā koda pārveidošanai. Tīmekļa izstrādātājiem ir pieejams plaši pazīstamu API kopums, piemēram, Fetch API, WebSockets un pārlūka taimeri: setInterval un requestAnimationFrame. Citas spējas tiek izvietotas platformā, izmantojot pielāgotus API, piemēram, animācijas.

Jūs varat sākt ātru React Native projektu ar diviem bezmaksas CLI: Expo vai uzlabotas un oficiālākas ReactNative CLI. Ja izmantojat oficiālo CLI, jums ir nepieciešama arī Android Studio, lai apkopotu un pārbaudītu Android lietotni un Xcode, lai to izdarītu arī iOS un iPadOS, tāpēc šai platformai būs nepieciešams MacOS dators.

React Native apkopo vietējās lietotnes iOS un Android, kas nozīmē, ka jūsu lietotnes izplatīšana notiks saskaņā ar tiem pašiem noteikumiem kā citas vietējās lietotnes: publisko lietotņu lietotņu veikali, uzņēmumu izplatīšana un alfa / beta testēšana. Parasti lietotni nevar izplatīt, izmantojot pārlūkprogrammu Reaģējiet vietējā tīmeklī un Microsoft React Native priekš Windows platformas var palīdzēt.

NativeScript

Vietējās lietotnes - NativeScript

NativeScript ietvars darbojas ar Angular, VueJS un vaniļas JavaScript(Attēlu kredīts: NativeScript)

NativeScript stiprās puses

  • Labi kodēšanas un testēšanas rīki
  • Plaša lietotņu galerija, kas ir gatava spēlēšanai
  • Visas Android un iOS API ir pakļautas JS

NativeScript vājās puses

  • Maza kopiena
  • Nevar atkārtoti izmantot tīmekļa lietotāja saskarnes komponentus
  • Nav tīmekļa, darbvirsmas vai React atbalsta

NativeScript nav tik labi pazīstams kā React Native, taču tas konkurē tajā pašā jomā: vietējās iOS un Android lietotnes no JavaScript un tīmekļa ietvariem. Tas ļauj izmantot vietējās lietotnes JavaScript vai TypeScript un XML lietotāja saskarnes failu. Tas arī atbalsta Angular un Vue uzreiz no kastes, tāpēc tas ir lielisks risinājums izstrādātājiem, kuri ir pieraduši pie šiem ietvariem.

NativeScript priekšrocības ir skaidrākas, ja izmantojat Angular vai Vue. Vietnē Angular jūs izveidojat tos pašus komponentus, pie kuriem esat pieradis, bet veidnei izmantojat XML, nevis HTML, ieskaitot visus datu sasaistes. XML vietā a ar

un an , jūs ievietosiet a ar un an komponents.

CSS un Sass tiek atbalstīti ar līdzīgiem stiliem kā pārlūkprogrammas CSS. Maršrutēšana un tīkla pārvaldība tiek veikta, ieviešot standarta leņķa pakalpojumus. Vue tas ir kaut kas līdzīgs; jūs rakstāt veidni XML, nevis izmantojat HTML tajā pašā elements jūsu .vue failā.

NativeScript ietver komponentu kolekciju, kas pēc tam tiek kartēta ar Android vai iOS vietējo vadīklu, tāpēc, renderējot sarakstu vai atlasītāju, tā būs vietējā lietotne, izmantojot to pašu ideju kā React Native.

Jūsu JavaScript vai TypeScript kods (transilēts) tiek izpildīts ierīcē esošajā JavaScript virtuālajā mašīnā ar tiltu uz / no vietējās vides. Šajā tiltā tiek pakļauti visi vietējie API no Android vai iOS / iPadOS, tāpēc, neskatoties uz piekļuvi starpplatformu API, mēs varam uzreiz saukt vai izsaukt jebkuru Java vai Objective-C kodu no JavaScript / TypeScript un NativeScript izveidos datu tipus.

NativeScript nodrošina lielisku rīku atbalstu, tostarp VS koda spraudņus, CLI, karstās ielādes testēšanas sistēmu un NativeScript rotaļu laukuma lietotni, tāpēc testēšanas laikā nav jāinstalē visas atkarības, kā arī vairāki papildu pakalpojumi, piemēram, tiešsaistes rotaļu laukums .

Visbeidzot, NativeScript apkopo Android un iOS lietotni, kuru var instalēt no oficiālajiem izplatīšanas kanāliem un lietotņu veikaliem, ja ievērojat to noteikumus, uzņēmuma izplatīšanu un alfa / beta testēšanu. Parasti nebūs iespējas izplatīt lietotnes no pārlūkprogrammas, un šai platformai nav risinājumu darbvirsmas lietotnēm.

Šis raksts sākotnēji tika publicēts 325. izdevums no net, pasaules vislabāk pārdotais žurnāls tīmekļa dizaineriem un izstrādātājiem. Pērciet 325. izdevums vai abonēt tīklā.

Ģenerēt skaļruņus x 4

Uzziniet, kā izveidot labāku JavaScript vietnē GenerateJS(Attēlu kredīts: nākotne)

Pievienojieties mums 2020. gada aprīlī, izmantojot mūsu JavaScript superzvaigžņu sastāvu GenerateJS - konferencē, kas palīdzēs jums izveidot labāku JavaScript. Rezervējiet tagad vietnē generateconf.com

Lasīt vairāk: