Progressive Web Apps: Κάντε και εσείς το website σας να συμπεριφέρεται σαν mobile εφαρμογή!

03
Ιούν
2018

Κατηγορία:

articles
Progressive Web Apps: Κάντε και εσείς το website σας να συμπεριφέρεται σαν mobile εφαρμογή!

Progressive Web App – Offline Site

Οι Progressive Web Apps (PWAs) είναι εμπειρίες χρήστη που επιτρέπουν την προσέγγιση στον ιστό, χρησιμοποιώντας web τεχνολογίες. Με τα νέα χαρακτηριστικά αυτών των εφαρμογών δίνεται πλέον η δυνατότητα στις επιχειρήσεις που διαθέτουν website να έχουν παρουσία στις κινητές συσκευές των πελατών τους εμφανίζοντας το περιεχόμενο τους σε μορφή natural app, βελτιώνοντας έτσι την εμπειρία χρήσης.

Οι PWAs προσφέρουν

  • Αξιοπιστία. Φορτώνουν γρήγορα, ακόμα και σε αβέβαιες συνθήκες δικτύου.
  • Ταχύτητα. Ανταποκρίνονται γρήγορα στις αλληλεπιδράσεις του χρήστη με εξαιρετικά ομαλές κινούμενες εικόνες.
  • Αλληλεπίδραση. Προσφέρουν την αίσθηση μιας φυσικής εφαρμογής στη συσκευή, με καθηλωτική εμπειρία χρήστη.
PWA1 Αξιοπιστία
Κατά την εκκίνηση από την αρχική οθόνη του χρήστη, τα service worker επιτρέπουν την άμεση φόρτωση μιας Progressive Web App, ανεξάρτητα από την κατάσταση του δικτύου. Ένα service worker μοιάζει με έναν διακομιστή μεσολάβησης από την πλευρά της εφαρμογής πελάτη. Έχει συνταχθεί σε JavaScript και προσφέρει τον έλεγχο της κρυφής μνήμης και του τρόπου απόκρισης σε αιτήματα πόρων. Με την προ-αποθήκευση βασικών πόρων στην κρυφή μνήμη, μπορεί να εξαλειφθεί η εξάρτηση από το δίκτυο, διασφαλίζοντας άμεση και αξιόπιστη εμπειρία στους χρήστες των εφαρμογών. PWA2
Ταχύτητα
Το 53% των χρηστών θα εγκαταλείψουν έναν ιστότοπο, αν η φόρτωσή του διαρκεί περισσότερο από 3 δευτερόλεπτα! Μόλις φορτώσει, περιμένουν να είναι γρήγορος, να μην παρουσιάζει προβλήματα στην κύλιση ή να μην είναι αργός ώστε να αποκρίνεται στις διεπαφές. Γενικά να προσφέρει μια καλή εμπειρία χρήσης. Η βελτίωση της ταχύτητας ξεκινάει από την ελαχιστοποίηση και την βελτιστοποίηση των δεδομένων που οι χρήστες θα πρέπει να κατεβάσουν. Αναλύοντας αυτά τα δεδομένα, μπορούμε να πετύχουμε ένα εξαιρετικό αποτέλεσμα με τη δημιουργία μίας εφαρμογής PWA. PWA3 Αλληλεπίδραση
Οι Progressive Web Apps έχουν δυνατότητα εγκατάστασης και τοποθετούνται στην αρχική οθόνη των χρηστών, χωρίς να χρειάζεται κάποιο app store. Προσφέρουν καθηλωτική εμπειρία πλήρους οθόνης με τη βοήθεια ενός αρχείου web app manifest, ενώ μπορούν ακόμη και να προσελκύσουν ξανά τους χρήστες με ειδοποιήσεις push ιστού. Το web app manifest επιτρέπει τον έλεγχο του τρόπου τρόπο που εμφανίζεται και εκκινείται η εφαρμογή. Μπορούν να καθοριστούν εικονίδια για την αρχική οθόνη και την οθόνη εκκίνησης που εμφανίζεται κατά τη φόρτωση της εφαρμογής. Επίσης, δίνεται η δυνατότητα να καθορίζεται ποια σελίδα φορτώνεται κατά την εκκίνηση της εφαρμογής, τον προσανατολισμό της οθόνης, ακόμη και αν θα εμφανίζεται ή όχι το πρόγραμμα περιήγησης Chrome. PWA4

Γιατί PWAs;

Οι Progressive Web Apps είναι μοντέρνες εφαρμογές ιστού για χρήση εκτός σύνδεσης κυρίως από κινητές συσκευές. Μπορούν να ανταγωνιστούν με τις καλύτερες από τις εγγενείς εφαρμογές. Προορισμός τους είναι να γίνουν το νέο πρότυπο στον ιστό για κινητές συσκευές. Οι Progressive Web Apps συνδυάζουν την αλληλεπίδραση των εγγενών εφαρμογών με την προσέγγιση στον ιστό. Αποτελούν ένα συγκεκριμένο μέρος της πλατφόρμας ιστού. Η δημιουργία μιας Progressive Web App υψηλής ποιότητας έχει πλεονεκτήματα, όπως τη δυνατότητα να ικανοποιήσετε τους χρήστες σας, την αύξηση της αφοσίωσης και των μετατροπών.

Δυνατά σημεία των PWAs

  • Δυνατότητα εμφάνισης στην αρχική οθόνη. 
    Όταν καλύπτονται τα κριτήρια της Progressive Web App, το Chrome προτρέπει τους χρήστες να προσθέσουν τις Progressive Web Apps στην αρχική οθόνη τους.
  • Αξιόπιστη λειτουργία, ανεξάρτητα από τις συνθήκες του δικτύου.
     Τα service worker επέτρεψαν στην Konga να αποστείλει 63% λιγότερα δεδομένα για τις αρχικές φορτώσεις σελίδας και 84% λιγότερα δεδομένα για την ολοκλήρωση της πρώτης συναλλαγής.
  • Αύξηση αφοσίωσης. 
    Οι ειδοποιήσεις push ιστού βοήθησαν την eXtra Electronics να αυξήσει την αφοσίωση κατά 4 φορές. Επιπλέον, αυτοί οι χρήστες αφιερώνουν διπλάσιο χρόνο στον ιστότοπο.
  • Βελτίωση μετατροπών. 
    Η ικανότητα της παροχής εντυπωσιακής εμπειρίας στους χρήστες βοήθησε την AliExpress να βελτιώσει τις μετατροπές για τους νέους χρήστες σε όλα τα προγράμματα περιήγησης κατά 104%. Η αύξηση στις μετατροπές iOS ήταν 82%.

Το παράδειγμα του περιοδικού Forbes

Αναγνωρίζοντας την επίδραση της τεχνολογίας στο τομέα των ειδήσεων προχώρησαν στην αναθεώρηση των τεχνολογιών που χρησιμοποιούσαν αξιοποιώντας τις δυνατότητες της Progressive Web App τεχνολογίας. Ενσωμάτωσαν alerts – ειδοποιήσεις για τα νέα & έδωσαν έμφαση στην ταχύτητα φόρτωσης των γραφικών τους βελτιώνοντας έτσι την εμπειρία χρήσης των επισκεπτών τους.

Με την χρήση του PWA,  παρατηρήθηκε 43% αύξηση των sessions ανά χρήστη (αυξήθηκε ο χρόνος που δαπάνησαν οι χρήστες στο Forbes). 20% αύξηση του ad viewability (οι χρήστες εκτίθενται σε περισσότερες διαφημίσεις). Tριπλασιάστηκε το scroll depth (το scroll στην οθόνη) και αυξήθηκε συνολικά το engagement των χρηστών.

Έχετε απορίες

Κάντε και εσείς το website σας να συμπεριφέρεται σαν εφαρμογή, προσφέροντας έτσι στους χρήστες μια διαδραστική εμπειρία. Για περισσότερες πληροφορίες για την την ανάπτυξη Progressive Web Apps (PWAs), επικοινωνήστε μαζί μας στο τηλέφωνο 2810.235.631, στο email [email protected] ή συμπληρώστε την παρακάτω φόρμα.