Aplikacje na Android/ IOS

Stronę internetową można wyeksportować do ekranu głównego swojego smartphona – tak wyeksportowana strona będzie zachowywać się jak zwykła aplikacja. Jest to wygodniejsze niż zapamiętywanie linków do stron internetowych w zakładkach w przeglądarce.

Aplikacje tak utworzone nazywają się Progressive Web App (PWA)

Pojawiające się linki (np skanowane przez kod QR najlepiej otwierać w przeglądarce Chrome na smartphonie ( najlepiej wspiera notyfikacje i aplikacje PWA))

Ikony do eksportowania znajdują się w belce strony internetowej.

po kliknięciu otrzymamy ekran z kodem QR i linkiem który należy otworzyć w przeglądarce na smarhphonie ( koniecznie w chrome dla androida i safari dla IOSa). Instrukcja instalacji znajduję się nad kodem QR

Jeżeli strona nigdy nie była eskporotwana pojawi się przycisk z informacją czy utworzyć potrzebne pliki

Linki dla Androida i IOS’a nie różnią się niczym a rozgraniczenie na IOSa i androida służy jedynie wyświetleniem odpowiednich kroków instalacji.

Jeżeli w androidzie nie pokaże się komunikat do isntalacji – należy chwilę odczekac i przeładować stronę (jednym z wymogów Googla jest to żeby użytkownik przebywał już w domenie minimum 30s)

Co się dzieje w czasie instalacji.

Do plików strony internetowej zostaną dodane następujące pliki:

  • manifest.json – gdzie są ustawienia aplikacji więcej tutaj
  • ikony icon512.png i icon192.png które można zastąpić swoimi plikami – dla IOSa jest wykorzystywana tylko ikona icon192
  • sw.js – jest to wymóg androida, żeby service workery zostały dodane z minimalną konfiguracją więcej tutaj

Plik instalacyjny installApp.html

Jest to kopia index.html różnice:

  • dodany wpis  <link rel="manifest" href="/wp/~394979_7Q0vdpRhHI55/6/manifest.json">pod <head> dlatego head jest wymagany żeby był na stronie
  • dodany wpis <link rel="manifest" href="/wp/~394979_7Q0vzpRhHI55/6/manifest.json"> pod manifestem – informacja dla IOSa o ikonie
  • <script>
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
    }
    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (e) => {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault();
    // Stash the event so it can be triggered later.
    deferredPrompt = e;
    });
    </script> Pokazuje informacje o możliwości instalacji aplikacji i ładuje serviceWorkery

Uwaga

Oczywiście wszystkie zmiany w plikach będą widoczne w aplikacji ( po jej przeladowaniu )

Artykuł o wysyłaniu push notyfikacji do aplikacji