VulCode

Aplikacje webowe i PWA z pracą offline

Budujemy aplikacje, które działają w przeglądarce, a klient instaluje je na telefonie jak zwykłą aplikację, bez sklepu: z ikoną na ekranie, pracą przy słabym zasięgu i powiadomieniami. Mówimy też uczciwie, kiedy PWA nie wystarczy i lepsza będzie aplikacja ze sklepu.

Katalog usług
Panel klienta VulCode: saldo, projekty z budżetem, zgłoszenia i ostatnia aktywność
Aplikacja zainstalowanaOtwiera się z ekranu początkowego, także bez internetu
Zablokowany iPhone z czterema powiadomieniami panelu VulCode: odpowiedź w zgłoszeniu, nowa faktura, status projektu i raport

Czym jest aplikacja webowa i PWA

Aplikacja webowa działa w przeglądarce. PWA to taka aplikacja, którą da się zainstalować, uruchomić bez paska przeglądarki i używać przy słabym połączeniu.

Co porównujemyPWAAplikacja ze sklepuZwykła strona
Instalacja bez sklepu z aplikacjamiTakWystarczy link, kod QR albo wejście na stronę.NieNie
Aktualizacja bez recenzji sklepuTakNowa wersja trafia do wszystkich przy następnym otwarciu.NieKażda wersja czeka na recenzję sklepu.Tak
Praca przy braku sieciCzęściowoDziała to, co zaplanujemy, na przykład ostatnio otwarte dane.TakNieBez sieci tylko komunikat przeglądarki o braku połączenia.
Powiadomienia na iPhonieCzęściowoOd iOS 16.4, po dodaniu do ekranu początkowego.TakBez dodawania do ekranu początkowego.Nie
Pełny dostęp do funkcji telefonuCzęściowoAparat i lokalizacja przy otwartej aplikacji; praca w tle, widżety oraz Bluetooth i NFC na iPhonie zostają dla aplikacji ze sklepu.TakNie
Widoczność w sklepie z aplikacjamiNieTakKlienci znajdą ją w App Store i Google Play.Nie
Kiedy wybraćPanel, system wewnętrzny albo narzędzie dla klientów: jedna wersja na telefon i komputer, a zmiany od razu u ludzi.Gdy klienci mają szukać aplikacji w sklepie albo potrzebujesz funkcji telefonu, do których przeglądarka nie sięga.

Kiedy przeglądarka proponuje instalację

Przeglądarka sama sprawdza, czy strona spełnia warunki aplikacji, i dopiero wtedy proponuje instalację. Tak spełnia je vulcode.com, a to samo ustawiamy w Twojej aplikacji.

Chrome na Androidzie i komputerze
  1. Bezpieczne połączenieStrona otwiera się z kłódką w pasku adresu.Jak to spełniamy: Certyfikat i przekierowanie z wersji bez kłódki.
  2. Opis aplikacjiPlik z nazwą aplikacji, adresem startu i wyglądem okna.Jak to spełniamy: Jeden stały identyfikator aplikacji. U nas nazwa VulCode i start na /pl/.
  3. IkonyIkona w dwóch rozmiarach: 192 i 512 pikseli.Jak to spełniamy: Do tego ikona, którą Android przycina do kształtu swoich ikon.
  4. Okno aplikacjiOkno bez paska adresu, jak zwykła aplikacja.Jak to spełniamy: Pełne okno aplikacji, bez paska przeglądarki.
  5. ZainteresowanieCo najmniej jedno kliknięcie i 30 sekund na stronie.Jak to spełniamy: Własny przycisk instalacji we właściwym momencie.
Propozycja instalacji

VulCode trafia na ekran z własną ikoną, a po przytrzymaniu ikony są skróty do panelu klienta, oferty i kontaktu. Safari na iPhonie sam instalacji nie proponuje, więc aplikacja pokazuje, jak dodać ją z menu Udostępnij.

vulcode.com1
Software house z Krakowa:
strony internetowe

Jakość jutra dostępna dziś: rozmawiasz z osobą, która pisze Twój kod, a bezpłatna wycena wraca w godzinę.

Napisz do nasNasza oferta
Co robimy
sklepy internetowe
aplikacje mobilne
panele i systemy
Zainstalować aplikację?
VulCodevulcode.com
AnulujZainstaluj
Instalowanie...
9:41
czwartek, 8 października
KalendarzZdjęciaMapyZegarUstawieniaPlikiNotatkiVulCode
Zainstalowano VulCodeterazAplikacja jest na ekranie początkowym.

Co działa bez sieci, a co zawsze idzie z serwera

W tle aplikacji działa mały skrypt, który decyduje, co pokazać bez zasięgu. Ustawiamy go tak, żeby bez sieci aplikacja działała tam, gdzie to bezpieczne, i nigdy nie udawała, że ma świeże dane.

TSerwis
Zlecenia
Mapa
Klienci
Magazyn
Raporty
Zlecenia na dziś
czwartek, 8 października
Tablet Serwisanta 01: synchronizacja 08:12
GodzinaZlecenieKlientSerwisantStatus
08:30Z-2318Klient 01Serwisant 01W trakcieprotokół, podpis
09:30Z-2319Klient 04Serwisant 01Zaplanowanenotatka
10:00Z-2322Klient 07Serwisant 02W trakcie
11:30Z-2323Klient 15Serwisant 02Zaplanowane
13:00Z-2320Klient 09Serwisant 01Zaplanowane
15:30Z-2321Klient 12Serwisant 01Zaplanowane
Ostatnie zmiany
09:41Serwisant 01 dodał protokół i podpis klienta do Z-2318
09:41Serwisant 01 dodał notatkę do Z-2319
08:12Serwisant 01 pobrał zlecenia na dziś
TZleceniaSerwisant 01Brak sieci
Brak sieci. Pokazujemy zlecenia pobrane o 08:12, a zmiany zapisujemy w tablecie.
Na dziś
08:30 · Z-2318Klient 01W trakcie
09:30 · Z-2319Klient 04Zaplanowane
13:00 · Z-2320Klient 09Zaplanowane
15:30 · Z-2321Klient 12Zaplanowane
Do wysłania3
1Protokół zlecenia Z-23184 zdjęcia, zapisany 09:36czeka na sieć
2Podpis klienta, Z-2318zapisany 09:37czeka na sieć
3Notatka do Z-2319zapisana 09:40czeka na sieć
Części w magazynie
Stany pobieramy zawsze z serwera, więc bez sieci ich nie pokazujemy.
Tak działa nasz panel klienta
  1. Ekrany aplikacjinajpierwSerwergdy nie ma sieciOstatnia zapisana wersja

    Z siecią zawsze widać najnowszą wersję, a bez zasięgu aplikacja i tak się otwiera.

  2. Grafiki, ikony i pliki aplikacjinajpierwPamięć telefonugdy ich tam nie maSerwer

    Każda nowa wersja pliku ma nową nazwę, więc zapisana kopia nigdy nie jest stara, a aplikacja otwiera się od razu.

  3. Saldo, statusy i fakturyzawszeSerwernigdyPamięć telefonu

    Kopia z pamięci mogłaby pokazać anulowaną fakturę jako aktywną, więc te dane przychodzą zawsze prosto z serwera.

  4. Strona z błędem serweranie zapisujemyPamięć telefonu

    Gdy serwer na chwilę nie odpowiada, telefon nie zapamiętuje tej strony i nie pokaże jej później jako wersji bez sieci.

  5. Nowa wersja aplikacjiod razuTrafia do wszystkichusuwa tylko swojeStare kopie

    Aplikacji na telefonie nikt nie zamyka tygodniami, więc nowa wersja nie czeka na ponowne uruchomienie.

Powiadomienie push, które zawsze dochodzi

Twój system wysyła powiadomienie, a serwis przeglądarki dostarcza je, gdy telefon jest w sieci. Kilka zasad, których pilnujemy, wzięło się z błędów naprawionych w naszym własnym panelu.

Serwer aplikacji

Każdy rodzaj powiadomienia ma swój priorytet i czas, przez jaki czeka na telefon.

Powiadomienie z priorytetemSerwis powiadomień przeglądarki

Google, Mozilla, Microsoft albo Apple, zależnie od przeglądarki, trzyma powiadomienie, aż telefon wróci do sieci.

  • Zgłoszenia, płatności i sprawy systemowewysoki priorytet3 dni
  • Projekty i program partnerskizwykły priorytet24 godz.
  • Nowościniski priorytet, bez dźwięku12 godz.

Gdy telefon był wyłączony dłużej, ta sama wiadomość czeka w panelu pod dzwonkiem, bo ten kanał jest domyślnie włączony.

Gdy telefon jest w sieciSkrypt panelu w telefonie
  • Każde powiadomienie ma treść i jest widoczne, nawet gdy coś pójdzie nie tak, bo po kilku pustych telefon mógłby wyłączyć powiadomienia aplikacji.
  • Dwa powiadomienia o różnych sprawach nigdy nie zlewają się w jedno i żadne nie ginie po drodze.
  • Panel ma własny skrypt do powiadomień, oddzielny od strony, więc zgoda na powiadomienia zawsze trafia we właściwe miejsce.
Telefon

Dotknięcie otwiera panel dokładnie tam, gdzie jest sprawa. Na iPhonie powiadomienia działają od iOS 16.4 w aplikacji dodanej do ekranu, a o zgodę pytamy dopiero po kliknięciu przycisku.

kolorowa ikona: Android pokaże plamęjednobarwna odznaka: widać kształt
czwartek, 8 października
9:41
VulCodePokaż mniej
Odpowiedź w zgłoszeniuterazWsparcie 01 odpowiedział(a) w zgłoszeniu #18: "Problem z certyfikatem SSL".VulCode
Nowa faktura29 min temuWystawiono fakturę za etap 2 projektu "Strona firmowa".VulCode
Zmiana statusu projektu54 min temuProjekt "Sklep internetowy" ma teraz status: W recenzji.VulCode
Nowy raport projektu1 godz. temuDodano raport "Tydzień 41" do projektu "Sklep internetowy".VulCode

Aplikacja webowa, z której korzystamy codziennie

Tak działa nasz panel klienta: klienci śledzą w nim projekty, płatności i zgłoszenia w przeglądarce albo w aplikacji zainstalowanej z vulcode.com.

Harmonogram projektu w panelu klienta VulCode: etapy prac z datą i opisem
PanelE-mailDiscordPushProjektyZgłoszeniaPłatnościProgram partnerskiNowościSystemowe

Każdą z sześciu kategorii powiadomień klient włącza osobno dla panelu, e-maila, Discorda i powiadomień na telefon.

vulcode.com: jedna zainstalowana aplikacja/pl/strona/pl/panel/panel klienta

Panel działa w tej samej zainstalowanej aplikacji co strona, a w przeglądarce otwiera się jak zwykła strona.

Jak powstaje aplikacja webowa

Od listy ekranów do aplikacji zainstalowanej na telefonach Twoich użytkowników.

  1. Co dostajeszLista ekranów i wycena

    Zakres i ekrany

    Spisujemy, kto korzysta z aplikacji, na jakich urządzeniach i co ma działać bez sieci.

  2. Co dostajeszZaakceptowany prototyp

    Projekt i prototyp

    Makiety i klikany prototyp robimy razem z partnerską agencją Aphrodi i sprawdzamy na telefonie, zanim powstanie kod.

  3. Co dostajeszDziałające etapy

    Wersja testowa

    Aplikacja na adresie testowym, którą można zainstalować i sprawdzać etap po etapie.

  4. Co dostajeszLista sprawdzonych urządzeń

    Testy na urządzeniach

    Android, iPhone i komputer: instalacja, powiadomienia, praca bez sieci i aktualizacje.

  5. Co dostajeszAplikacja u użytkowników

    Wdrożenie

    Aplikacja na Twojej domenie, z monitoringiem i instrukcją instalacji dla użytkowników.

Najczęstsze pytania o aplikacje webowe i PWA

Odpowiedzi o iPhonie, pracy bez sieci, instalacji, aktualizacjach i wycenie.

Czytaj dalej

Usługi, które często idą razem z aplikacją webową, nasze panele i wpis o tym, czego PWA nadal nie potrafi.

Chcesz aplikację, którą klienci zainstalują z przeglądarki?

Napisz, kto ma z niej korzystać i na jakich urządzeniach. Odpowiemy w godzinę z pytaniami i wyceną.