Opis aplikacija u google chrome. Šta je "Chrome"? Opis i karakteristike pretraživača. Uzorci Chrome aplikacija za desktop
To se dešava svima. Otvarate dugačku stranicu i počinjete čitati bez čekanja da završi preuzimanje. U ovom trenutku, slike se konačno učitavaju i ugrađuju u stranicu, zbog čega gubite mjesto gdje ste stali.
Kako biste spriječili da se ovo ponovi, otvorite stranicu postavki mobilnog Chrome servisa koja se nalazi na chrome://flags. Zatim morate pronaći opciju "Podesi skrolovanje" i postaviti je na poziciju "Omogućeno".
2. Ušteda saobraćaja
Chrome pretraživač ima korisnu funkciju uštede mobilni saobraćaj koji iz nekog razloga malo ljudi koristi. Omogućava vam značajno smanjenje troškova zbog kompresije podataka. Izgled web stranice se praktično ne mijenja, ali njena težina postaje nekoliko puta manja.
Kompresiju saobraćaja možete aktivirati direktno u postavkama programa. Ne zaboravite da se s vremena na vrijeme vratite ovdje da vidite rezultate ove funkcije.
3. Otvaranje desktop kartica na mobilnom uređaju
Ako koristite Chrome pretraživač na svim vašim uređajima, vjerovatno znate da se podaci sinhronizuju između njih. Stoga uopće nije potrebno označiti stranicu ako ste je počeli čitati na računaru i odjednom ste morali negdje otići. Možete jednostavno otvoriti odjeljak "Nedavne kartice" na vašem mobilnom pretraživaču na putu, gdje ćete pronaći linkove ka svim stranicama koje ste nedavno pregledali, bez obzira na računar koji koristite.
4. Sačuvajte stranice za čitanje van mreže
Postoji mnogo programa za odloženo čitanje, ali ne postoji uvijek potreba za njima, jer sam Chrome može spremiti stranice za čitanje bez povezivanja na web. Podrazumevano, ova funkcija je onemogućena, ali to se može lako popraviti.
Ovu funkciju možete omogućiti na stranici eksperimentalnih postavki google chrome. Unesite u adresnu traku chrome://flags, a zatim pronađite i aktivirajte opciju chrome://flags/#offline-bookmarks.
5. Korištenje savjeta na stranici
Ako, čitajući članak, naiđete na pojam čije značenje treba razjasniti, nemojte žuriti da se odmah okrenete tražilice. Možete označiti željenu riječ, a zatim uneti kontekstni meni odaberite "Prikaži savjete". Nakon toga, ispod će se pojaviti panel sa dugmadima koji vam omogućava da odmah pošaljete zahtjev željenoj aplikaciji ili usluzi.
Koje su funkcije mobilna verzija Da li vam se najviše sviđa Google Chrome?
To se dešava svima. Otvarate dugačku stranicu i počinjete čitati bez čekanja da završi preuzimanje. U ovom trenutku, slike se konačno učitavaju i ugrađuju u stranicu, zbog čega gubite mjesto gdje ste stali.
Kako biste spriječili da se ovo ponovi, otvorite stranicu postavki mobilnog Chrome servisa koja se nalazi na chrome://flags. Zatim morate pronaći opciju "Podesi skrolovanje" i postaviti je na poziciju "Omogućeno".
2. Ušteda saobraćaja
Chrome preglednik ima najkorisniju funkciju štednje mobilnog prometa, koju iz nekog razloga malo ljudi koristi. Omogućava vam značajno smanjenje troškova zbog kompresije podataka. Izgled web stranice se praktično ne mijenja, ali njena težina postaje nekoliko puta manja.
Kompresiju saobraćaja možete aktivirati direktno u postavkama programa. Ne zaboravite da se s vremena na vrijeme vratite ovdje da vidite rezultate ove funkcije.
3. Otvaranje desktop kartica na mobilnom uređaju
Ako koristite Chrome pretraživač na svim svojim uređajima, vjerovatno znate da se podaci sinhroniziraju između njih. Stoga uopće nije potrebno označiti stranicu ako ste je počeli čitati na računaru i odjednom ste morali negdje otići. Možete jednostavno otvoriti odjeljak "Nedavne kartice" na vašem mobilnom pretraživaču na putu, gdje ćete pronaći linkove ka svim stranicama koje ste nedavno pregledali, bez obzira na računar koji koristite.
4. Sačuvajte stranice za čitanje van mreže
Postoji mnogo programa za odloženo čitanje, ali ne postoji uvijek potreba za njima, jer sam Chrome može spremiti stranice za čitanje bez povezivanja na web. Podrazumevano, ova funkcija je onemogućena, ali to se može lako popraviti.
Ovu funkciju možete omogućiti na stranici eksperimentalnih postavki Google Chromea. Unesite u adresnu traku chrome://flags, a zatim pronađite i aktivirajte opciju chrome://flags/#offline-bookmarks.
5. Korištenje savjeta na stranici
Ako, čitajući članak, naiđete na pojam čije značenje treba razjasniti, nemojte žuriti da se odmah okrenete pretraživačima. Možete označiti riječ koju želite, a zatim odabrati Prikaži prijedloge iz kontekstnog izbornika. Nakon toga, ispod će se pojaviti panel sa dugmadima koji vam omogućava da odmah pošaljete zahtjev željenoj aplikaciji ili usluzi.
A koje funkcije mobilne verzije Google Chrome-a vam se najviše sviđaju?
Da biste testirali aplikaciju koju razvijate, moraćete da je dodate u svoj pretraživač. Da biste to učinili, na stranici chrome://extensions morate označiti okvir za potvrdu "Režim programera". Nakon toga biće moguće dodati svoju ekstenziju ili aplikaciju.manifest.json
Kôd za bilo koju Chrome aplikaciju, kao i bilo koju ekstenziju, počinje datotekom manifest.json. Opisuje sve meta-informacije aplikacije. Evo uredničkog manifesta u cijelosti:( "name": "Simple Text", "description": "Izuzetno jednostavan uređivač teksta (uzorak Chrome aplikacije)", "verzija": "0.1", "ikone": ( "48": "icon/48.png ", "128": "icon/128.png" ), "manifest_version": 2, "minimum_chrome_version": "31.0", "offline_enabled": true, "app": ( "background": ( "scripts": [ "js/background.js"] ) ), "dozvole": [ ("fileSystem": ["write"]) ], "file_handlers": ( "tekst": ( "naslov": "Jednostavan tekst", "tipovi ": ["application/javascript", "application/json", "application/xml", "text/*"], "extensions": ["c", "cc", "cpp", "css", " h", "hs", "html", "js", "json", "md", "py", "textile", "txt", "xml", "yaml"] ) ) )
Hajde da analiziramo polja koja su se ovde srela. Sa imenom i opisom sve je jasno. Verzija je obavezno polje - Chrome web trgovina će zahtijevati da se promijeni kada prenesete ažuriranje svoje aplikacije.
var entryToLoad = null; funkcija init(launchData) ( var fileEntry = null if (launchData && launchData["items"] && launchData["items"].length > 0) ( entryToLoad = launchData["items"]["entry"] ) var options = (okvir: "hrom", min. širina: 400, min. visina: 400, širina: 700, visina: 700 ); chrome.app.window.create("index.html", opcije); ) chrome.app.runtime.onLaunched. addListener(init);
Pozadinska stranica radi u pozadini bez obzira na prozore aplikacije. Većinu vremena se ne učitava u memoriju. Kada se sistem pokrene, njegov kod se izvršava i može postaviti rukovaoce događajima za određene događaje, od kojih je najčešći onLaunched. Kada su rukovaoci postavljeni, pozadinska stranica se obično učitava iz memorije i vraća samo ako se dogodio jedan od događaja na koji se pretplatila.
Kada korisnik klikne na ikonu aplikacije ili otvori datoteku u njoj, događaj onLaunched se pokreće na pozadinskoj stranici. Prenosi se parametri poziva, posebno fajl(e) koje aplikacija treba da otvori. EntryToLoad = launchData["items"]["entry"] kod čuva datoteku koja je proslijeđena aplikaciji u lokalnu varijablu, iz koje će ga zatim preuzeti uređivački kod. Događaj onLaunched također može doći kada je aplikacija već otvorena. U tom slučaju, kod na pozadinskoj stranici može sam odlučiti hoće li otvoriti novi prozor ili izvršiti neku radnju u već otvorenom prozoru.
Radi kompletnosti, evo CSS-a:
Tijelo ( margina: 0; ) zaglavlje (boja pozadine: #CCC; border-bottom: 1px solid #777; -webkit-box-align: centar; -webkit-box-orient: horizontalno; -webkit-box-pack: lijevo; prikaz: -webkit-box; visina: 48px; padding: 0px 12px 0px 12px; ) dugme ( margina: 8px; ) textarea ( granica: nema; -webkit-box-sizing: border-box; font-family: monospace ; padding: 4px; pozicija: apsolutna; vrh: 48px; dno: 0px; lijevo: 0px; desno: 0px; širina: 100%; ) textarea:focus (outline: nema !important; )
Osnovni kod: rad sa fajlovima
Budući da ćemo se u našem primjeru ograničiti na minimalni skup funkcija radi jednostavnosti, glavni kod uređivača će biti gotovo isključivo posvećen radu s datotekama. Za to se koristi nekoliko API-ja, od kojih su neki već na putu prema W3C standardizaciji. File API i povezani interfejsi su velika tema koja zaslužuje poseban članak. Preporučujem kao dobar uvod.Pa hajde da razbijemo kod u js/main.js. Navest ću njegove fragmente, cijeli kod je na Githubu.
Funkcija init(entry) ( $("#open").click(open); $("#save").click(save); $("#saveas").click(saveAs); chrome.runtime.getBackgroundPage (funkcija(bg) ( if (bg.entryToLoad) loadEntry(bg.entryToLoad); )); ) $(document).ready(init);
Zadatak funkcije inicijalizacije je da doda rukovaoce dugmadima i da otvori datoteku sa pozadinske stranice. Kontekst pozadinske stranice se dobija asinhrono iz glavnog prozora pomoću chrome.runtime.getBackgroundPage.
Rukovaoci klika na dugme:
var currentEntry = null; funkcija open() ( chrome.fileSystem.chooseEntry(("type": "openWritableFile"), loadEntry); ) funkcija save() ( if (currentEntry) ( saveToEntry(currentEntry); ) else ( saveAs(); ) ) funkcija saveAs() ( chrome.fileSystem.chooseEntry(("type": "saveFile"), saveToEntry); )
Trenutni FileEntry ćemo pohraniti u globalnu varijablu currentEntry.
Jedina specifična karakteristika u kodu iznad je metoda chrome.fileSystem.chooseEntry. Koristeći ovu metodu, otvara se prozor za odabir datoteke (različit na svakom sistemu). Kao i sve druge funkcije za rad sistem podataka, ova metoda je asinhrona i prima povratni poziv za nastavak rada (u našem slučaju, funkcije loadEntry i saveToEntry opisane u nastavku).
Čitanje fajla:
Funkcija setTitle() ( chrome.fileSystem.getDisplayPath(currentEntry, function(path) (document.title = put + " - Jednostavan tekst"; )); ) funkcija loadEntry(entry) (currentEntry = unos; setTitle(); unos. file(readFile); ) funkcija readFile(file) (var reader = new FileReader(); reader.onloadend = function(e) ( $("textarea").val(this.result); ); reader.readAsText(file ); )
U funkciji setTitle() mijenjamo naslov prozora kako bi se prikazala putanja do tekuće datoteke. Kako se ovaj naslov prikazuje zavisi od sistema. Na Chrome OS-u se uopće ne pojavljuje. chrome.fileSystem.getDisplayPath je najispravniji način da dobijete putanju datoteke prikladnu da se prikaže korisniku. Drugi prikaz putanje je dostupan preko entry.fullPath.
File API ima dva različita objekta koji opisuju datoteku: FileEntry i File. Grubo govoreći, FileEntry predstavlja putanju do datoteke, a File predstavlja podatke koje sadrži. Stoga, da biste pročitali datoteku, morate dobiti objekt File po unosu. Ovo se postiže korištenjem asinhrone metode entry.file().
Kod za ovaj primjer je što kraći kako bi se uklopio u format članka. Ako želite pogledati detaljnije primjere kako se koriste određene značajke Chrome API-ja, postoji veliki skup primjera Chrome aplikacija objavljenih na GitHubu. Zvanična dokumentacija za sva programska sučelja nalazi se na developer.chrome.com. Glavno mjesto za dobivanje odgovora na konkretna pitanja o programiranju Chrome aplikacija je .
Google Chrome ozbiljno pojednostavljuje mnoge stvari, kao što je kreiranje vlastitih aplikacija. Da, svoju prijavu možete pripremiti za objavljivanje za 5 minuta, ili čak manje.
trebat će nam:
- Google chrome;
- vaš sajt ili blog, koji je već dodan u Google Webmaster Tools i verifikovan;
- veličina ikone 128x128 piksela;
- snimak ekrana vaše stranice veličine 1280x800 ili 640x400 piksela;
- snimka ekrana aplikacije 440×280 piksela;
- Google Analytics ID (u formatu UA-XXXXXX-YY) - opciono;
- kartica sa 5$ na računu.
Kreiramo aplikaciju
Počećemo kreiranjem datoteke manifest.json. Ovaj primjer prikazuje manifest web lokacije NetRival. Otvorite bilo koji uređivač teksta, kopirajte ovaj kod u njega i promijenite ga za svoju aplikaciju:
( "name": "NetRival - Tehnološki blog", "short_name": "NetRival", "description": "NetRival je blog fokusiran na ličnu tehnologiju, uputstva za upotrebu, gadgete i telekomunikacije", "verzija": "0.1 ", "manifest_version": 2, "icons": ( "128": "icon_128.png" ), "app": ( "urls": [ "http://www.netrival.com/#utm_source=google_chrome&utm_medium= chrome_app&utm_campaign=google_chrome_app" ], "launch": ( "web_url": "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app" ) ) )
U najmanju ruku, morat ćete promijeniti polja "name", "short_name", kao i opise i veze. Preimenujte ikonu vaše aplikacije u icon_128.png. Kreirajte novi direktorij, stavite manifest.json i samu ikonu tamo. Sada zipirajte direktorij u zip datoteku. Trebaće ti kasnije.
Učitavanje aplikacije u Google Chrome
Otvorite svoj pretraživač, idite na chrome://extensions/ i uvjerite se da ste označili polje "Režim za programere". Nalazi se na stranici u gornjem desnom uglu (ovo se vidi na slici). Zatim kliknite na dugme "Učitaj raspakovane ekstenzije" i izaberite fasciklu u kojoj se nalaze manifest.json i ikona vašeg proširenja. Ne morate da preuzimate zip arhivu, Google Chrome će automatski preuzeti datoteku manifest.json iz navedenog direktorija, u ovom slučaju sa E:\NetRival_Chrome_App (istaknuto na snimku ekrana).
Provjera kreirane ekstenzije
Dodatak već radi. Da biste to vidjeli, idite na chrome://apps/ i vidjet ćete nešto što izgleda kao snimak ekrana (klik na ikonu će vas odvesti na vašu web stranicu ili blog).
Stavljamo ekstenziju u službeni imenik
Sada možete postaviti naše proširenje u Google Chrome Store, gdje ga svako može preuzeti. Morate preuzeti manifest.json i ikonu u zip fajlu (to smo već uradili). Ali prvo morate platiti 5 USD naknade za registraciju koja će vam omogućiti pristup Google Chrome Developer Console (sa ovih 5 USD možete navesti 20 bilo kojih Chrome aplikacija, ekstenzija ili tema u trgovini).
Idite na https://chrome.google.com/webstore/developer/dashboard i platite 5 USD. Nakon uplate kliknite na dugme "Dodaj novi proizvod" i izaberite zip fajl sa ekstenzijom. Nakon toga, morat ćete popuniti kratku prijavu i dodati snimke ekrana.
Na Habréu je objavljeno mnogo članaka o kreiranju ekstenzija za Chrome, ali tema razvoja Chrome aplikacija (aka Chrome aplikacije) se mnogo rjeđe dotiče. Nedavno je postao relevantniji zbog širenja uređaja na ChromeOS-u. Osim toga, infrastruktura za pravljenje aplikacija za Chrome postala je stabilnija i lakša za korištenje. U ovom članku pokušat ću odgovoriti na glavna pitanja: zašto uopće pisati aplikacije za Chrome, po čemu se razlikuju od ekstenzija, web servisa, desktop aplikacija itd., kao i kako se razvijaju i koja ograničenja im se nameću. Ako ova tema izazove interesovanje, članak će imati nastavke koji pokrivaju konkretnija pitanja.
Zašto
Ista funkcionalnost se može implementirati koristeći potpuno različite tehnologije: možete napisati program za Windows, napraviti web servis, mobilna aplikacija za Android i/ili iOS itd. Šta bi moglo motivirati autora da se odluči za Chrome aplikaciju?- Radi na ChromeOS-u. Trenutno je Chrome aplikacija glavni način da svoj program približite korisnicima Chromebooka. Da li se isplati? Chromebookovi su još uvijek manji od, recimo, Windows računara, ali trend se mijenja. Prošle godine je u SAD prodato 5 puta više Chromebooka nego Macbooka.
- Chrome aplikacije rade na Windows, Linux i OS X bez ikakvih dodatnih napora. Naravno, postoji mnogo drugih načina da aplikaciju učinite prenosivom, ali većina njih se ispostavi da je znatno skuplja.
- Nedavno je postalo moguće prenijeti Chrome aplikacije na Android i iOS.
- Na većini sistema, Chrome aplikacije za korisnika izgledaju kao normalni programi. Pokreću se iz start menija, otvaraju obične prozore bez kontrola preglednika, mogu se koristiti kao zadani programi za otvaranje datoteka i na drugi način se ponašaju
kao kompletni programi.
Pakovane aplikacije i hostirane aplikacije
Svi su vidjeli ikone Search, Gmail, Google Drive na listi aplikacija instaliranih po defaultu u Chromeu. Ako kliknete na jednu od njih, ne otvara se ništa što izgleda kao aplikacija. Umjesto toga, korisnik se jednostavno prebacuje na stranicu odgovarajuće usluge.Poenta je da postoje dva osnovna različite vrste aplikacije: hostirana aplikacija i upakovana aplikacija. Nažalost, ne postoje ustaljeni ruski termini za njih. Hostuje se pretraga, Gmail itd. Takva aplikacija se sastoji od manifest.json datoteke sa URL-om i sigurnosnim postavkama, te ikonom. U stvari, hostirana aplikacija je posebna kartica za online uslugu.
Za razliku od hostovane, u slučaju pakirane aplikacije, sve datoteke potrebne za rad aplikacije pohranjuju se na korisnikov računar. Takve aplikacije obično bolje rade van mreže, mogu upravljati vlastitim prozorima i općenito imaju pristup više Chrome API-ja.
U budućnosti ćemo pričati o upakovanim aplikacijama.
Aplikacije i proširenja
Sa stanovišta korisnika, ekstenzije i aplikacije obavljaju potpuno različite funkcije: ekstenzija mijenja način na koji on koristi pretraživač, dok aplikacija obavlja neki zadatak odvojen od pretraživača. Ekstenzija mijenja sadržaj stranica i možda dodaje nekoliko dugmadi, a aplikacija obično radi u vlastitom prozoru.Istovremeno, ekstenzije i aplikacije iznutra su vrlo slične. Oba se instaliraju iz Chrome web trgovine i predstavljaju .crx datoteke koje su zip arhive. Svojstva ekstenzije/aplikacije su opisana u datoteci manifest.json, a korisničko sučelje u njima je napisano u HTML5. Mnogi Chrome API-ji dostupni su i ekstenzijama i aplikacijama.
Istovremeno, postoje značajne razlike. Aplikacije mogu koristiti funkcije koje nisu dostupne za ekstenzije:
- upravljajte svojim prozorima
- raditi direktno sa fajlovima na računaru korisnika,
- biti dodijeljen od strane programa za otvaranje određenih tipova datoteka od strane operativnog sistema,
- otvorene TCP i UDP veze (ovo, na primjer, koristi SSH klijent za Chrome),
- rad sa USB-om.
Razvojne karakteristike
Već sam spomenuo da se sa stanovišta korisnika Chrome aplikacije ne razlikuju mnogo od običnih programa. Istovremeno, sa stanovišta programera, oni su raspoređeni sasvim drugačije. Neke operacije su lakše, neke teže.Mnoga sučelja koje koriste aplikacije su općeprihvaćeni standardi i dobro su poznata svim web programerima. Za UI se koriste HTML i CSS, za rad sa HTTP - XMLHTTPRequest itd.
Chrome aplikacija implementira sinhronizaciju između instanci aplikacije na različitim računarima uz malo ili bez dodatnog napora. Rad sa datotekama, kao i svi drugi interfejsi koji zavise od spoljnih resursa, je asinhroni. S jedne strane, ovo donekle komplikuje kod za odgovarajuće operacije, s druge strane garantuje odzivnost interfejsa i sprečava blokiranje.
Još jedna karakteristika Chrome-a je sigurnosno upravljanje. U Chromeu je drugačije raspoređeno nego u klasičnim. operativni sistemi i više poput sigurnosnog sistema u Androidu. Chrome programeri su uvijek konzervativno pristupali dodavanju programskih sučelja. Prilikom dizajniranja sistema, lakše je ublažiti sigurnosna ograničenja tokom vremena nego ih učiniti restriktivnijima. Kao rezultat, na primjer, aplikacije nemaju neograničen pristup sistemu datoteka. Oni uglavnom rade sa datotekama koje su u vlasništvu aplikacije ili koje je eksplicitno otvorio korisnik.
Šta možete koristiti osim HTML + JavaScript
Glavni programski jezik za Chrome je, naravno, JavaScript. Ali to ne znači da na njemu treba prepisati sav vaš kod. Postoji nekoliko rješenja koja vam omogućuju korištenje koda na drugim programskim jezicima u vašoj Chrome aplikaciji. Među njima:- izvorni klijent. Kod je kompajliran kako bi omogućio izvršavanje procesora i verifikaciju pretraživača. NaCl kod koristi prilično bogat skup Pepper API-ja za komunikaciju sa vanjskim svijetom, uključujući, posebno, rad sa sistemom datoteka, OpenGL-om i zvukom.
- Emscripten Ako NaCl ne radi za vas, možete kompajlirati svoj C++ kod direktno u JavaScript. Na modernim pretraživačima, rezultirajući JavaScript je samo nekoliko puta sporiji nego da je preveden u izvorni kod. Od prednosti - kompatibilnost sa svim interfejsima dostupnim iz JavaScript-a.
Primjer
U zaključku ću dati primjer aplikacije na kojoj sam i sam radio (i
radi). Ovo je uređivač teksta. Urednički kod je dostupan na githubu. Za stvarno uređivanje koristi se CodeMirror biblioteka. Aplikacija implementira rad sa datotekama, prozorima, spremanje postavki i druge potrebne funkcije.
