Κατασκευή ιστοσελίδων ως Progressive Web Apps (PWA)

Submitted by webdev on

Οι εφαρμογές τύπου Progressive Web App (PWA) είναι στην ουσία ιστότοποι που όμως ξεχωρίζουν από τις παραδοσιακές ιστοσελίδες στον τομέα της ταχύτητάς, της ασφάλειας, καθώς και για το γεγονός ότι έχουν την όψη και την αίσθηση ενός native app που μπορείς να «εγκαταστήσεις» στο κινητό σου και παίζει πάντα.

Δείτε πως περιγράφει τα PWA ο Alex Russel της Google, ο οποίος πρότεινε το όρο το 2015 μαζί με τον σχεδιαστή Frances Berriman:

"These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins… They progressively become ‘apps’."

Τι απαιτείται να έχει ένα PWA

Οι βασικές τεχνικές προδιαγραφές ενός ιστότοπου ή μιας ιστοσελίδας για να θεωρηθεί πλήρες PWA είναι:

  • Χρήση HTTPS
  • Χρήση responsive design
  • Χρήση έγκυρου Web Manifest για τον έλεγχο της εμφάνισης και εκκίνησης
  • Χρήση Service Worker με 'fetch' Event Handler
  • Λειτουργία όλων των URLs σε offline mode
  • Ομαλή μετάβαση από σελίδα σε σελίδα

Χάρη στη χρήση Service Worker και την αξιοποίηση μιας NoSQL βάσης που ενσωματώνει οι μοντέρνοι browsers, το PWA «παίζει» πάντα και δείχνει άμεσα περιεχόμενο, ακόμα και όταν η συσκευή ή το ίδιο το site είναι offline. Και βέβαια, με χρήση local caching οι σελίδες εμφανίζονται στον χρήστη πολύ πιο γρήγορα από ότι σε ένα κλασικό site.

Πλεονεκτήματα PWA

Οι εφαρμογές PWA, δηλαδή οι ιστότοποι που έχουν κατασκευαστεί με αυτό το πρότυπο, βασίζονται σε ανοικτές τεχνολογίες και πρότυπα, όπως HTML5, CSS3, και JavaScript. Τρέχουν ουσιαστικά σε έναν full-screen browser οπότε δεν απαιτούν ξεχωριστή ανάπτυξη για το κάθε ένα συγκεκριμένο λειτουργικό σύστημα.

Τα πλεονεκτήματα της κατασκευής ιστοσελίδων ως PWA σε σχέση με ένα «παραδοσιακό» ιστότοπο είναι:

Ταχύτητα
H Google αναφέρει ότι το 53% των επισκεπτών θα εγκαταλείψουν άμεσα ένα site αν χρειαστεί πάνω από 3 δευτερόλεπτα για την εμφάνιση της πρώτης σελίδας!  Τα PWA είναι μεν ιστότοποι αλλά έχουν κατασκευαστεί με πιο μοντέρνες τεχνολογίες που οδηγούν με μαθηματική ακρίβεια σε ταχύτερη εμπειρία του χρήστη.

Ασφάλεια
Τα PWA χρησιμοποιούν εξορισμού το HTTPS πρωτόκολλο, εξασφαλίζοντας end-to-end ασφάλεια στην επικοινωνία του χρήστη με τον server.

Responsive
Το web design των PWA είναι εξορισμού responsive, διαφορετικά δεν θα μπορούσαν να έχουν την αίσθηση της mobile εφαρμογής.

Άμεση Εγκατάσταση
Ο επισκέπτης μπορεί να «εγκαταστήσει» το app στο κινητό του, χωρίς καν να ανοίξει το App Store. 

Παίζουν παντού
Τα PWA είναι πάντα 100% συμβατά με κάθε συσκευή και λειτουργικό. Έχουν παντού την ίδια συμπεριφορά και εμφάνιση, ανεξάρτητα από το λειτουργικό του σύστημα.

Χρήση Offline
Το PWA λειτουργεί ακόμα και όταν ο χρήστης δεν έχει πρόσβαση στο Internet. Χάρη στα service workers, η εφαρμογή παίζει ακόμα και όταν το backend έχει «πέσει», δείχνοντας προφανώς το πιο πρόσφατα κασαρισμένο περιεχόμενο.

Συνδεσιμότητα
Κάθε PWA και κάθε σελίδα του είναι στην ουσία μια ιστοσελίδα με ένα κανονικό URL το οποίο μπορεί να γίνει index από τις μηχανές αναζήτησης και φυσικά να το μοιραστούμε με όποιον θέλουμε.

SEO-friendly
Επειδή τα PWA δεν είναι native apps αλλά κανονικά και ανοικτά sites, μπορούμε να εφαρμόσουμε τεχνικές SEO για την αύξηση της επισκεψιμότητάς τους.

Οικονομία
Μια και η PWA εφαρμογή είναι μία και μοναδική, χωρίς να υπάρχουν ξεχωριστά code bases για κάθε mobile λειτουργικό, δεν χρειάζεται να πληρώσετε ξανά και ξανά για τις διάφορες version του site. “Single Code Base For All Browsers & Platforms”!

Αύξηση engagement
Η εμπειρία με PWA μέχρι σήμερα έχει δείξει ότι η υιοθέτηση του προτύπου PWA από έναν ιστότοπο οδηγεί συνήθως σε αύξηση του χρόνου παραμονής και των σελίδοπροβολών ανά επίσκεψη με ταυτόχρονη μείωση του bounce rate. Μεγάλες εταιρείες όπως το Twitter, to Forbes και το Starbucks αναφέρουν ότι από τη στιγμή που πέρασαν σε PWA, αυξήθηκε κατακόρυφα η χρήση του website τους.

 

Αν ενδιαφέρεστε να μάθετε περισσότερα για το πως θα κατασκευάσετε το νέο σας site ως Progressive Web App ή πως θα μετατρέψετε έναν υπαρκτό ιστότοπο σε PWA, επικοινωνήστε μαζί μας.

Επικοινωνία

Υπηρεσίες