Mobiiliystävällisen verkkosovelluksen rakentaminen

Mobiiliystävällinen verkkosovellus on verkkosivu, joka toimii puhelimella kuten sovellus: se mahtuu kapealle näytölle, sen napautettavat alueet ovat suuria, se latautuu nopeasti mobiilidatalla ja sen voi lisätä aloitusnäytölle progressiivisena verkkosovelluksena (PWA). Useimmille uusille sovelluksille tämä on käytännöllinen ensimmäinen versio — yksi koodipohja, yksi linkki, ei kaupan tarkastusta. Sillä on kuitenkin todellisia rajoja, etenkin iPhonen ilmoitusten ja syvällisen laitekäytön osalta, ja tämä opas kertoo suoraan, milloin tarvitset natiivin sovelluksen.

Kolme tapaa olla ”mobiilissa”

PWA on responsiivinen verkkosovellus, jossa on muutama lisäominaisuus, joten sinun ei tarvitse valita kahden ensimmäisen välillä. Rakenna ensin responsiivisesti ja tee sitten asennettavaksi. Lisätietoja vertailusta on kohdassa natiivit ja progressiiviset verkkosovellukset.

Mitä verkkosovellukset voivat ja eivät voi tehdä puhelimilla

Selaimet pystyvät enempään kuin monet luulevat:

• Kamera ja kuvien lataaminen tavallisten tiedostokenttien kautta.
• Sijainti käyttäjän luvalla.
• Asentaminen aloitusnäytölle kuvakkeella ja koko näytön käynnistyksellä.
• Offline-käyttö välimuistittamalla sivuja ja dataa service workerin avulla (taustaskripti, jonka selain ajaa sivustollesi).
• Push-ilmoitukset — iPhonella on kuitenkin saalis. Applen WebKit-tiimin mukaan web push tuli iOS- ja iPadOS-järjestelmiin versiosta 16.4 lähtien verkkosovelluksille, jotka on lisätty aloitusnäytölle. Käyttäjien täytyy ensin asentaa sovellus ja sitten sallia ilmoitukset.

Missä natiivi vielä voittaa:

• Syvälliset laitetoiminnot, kuten taustasijainti, Bluetooth-lisälaitteet, terveystiedot ja aloitusnäytön widgetit — selaintuki on rajallista tai vaihtelee alustoittain.
• Kauppalöydettävyys. Jos ihmiset etsivät sinua kaupasta, sinun on oltava siellä.
• Raskas offline-työ, kuten suurten tietomäärien synkronointi taustalla.
• Suorituskykyä vaativa grafiikka, kuten vaativat pelit.

Jos mikään näistä ei ole sovelluksesi ytimessä, verkkosovellus palvelee sinua todennäköisesti hyvin.

Suunnittelu ensin puhelimelle

Suunnittele puhelimen asettelu ensin ja anna sen laajentua suuremmille näytöille; käänteinen järjestys tuottaa yleensä ahtaita puhelinnäkymiä.

Asettelu

• Yksi sarake pienillä näytöillä. Sivupalkit muuttuvat alapalkiksi tai valikoksi.
• Ei sivuttaista vierittämistä. Leveät taulukot muuttuvat kortiksi tai vierittyvät omassa säiliössään.
• Luettava teksti ilman zoomausta — leipätekstin koko noin 16 pikseliä.

Kosketus

• Suuret napautusalueet. Noin 44 kertaa 44 pikseliä on yleinen vähimmäiskoko. Jätä niiden väliin tilaa.
• Pääasialliset toiminnot peukalon ulottuvilla, pitkillä puhelimilla lähellä näytön alareunaa.
• Ei pelkkiä hiiren kohdistuksen toimintoja. Työkaluvihjeet ja valikot, jotka aukeavat kohdistettaessa, eivät ole olemassa kosketusnäytöillä.
• Oikea näppäimistö. Sähköpostikentät avaavat sähköpostinäppäimistön, puhelinkentät numeronäppäimistön. Pyydä oikeat syötetyypit.

Nopeus

• Pienet kuvat sopivissa kooissa, ladattuina kun ne tulevat näkyviin.
• Vähemmän raskaita kirjastoja. Jokainen lisää latausaikaa mobiilidatalla.
• Luuranko-näkymät tai selkeät lataustilat, ettei sovellus näytä jumiutuneelta.

Turva-alueet ja osoitepalkki

Uusissa puhelimissa sisältö voi jäädä lovén tai kotipainikkeen indikaattorin alle, etenkin koko näytön asennetussa sovelluksessa. Pyydä turva-alueen täytettä. Varo myös koko korkeuden asetteluja, jotka hyppivät, kun selaimen osoitepalkki ilmestyy ja katoaa.

Asennettavaksi tekeminen (PWA)

Jotta verkkosovellus on asennettava, tarvitset:

1. Verkkosovelluksen manifestin — pienen tiedoston, jossa ovat sovelluksen nimi, lyhyt nimi, kuvakkeet, teemaväri ja avautumistapa (yleensä koko näytön ”standalone”).
2. Kuvakkeet alustojen vaatimissa kooissa, mukaan lukien Applen laitteille sopiva.
3. HTTPS, jonka kunnolla hostattu sovellus jo käyttää.
4. Service workerin, jos haluat offline-tuen tai push-ilmoitukset.

Kerro sitten käyttäjille, miten asennus tehdään. Androidin selaimet tarjoavat yleensä asennuskehotteen tai valikkokohdan; iPhonella se on Jaa-painike ja sitten ”Lisää aloitusnäytölle”. Lyhyt ”Asenna tämä sovellus” -ohje näillä vaiheilla auttaa paljon.

Offline-tuki on kohta, jossa PWA:t monimutkaistuvat. Sovelluksen sivujen välimuistittaminen, jotta se avautuu ilman yhteyttä, on suoraviivaista. Käyttäjien antaminen muokata dataa offline-tilassa ja synkronoida sitä myöhemmin on oikeaa työtä — vaadi sitä vain, jos käyttäjät todella tarvitsevat sitä.

Toimiva ensimmäinen kehote

Rakenna verkkosovellus siivoustiimillemme, jotta he voivat nähdä päivän työt ja merkitä ne tehdyiksi. Suunnittele ensin puhelimille: yksi sarake, suuret napautusalueet, pääpainike kiinteänä lähellä alareunaa, ei pelkästään kohdistukseen perustuvia ohjaimia, ei sivuttaista vierittämistä ja oikeat näppäimistöt puhelin- ja sähköpostikentille. Jokainen työ näyttää osoitteen (napauta avataksesi kartan), asiakkaan puhelinnumeron (napauta soittaaksesi), tarkistuslistan ja ”Merkitse valmiiksi” -painikkeen, jolla voi ottaa kuvan. Esimiehet kirjautuvat kannettavalta tehtävien jakamiseen; leveällä näytöllä näytetään taulukko korttien sijaan. Tee siitä asennettava PWA manifestilla, kuvakkeilla ja standalone-näytöllä, ja tallenna sovelluskuori välimuistiin, jotta se avautuu ilman yhteyttä. Tallenna data tietokantaan.

Rakennusvaiheet

1. Rakenna puhelinasettelu ensin esimerkkidatalla ja tarkista se puhelinkokoisella esikatselulla.
2. Testaa oikeilla puhelimilla — ainakin yksi iPhone ja yksi Android, jos käyttäjilläsi on molempia. Emulaattorit eivät huomaa esimerkiksi sitä, että näppäimistö peittää kenttiä.
3. Käy päätehtävä läpi yhdellä peukalolla. Jos jokin vaatii kahta kättä tai zoomausta, korjaa se.
4. Lisää manifesti ja kuvakkeet, asenna sovellus molemmille alustoille ja tarkista kuvake, nimi ja aloitusruutu.
5. Päätä offline-tuesta. Aloita tavoitteella ”avautuu ilman yhteyttä ja näyttää selkeän viestin”; lisää offline-muokkaus vain tarvittaessa.
6. Tarkista nopeus hitaalla yhteydellä. Selaimen kehittäjätyökalut voivat simuloida sen.
7. Lisää ilmoitukset viimeisenä, jos lainkaan — ja suunnittele sähköpostivaihtoehto käyttäjille, jotka eivät asenna sovellusta.

Yleisiä virheitä

• Suunnittelu vain suurelle näytölle. Tarkista jokainen näkymä puhelimen leveydellä työn edetessä.
• Taulukot, jotka ylittävät reunat. Muuta rivit korteiksi pienillä näytöillä.
• Liian pienet napautusalueet ja lähekkäiset linkit.
• Lomakkeet, jotka taistelevat näppäimistön kanssa — väärät syötetyypit, kentät näppäimistön takana, ei ”seuraava”-kulkua.
• Oletus, että iPhonen push toimii selainvälilehdessä. Se vaatii sovelluksen asennuksen aloitusnäytölle.
• Lupaus App Store -sovelluksesta, jota et voi toimittaa. Jos kauppa on tärkeä, suunnittele se erikseen.
• Verkkosivun kääriminen ja kutsuminen sovellukseksi. Applen App Review -ohjeet vaativat sovelluksia, jotka ylittävät uudelleenpaketoidun verkkosivun; ohut kuori riskeeraa hylkäyksen.

Milloin tarvitset natiivin sovelluksen

Siirry natiiviin (tai suunnittele natiivi versio verkkosovelluksen jälkeen), kun:

• Kauppalöydettävyys on se, kuinka asiakkaat löytävät sinut.
• Tarvitset taustasijaintia, Bluetoothia, terveystietoja, widgetejä tai muita laitetoimintoja, joita selaimet eivät tarjoa luotettavasti.
• Sovelluksen täytyy toimia täysin offline pitkiä aikoja.
• Käyttäjäsi odottavat sitä — jotkut yleisöt eivät käytä mitään, mikä ei ole kaupassa.

Kaupassa julkaisemisella on omat kustannuksensa ja vaiheensa. Syyskuusta 2026 alkaen Applen kehittäjäohjelma maksaa 99 Yhdysvaltain dollaria vuodessa ja Google Playn kehittäjätili kerran 25 Yhdysvaltain dollaria niiden omien sivujen mukaan, ja jokainen julkaisu käy läpi tarkastuksen. Monet tiimit aloittavat mobiiliystävällisellä verkkosovelluksella todistaakseen, että ihmiset haluavat tuotteen, ja investoivat natiiviin vasta sen jälkeen. Kuinka rakentaa sovellus tekoälyllä käsittelee tätä ensimmäistä vaihetta alusta loppuun.

Rakentaminen Mythexillä

Mythex rakentaa verkkosovelluksia: kuvailet sovelluksen chatissa ja tarkistat sen elävästä esikatselusta työpöydällä sekä puhelinkokoisessa kehyksessä, jonka kokoa voi muuttaa. Dokumentaatiossa on mobiiliresponsiivinen kehote pienen näytön asettelujen korjaamiseen. Voit pyytää PWA-manifestia ja kuvakkeita kuten minkä tahansa muun ominaisuuden, ja julkaista sitten julkisen linkin, joka toimii millä tahansa puhelimella. Pro-tasolla Mythex voi myös kääriä sovelluksen Android- ja iPhone-sovellukseksi, joka lähetetään Google Playn sisäiseen testaukseen ja TestFlightiin. Aloita tekoälyverkkosovellusrakentajasta tai selaa sovellusmalleja. Esimerkkinä lue kuinka rakentaa tapaseurantasovellus.

Kysymykset