Mulți dintre noi. care lucrează pe Web, încearcă în mod activ să reducă decalajul dintre aplicațiile native și cele web.
Dar care este diferența? Cu doar câțiva ani în urmă, acest decalaj a fost, într-o mai mare măsură, tehnologic. Dacă doriți să accesați un dispozitiv GPS, a trebuit să scrieți o aplicație nativă. Acum, situația sa îmbunătățit într-o oarecare măsură: acum putem accesa senzorii dispozitivului, cum ar fi GPS-ul. orientarea camerei și a dispozitivului - deși există încă un drum lung de parcurs. Datorită ultimelor progrese în tehnologiile web, avem acum o platformă care poate concura cu aplicații native aproape pe o bază egală.
Astăzi, diferența dintre aplicațiile native și cele web nu este atât de tehnologică - este vorba despre confortul utilizatorilor: preferă să instaleze aplicații care trăiesc confortabil pe ecranul de pornire (sau chiar pe desktop, dacă este vorba de browsere desktop).
Ce este o "instalare"?
De fapt, "instalarea" unei aplicații web adaugă un "marcaj" la ecranul de start sau la lansatorul de aplicații. Există câteva lucruri destul de evidente pe care tu, în calitate de dezvoltatori, le oferiți browserului, astfel încât site-ul să poată fi considerat o aplicație: nume, icoane etc. Există mai multe funcții avansate de care aveți nevoie, de exemplu, capacitatea de a specifica orientarea preferată a dispozitivului și dacă aveți nevoie de un mod pe ecran complet.
Specificația manifestului vă oferă modalitatea standard de a face acest lucru utilizând un fișier JSON. Consultați simplu fișierul manifest în pagina HTML după cum urmează:
Dar ce este în acest dosar misterios? Este bine că ați cerut!
Un manifest foarte simplu
Cel mai simplu manifest poate consta doar dintr-un singur nume și din una sau mai multe icoane.
Un manifest tipic
Numele aplicației
Aplicația are nevoie de un nume real sau de un set de nume (care de obicei nu coincid cu conținutul elementului
Document). Pentru a face acest lucru, utilizați numele cheilor și short_name.</p>
<p>Dacă omiteți numele, atunci browserul poate utiliza <meta name="application-name"> sau element <title> .</p>
<p>Dar aveți grijă: unele browsere pot solicita să specificați un nume - în caz contrar, aplicația dvs. poate pierde starea unei "aplicații web progresive".</p>
<p>În locul pictogramei obișnuite a browserului, aplicația web trebuie să aibă o pictogramă care va fi asociată cu aceasta. Pentru aceasta, manifestul conține pictogramele-cheie. Este nevoie de o listă de icoane, dimensiunile și formatele acestora. Acest lucru face ca procesul de selectare a icoanelor să fie foarte eficient, deoarece icoanele au o soluție adaptivă care evită sarcini inutile și ajută icoanele să pară întotdeauna excelent pe o gamă largă de dispozitive și rezoluții ale ecranului.</p>
<p>Dacă nu specificați pictograme, browserul va căuta opțiuni alternative: <link rel="icon">. favicon.ico sau, dacă nu le găsiți, puteți folosi chiar și o captură de ecran a site-ului dvs.</p>
<h3>Alocarea unei pictograme</h3>
<p>Mai multe detalii despre atribuirea icoanelor pot fi găsite în specificația Manifestului aplicației Web.</p>
<h3>Moduri de afișare și orientare</h3>
<p>Aplicațiile la pornire ar trebui să poată controla afișarea acestora pe ecran. Dacă acesta este un joc, probabil că acesta trebuie să fie pe tot ecranul și într-o orientare orizontală. Pentru aceasta, formatul manifest vă oferă două chei.</p><br>
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8686842323494376"
data-ad-slot="9763162049"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8686842323494376"
data-ad-slot="2447347631"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<br><p>Modurile de afișare disponibile sunt:</p>
<ul>
<li>Fullscreen pe întreg ecranul ocupă întreg ecranul.</li>
<li>Standalone standalone deschide aplicația cu o bară de stare.</li>
<li>Minimal minimal-ui. Când aplicația este afișată în modul ecran complet, ca în iOS. dar unele acțiuni pot cauza bara de navigare și apariția butoanelor înainte și înapoi.</li>
<li>Browserul browserului deschide aplicația cu un set standard de butoane și o bară de instrumente.</li>
</ul>
<p>În plus, această indicație de orientare este că acționează ca "orientare implicită" pentru întreaga aplicație. Prin urmare, când vă mutați dintr-o pagină în alta, aplicația rămâne în poziția corectă. Puteți schimba orientarea implicită utilizând API pentru orientarea ecranului.</p>
<p>De asemenea, puteți aplica alte stiluri pentru aplicație într-un anumit mod utilizând proprietatea modului afișare:</p>
<p>Uneori, când porniți aplicația, aveți nevoie ca utilizatorul să ajungă întotdeauna la o anumită pagină. Comutatorul start_url vă permite să specificați acest lucru.</p>
<h3>Aplicația "Zonă"</h3>
<p>Aplicațiile native au limite clare: în calitate de utilizator, sunteți sigur că atunci când deschideți o aplicație nativă, acesta nu deschide brusc un alt neobservat pentru tine. Cel mai adesea, vă este foarte clar că ați trecut de la o aplicație nativă la alta. De obicei, aceste solicitări vizuale sunt furnizate de sistemul de operare (de exemplu, apelând managerul de activități și selectând o altă aplicație sau apăsând pe Cmd Tab sau pe Alt Tab de pe computer).</p>
<p>Internetul este diferit: este un sistem hipertext vast în care o aplicație web poate rula mai multe domenii: puteți trece cu ușurință de la gmail.com la docs.google.com, iar utilizatorul nu o va observa nici măcar. În practică, ideea existenței limitelor de aplicare este absolut străină de web. La urma urmei, în realitate, o aplicație web este doar o serie de documente HTML (imaginați-vă o "serie de țevi" ... m-m, nu, uitați-o!).</p>
<p>Pe Internet, știm că părăsim zona unei aplicații și mergem la o altă aplicație, numai datorită designerilor web care au fost suficient de buni pentru a le face un design distinctiv unic. În cazurile în care acest lucru nu este cazul, mulți utilizatori sunt înșelați de site-uri care se mulează ca alții (phishing bun vechi).</p>
<h3>Internaționalizare: lang și dir</h3>
<h3>Distribuiți aplicația</h3>
<p>Este necesar să scrieți cu detalii și capturi de ecran.</p>
<h3>Culoarea temei și culoarea de fundal</h3>
<h3>Cum pot determina dacă utilizatorul a "instalat" aplicația?</h3>
<p>Specificația vă permite să determinați când un utilizator instalează o aplicație prin logarea unui eveniment appinstalled.</p>
<p>Cu toate acestea, din motive de confidențialitate, nu puteți detecta direct dacă aplicația dvs. este instalată - numai pentru a afla că aplicația web a aplicației utilizează un fișier manifest.</p>
<h3>Ce e în neregulă cu etichetele <meta>?</h3>
<p>În timpul dezbaterii caietului de sarcini, au existat discuții pline de viață despre utilizarea etichetelor <meta> în HTML, în loc să creați un format nou. La urma urmei, funcția "adăugați la ecranul de pornire" din Chrome utilizează etichete <meta>. și încă din primele zile ale Internetului, aceste etichete erau o casă pentru orice nonsens non-standard.</p>
<p>Motivele pentru utilizarea unui fișier separat:</p>
<ul>
<li>acest lucru salvează o grămadă de informații în antetul documentului atunci când se încarcă fiecare pagină a aplicației sau site-ului instalat;</li>
<li>după descărcare, fișierul rămâne în cache-ul HTTP al browserului.</li>
</ul>
<p>Specificația conține informații mai detaliate despre motivul pentru care am ales JSON în locul tagurilor HTML.</p>
<h3>Cine o implementează?</h3>
<p>Aplicațiile web manifestate și avansate sunt implementate în Chrome. Opera și Samsung Internet pentru Android. Firefox oferă, de asemenea, semnale încurajatoare că va sprijini aceste standarde (implementări în Gecko pentru mai mult de doi ani, dar nu sunt utilizate în niciunul dintre produsele).</p>
<h3>Interacțiunea cu roboții de căutare</h3>
<p>Ca și alte resurse web, manifestul aplicației web trebuie să fie accesibil oricărui browser sau crawler web.</p>
<p>Dacă dezvoltatorul aplicației web dorește să notifice roboții de căutare despre interdicția de scanare a unui fișier, el poate face acest lucru prin includerea manifestului aplicației web în fișierul robots.txt. Acest lucru este descris mai detaliat în protocolul robots.txt. Dezvoltatorul de aplicații web poate folosi și antetul HTTP X-Robots-Tag.</p>
<p>Traducerea unei note explicative la specificația Manifestului aplicației Web. TraducereAnna Kukhareva și Vadim Makeyev, redacția lui Vadim Makeyev.</p>
<br>
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8686842323494376"
data-ad-slot="8576168847"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-8686842323494376"
data-ad-slot="9162386769"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<br><h4>Articole similare</h4>
<ul>
<li>
<p><a href="/utilizator-173/aplicatie-manifest-web-mdn.html">Aplicație manifest web, mdn</a></p>
</li>
<li>
<p><a href="/utilizator-173/familiar-cu-manifestul-aplicatiei.html">Familiar cu manifestul aplicației</a></p>
</li>
<li>
<p><a href="/utilizator-173/crearea-unei-noi-biserici.html">Crearea unei noi biserici</a></p>
</li>
</ul>
<div class="vnizine"><p style="text-align: left;"><a href="/utilizator-173/creati-o-fereastra-modala-simpla-folosind-jquery.html">Pagina anterioară</a></p><p style="text-align: right;"><a href="/utilizator-173/machiaj-cu-o-ceata-un-aspect-invelit-intr-o-ceata.html">Pagina următoare</a></p>
</div>
<h3>Trimiteți-le prietenilor:</h3>
<p>
<script type="text/javascript">(function(w,doc) {
if (!w.__utlWdgt ) {
w.__utlWdgt = true;
var d = doc, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})(window,document);
</script>
<div data-mobile-view="true" data-share-size="40" data-like-text-enable="false" data-background-alpha="0.0" data-pid="1771468" data-mode="share" data-background-color="#ffffff" data-share-shape="round-rectangle" data-share-counter-size="12" data-icon-color="#ffffff" data-mobile-sn-ids="fb.tw.wh.vb.ps.gp." data-text-color="#000000" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-type="disable" data-orientation="horizontal" data-following-enable="false" data-sn-ids="fb.tw.ps.gp.ms.bl.gt." data-preview-mobile="false" data-selection-enable="false" data-exclude-show-more="true" data-share-style="1" data-counter-background-alpha="1.0" data-top-button="true" class="uptolike-buttons" ></div>
</p>
</article>
</div>
</div>
</div>
</div><footer class="akatita-footer clearfix">
<div class="akatita-content-layout layout-item-0">
<div class="akatita-content-layout-row">
<div class="akatita-layout-cell layout-item-1" style="width: 20%">
<p style="font-size: 18px; font-family: 'Times New Roman';">Articole aleatoare</p>
<br>
<ul>
<li><a href="/utilizator-134/algoritm-pentru-dezvoltarea-site-ului-studopedia.html">Algoritm pentru dezvoltarea site-ului - studopedia</a></li>
<li><a href="/utilizator-211/sediul-streltsovo-districtul-vyborgsky-regiunea.html">Sediul Streltsovo, districtul Vyborgsky, regiunea Leningrad, Rusia</a></li>
<li><a href="/utilizator-191/regulile-de-utilizare-a-articolului-in-denumirile.html">Regulile de utilizare a articolului în denumirile geografice</a></li>
<li><a href="/utilizator-161/cine-este-munca-rapida-si-cum-sa-o-atrageti-pe.html">Cine este munca rapidă și cum să o atrageți pe site - SEO, optimizare, promovarea site-ului</a></li>
<li><a href="/utilizator-122/killer-de-contract1.html">Killer de contract1</a></li>
</ul>
</div><div class="akatita-layout-cell layout-item-1" style="width: 20%">
<p style="font-size: 18px; font-family: 'Times New Roman';">locație</p>
<br>
<ul>
<li><a href="/locul-pe-harta.html">Suntem pe hartă</a></li>
<li><a href="/adresa.html">Adresa</a></li>
</ul>
<ol>
<li><a href="/sitemap/sitemap20.html">sitemap</a></li>
<li><a href="/sitemap/sitemap448.html">sitemap</a></li>
<li><a href="/sitemap/sitemap672.html">sitemap</a></li>
<li><a href="/sitemap/sitemap862.html">sitemap</a></li>
<li><a href="/sitemap/sitemap886.html">sitemap</a></li>
</ol>
</div><div class="akatita-layout-cell layout-item-1" style="width: 20%">
<p style="font-size: 18px; font-family: 'Times New Roman';">Mai multe despre noi</p>
<br>
<ul>
<li><a href="/contactati-ne.html">Contactați-ne</a></li>
<li><a href="/despre-site.html">Despre site</a></li></ul>
</ul>
</div><div class="akatita-layout-cell layout-item-1" style="width: 40%">
<p style="text-align:right;"><a href="#"></a>Drepturi de autor © 2024. Toate drepturile rezervate.</p><br>
<p style="text-align: right;">
<!--LiveInternet counter--><script type="text/javascript">
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t40.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";h"+escape(document.title.substring(0,150))+";"+Math.random()+
"' alt='' title='LiveInternet' "+
"border='0' width='31' height='31'><\/a>")
</script><!--/LiveInternet-->
</p>
</div>
</div>
</div>
</footer>
</div>
</div></body>
</html>