Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

A Habrahabr.ru weboldal alkalmazásának univerzális webes alkalmazása a Web App Template +24 segítségével

  • 01.04.15 10:45 •
  • a_bogdanova •
  • # 254507 •
  • Habrahabr •
  • 2 •
  • 11634

- ugyanaz, mint Forbes, csak jobb.

Az előző cikkben megismerkedtünk egy univerzális webes alkalmazások - webes alkalmazás sablon létrehozásával. Röviden, a webes alkalmazás sablon lehetővé teszi, hogy "helyezze át az oldalt egy Windows-, Windows Phone- vagy Android-alkalmazásba, hozzáadva az operációs rendszerhez és az elosztási mechanizmushoz az alkalmazás tárolóján keresztül történő integrációt.

Ma egy gyakorlati példát fogunk megvizsgálni: hogyan lehet gyorsan és egyszerűen létrehozni egy webes alkalmazást a Windows és a Windows Phone számára a habrahabr.ru alapján a webes alkalmazás sablon használatával.

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Induló projektként a Windows projektet jelöljük. Indítsa el az alkalmazást, és itt látjuk a képernyőt:

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Minden nagyon jónak tűnik, de a képernyőn, a cikkek szövegein túl sok felesleges jelenik meg. Felhívtam a figyelmet a vörösre, amely nélkül véleményem szerint megteheti:

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Annak érdekében, hogy eltávolítsam a felesleges elemeket az oldalról, további css stílusú beállításokat regisztráltam az injected-styles.css fájlban. Például a "Kategória" és "Népszerű egy nap" panel eltávolításához nem szükséges a következő kód kivételével:


Most az alkalmazás jobban néz ki, nem?

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

De ez a módosítás nem fejeződött be. Szeretném egyszerűsíteni a navigációt a webhelyen a navigációs sáv használatával. Adja hozzá a következő kódot a config.jsonbe:

Készítettünk egy navigációs sávot négy gomb segítségével, amelyeket egy sorban rendezünk.
Ne feledje, hogy beállíthatja a navigációs gombot úgy, hogy mindig megjelenjen ("makeSticky": true). Most módosítsa a hozzáadott panel színét, új stílusát a wrapper-styles.css fájlban:


Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

A kényelem érdekében a beállítási részben a "felhasználói megállapodás", a "szabályok" és a "súgó" címszó alatt találhatók. Adja hozzá a következő kódblokkot a config.jsonhoz:


Most a beállítások panelen megjelenik a fenti linkek:

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Offline alkalmazás mód

Nagyon fontos, hogy a felhasználónak lehetősége legyen együttműködni az alkalmazással, ha nincs internetkapcsolat. A webes alkalmazás sablon sablonja támogatja az offline alkalmazás móddal történő munkát.

Számos lehetőség van az alkalmazás átmeneti eseményének offline üzemmódba való kezelésére:

  1. Olyan csonkoldalakat jelenítsen meg, amely hibaüzenetet okoz az Internet hiánya miatt, és figyelmeztet arra, hogy az alkalmazás nem tud tovább működni.
  2. Egyedi oldalak előgyorsítása (SuperCache mód), üzenet jelenik meg az internetkapcsolat hiányáról. Így az alkalmazás folytatja munkáját a csökkentett funkcionalitású üzemmódban.

Az offline üzemmód támogatásának hozzáadásához helyezze be a wat_offline blokkot a config.json fájlba.

Az offline támogatás engedélyezéséhez állítsa az engedélyezett tulajdonságot igaznak.

Ha azt szeretné, hogy az alkalmazás együttműködjön az alkalmazással, és ha nincs kapcsolat, akkor engedélyezze a SuperCache módot (állítsa be a megfelelő tulajdonságot a SuperCache-beállítások között).

Web Application Template támogatja IndexedDB adatbázisokkal (addIndexedDBSupport tulajdon), valamint a beágyazott (inline) képek (imagesGuardBand tulajdonság).

A Windows alkalmazás alapvető szükséges beállításait végeztük el, most megkezdjük a Windows Phone alkalmazás létrehozását.

Hozzon létre egy alkalmazást a Windows Phone számára


Most itt az ideje az alkalmazás Windows Phone verziójának. Mivel a Habrahabr.ru erőforrásnak van egy speciális mobil verziója a weboldalnak, akkor egy mobilalkalmazás létrehozása még egyszerűbb lesz, mint a Windows verzió. Másolja a konfigurációs mappát a megosztott projektből külön a Windows és a Windows Phone projektben. Nyissa meg a config.json fájlt a Windows Phone projektben, távolítsa el az összes felesleges és a start_url változást a hub mobilverziójához: m.habrahabr.ru/.

Közvetlenül az indítás után az alkalmazás jól néz ki, de módosítsuk.

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

A Windows alkalmazásban hoztuk ki a fő hivatkozásokat a navigációs sávra és a beállítási panelen.

A kényelem érdekében adja hozzá az alkalmazás paneljét, és hozzon létre néhány hivatkozást, például a profilon, a csomópontokon és a webhely szabályain.
Ne feledje, hogy ha egy harmadik fél erőforrásra vonatkozó alkalmazást készít, kapcsolódnia kell egy adatvédelmi irányelvhez.

Az alkalmazás sáv hozzáadása előtt adja hozzá a következő beállítást:


Ezután adja hozzá a wat_appBar blokkot, és adja meg a szükséges gombokat.


Íme, mi történt:

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Vegye figyelembe a "Config Host Host Address" linket, amely akkor jelenik meg, amikor az alkalmazássávot hozzáadja a Windows Phone verzióhoz, és a Windows alkalmazás beállítási paneljéhez is szabványos. Az alkalmazás konfigurációs fájlját távolról is módosíthatja. Az ezzel kapcsolatos tudnivalókat az "Általános webalkalmazások létrehozása a webes alkalmazás sablonjával" című MVA tanfolyamon vagy az Egyetemes webes alkalmazások létrehozásával a webalkalmazássablon segítségével tekintheti meg.

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Univerzális alkalmazásunk majdnem kész, az alkalmazások ikonjainak módosítása továbbra is fennáll.

Módosítsa az ikonokat az alkalmazásban

A standard ikonokkal az alkalmazás nagyon esztétikusnak tűnik. Lássuk, hogyan változtathatjuk meg az ikonokat (jelvények, csempe, kezdőképernyő képe).

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Nyissa meg a fájlcsomagot.appxmanifest (minden Windows és Windows Phone projekthez a sajátja, minden egyes projekthez külön fel kell venni a képeket). Menjen a Visual Assets fülre, és csatolja a szükséges képeket. Például, ha módosítani szeretné az alkalmazásablak bal oldalán található ikont, akkor módosítsa a képet a Square 30x30 logót. a kép eszköztár megváltoztatására - 150x150-es négyzet. A rendszerindító képernyő képén pedig változtassa meg a Splash Screen képét.

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Ügyeljen az élő csempék hozzáadásának lehetőségére. Annak érdekében, hogy adjunk nekik le a megfelelő képet a kérelem nyilvánvaló (Visual Eszközök lapon), majd keresse meg az alkalmazások fület, és válassza ki a Frissítés részt az cserép frissítési gyakoriság és a linket az RSS folyam, amely betöltésre kerül, hogy frissíteni kell az adatokat csempe.

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

Ezenkívül a config.json fájlban adja hozzá a következő kódot:


Most az új bejegyzésekre vonatkozó információk megjelennek az alkalmazáslapon.

Összegezve a jövőt illetően


A Windows 10-ben bejelentettük a "webalkalmazások" ötletét a platform részeként. A fejlesztői útmutatóban részletesen olvashat arról, hogy ez miként működik (lásd "A webes platform kialakítása" című sorozat 16 perc múlva).

Az oldal univerzális webes alkalmazásának létrehozása webes alkalmazás sablon segítségével

A Webes alkalmazások WAT megnyilvánulása (W3C) manifesztet a webhelyén tárolja, az alkalmazás beállításaiban megadja a WinRT API hozzáférési szabályait. A kész alkalmazás elhelyezhető az alkalmazás tárolójában.

Meg lehet kezdeni webalkalmazások ma a WAT, kiadói alkalmazások Windows 8.1, a Windows Phone 8.1 és az Android, és kapcsolja be a modell a Windows 10 Web Apps, miután az új OS fog megjelenni a kibocsátás.

További linkek

Kapcsolódó cikkek