Κάντε το Progressive Web App (PWA) τον καλύτερο φίλο σας

"Το PWA είναι ένα επαναστατικό για την ανάπτυξη ιστού. Βοηθά στην αύξηση της παραγωγικότητάς σας παρέχοντας μια εξαιρετική εμπειρία χρήστη που συνδυάζει τα οφέλη τόσο των web εφαρμογών όσο και των εφαρμογών για κινητά με ελάχιστο κόστος ».
Μια χειραψία είναι μια καλή πρακτική

Ένα κούνημα με το PWA κρατά τον πελάτη σας σε επαφή. Και η PWA είναι πάντα έτοιμη να γίνει ο καλύτερος φίλος σας, τότε γιατί δεν στέλνουμε ένα αίτημα φίλου στην PWA;

Ήρθε η ώρα να κάνετε ένα καλό βήμα προς την PWA και θα σας εξηγήσω πώς η φιλία σας είναι ευεργετική για εσάς με την PWA!

Μην συγχέετε με την PWA

Για ορισμένους λόγους, πολλοί πιστεύουν ότι οι PWA είναι Εφαρμογές Ενιαίας Σελίδας (SPA).
Αυτό είναι λάθος, πραγματικά πολύ λάθος (με κωδικό κατάστασης 400 ).

Μια SPA μπορεί να είναι ένα PWA, αλλά ένα PWA δεν πρέπει να είναι ένα SPA.

Η PWA αγαπά να συνεργαστεί με όλους

Ο ιστότοπος που είναι χτισμένος σε οποιοδήποτε πλαίσιο ή βιβλιοθήκη όπως ReactJs, Angular, VueJS ή ακόμα και σε HTML μπορεί να είναι PWA.

Με τους απλούστερους όρους, μια προοδευτική εφαρμογή στο Web είναι ένας ιστότοπος για κινητά που μετασχηματίζεται με πρόσθετα χαρακτηριστικά και λειτουργίες που του δίνουν μια αίσθηση τύπου "εφαρμογής". Λειτουργεί με τη χρήση μιας εμφάνισης του προγράμματος περιήγησης και χρησιμοποιεί τον υπάλληλο της υπηρεσίας για την ομαλή λειτουργία ακόμα και χωρίς αξιόπιστη σύνδεση στο διαδίκτυο.

Εάν έχετε έναν μύθο ότι η PWA είναι τεχνολογία Google τότε αυτές οι πληροφορίες είναι αρκετές για να καθαρίσετε το μύθο σας. Οι προοδευτικές εφαρμογές Web βασίζονται σε πρότυπα ιστού. Λειτουργεί με κάθε πρόγραμμα περιήγησης και κάθε πλατφόρμα.

Έτσι είναι ένας ιστότοπος - αλλά αισθάνεται σαν μια εγγενή εφαρμογή για κινητά, με οθόνη εκκίνησης, οθόνη προσαρμοσμένης φόρτωσης, ομαλότερα κινούμενα σχέδια, ειδοποιήσεις push και καμία γραμμή πλοήγησης. Οι μέσοι τελικοί χρήστες σας μπορούν να την ονομάσουν μια εφαρμογή για κινητά.

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

  • Πρέπει να εξυπηρετείται με χρήση του HTTPS (Secure)
  • Έχετε ένα έγκυρο αρχείο Manifest Web με ένα ελάχιστο συγκεκριμένο σύνολο εικονιδίων
  • Πρέπει να εγγραφείτε σε έγκυρο λειτουργό υπηρεσίας και ελάχιστη υποστήριξη εκτός σύνδεσης

Πουθενά τίποτα σε αυτές τις απαιτήσεις δεν λέει ότι ο ιστότοπος πρέπει να χρησιμοποιεί JavaScript. Λοιπόν, εν ολίγοις, πρέπει να καταχωρήσετε τον εργαζόμενο της υπηρεσίας χρησιμοποιώντας JavaScript από την πλευρά του πελάτη.

Το PWA υποστηρίζει χαρακτηριστικά όπως παρακάτω:

  • Καρφίτσωμα σε αρχική οθόνη - Μπορούμε να προσθέσουμε το εικονίδιο της εφαρμογής Ιστού σε μια αρχική οθόνη.
  • Push Notifications - Μπορούμε να ενσωματώσουμε την ειδοποίηση push όπως σε μια εγγενή εφαρμογή μέσω API Push και Notification API για τον ιστό.
  • Οθόνη εκκίνησης - Ένα πρόδηλο αρχείο διαχειρίζεται την οθόνη εκκίνησης για το PWA σας για αφοσίωση προσέγγισης προσέγγισης όπως μια εγγενής εφαρμογή
  • Geo Location - Μπορούμε να έχουμε πρόσβαση στην τρέχουσα τοποθεσία του χρήστη μέσω του API Geolocation
  • Λειτουργία εκτός λειτουργίας - Λόγω της υπηρεσίας που δουλεύει ο μηχανισμός προσωρινής αποθήκευσης, θα έχουμε πλούσια εμπειρία χρήστη, ακόμη και αν δεν υπάρχει διαδίκτυο.
  • Πρόσβαση σε λειτουργίες πολυμέσων - Μπορούμε να έχουμε πρόσβαση σε συσκευές μικροφώνου, βίντεο και κάμερας. Επίσης, εφαρμόστε λειτουργικότητα κλήσης βίντεο και ήχου χρησιμοποιώντας το API WebRTC.

Γενικά, δεν χρειάζεται να αναπτύξετε ξεχωριστή εφαρμογή για κινητά για το ίδιο έργο αν οι απαιτήσεις σας πληρούνται με τις λειτουργίες της PWA. Αυτό σημαίνει ότι οι PWA εξακολουθούν να αγωνίζονται για να παρέχουν κάποια χαρακτηριστικά της εγγενής εφαρμογής.

Ναι, αυτή είναι μια στιγμή wow για τους προγραμματιστές ιστού. Άλλες χρήσιμες λειτουργίες είναι ήδη στο δρόμο της. Το PWA ήδη προσβλέπει στην παροχή εγγενούς εφαρμογής όπως χαρακτηριστικά. Ας ρίξουμε μια ματιά σε εκείνα τα χαρακτηριστικά που θα μας βοηθήσουν πραγματικά.

Το PWA θα υποστηρίξει τις παρακάτω λειτουργίες στο μέλλον όπως:

  • Το Bluetooth - Web API Bluetooth βρίσκεται σε εξέλιξη και σύντομα θα έχουμε πρόσβαση στην τεχνολογία Bluetooth στην πλατφόρμα web.
  • Αισθητήρες - Οι αισθητήρες είναι ένα πολύ σημαντικό μέρος της εποχής της ανάπτυξης σήμερα. Η πρόσβαση ενός αισθητήρα είναι ήδη σε εξέλιξη, όπως ο αισθητήρας περιβάλλοντος φωτός, ο αισθητήρας εγγύτητας, ο αισθητήρας επιταχυνσιόμετρο, ο αισθητήρας μαγνητόμετρου και ένας αισθητήρας γυροσκοπίου.
  • Native Sharing - Μπορούμε να επικαλεστούμε τον εγγενή μηχανισμό κοινής χρήσης της συσκευής ως μέρος του API Share Web.
  • Αισθητήρας δακτυλικών αποτυπωμάτων - Μπορούμε να επαληθεύσουμε την ταυτότητα των χρηστών μέσω του αισθητήρα δακτυλικών αποτυπωμάτων χρησιμοποιώντας API Web Authentication API. Αλλά εξακολουθεί να βρίσκεται σε εξέλιξη για λόγους ασφάλειας.

Γιατί ο καθένας υιοθετεί σήμερα την PWA;

Αφού διαβάσετε μερικές στατιστικές μεγάλων εταιρειών που υιοθετούν το PWA, θα γνωρίζετε τη δύναμη της PWA και κατανοείτε ξεκάθαρα γιατί όλοι θέλουν να πάνε για την PWA.

Εδώ θέλω να σας δείξω ορισμένα στοιχεία από τις μελέτες περιπτώσεων PWA των δημοφιλών εταιρειών:

  • Το Twitter εξέλιξε το Twitter Lite Progressive Web App τον Απρίλιο του 2017 και στο twitter των αποτελεσμάτων αυξήθηκαν οι σελίδες ανά σύνοδο κατά 65%, τα Tweets που στάλθηκαν αυξήθηκαν κατά 75% και μειώθηκαν το ποσοστό εγκατάλειψης κατά 20%.
  • Το Flipkart, ο μεγαλύτερος ιστότοπος ηλεκτρονικού εμπορίου της Ινδίας, αποφάσισε να κλείσει τη στρατηγική μόνο για εφαρμογές το 2015. Μετά από αυτό, ήρθε με το Flipkart Lite, το οποίο είναι Powered by PWA και θα εκπλαγείτε από την ανάγνωση. Είναι εξαιρετικά αποτελέσματα. Οι χρήστες ξόδεψαν περισσότερο χρόνο στον ιστότοπο με ρυθμό 3 φορές, Τα ποσοστά επανασύνδεσης είναι 40% υψηλότερα, 70% μεγαλύτερο ποσοστό μετατροπής μεταξύ εκείνων που φτάνουν μέσω της σελίδας "Προσθήκη στην αρχική οθόνη" και 3 φορές χαμηλότερη χρήση δεδομένων σε σύγκριση με την εγγενή εφαρμογή.
  • Alibaba.com, Η μεγαλύτερη πλατφόρμα συναλλαγών B2B στον κόσμο. Το Alibaba.com ήρθε με μια νέα στρατηγική ως PWA για να προσφέρει μια μεγάλη εμπειρία χρήστη τόσο για τους πρώτους επισκέπτες όσο και για τους επαναλαμβανόμενους επισκέπτες. Η νέα τους στρατηγική ήρθε με εκπληκτικά αποτελέσματα. Το Alibaba.com κέρδισε 76% υψηλότερα ποσοστά μετατροπής σε προγράμματα περιήγησης, πήρε 4% περισσότερους μηνιαίους ενεργούς χρήστες στο iOS και 30% στο Android και 4 φορές υψηλότερο ποσοστό αλληλεπίδρασης από την Προσθήκη στην Αρχική οθόνη.

Ναι, αυτό είναι απίστευτο και πρέπει να δεχτούμε την ομορφιά της εφαρμογής Προοδευτικού Ιστού. Τώρα καταλαβαίνετε, γιατί σας πιέζω να κάνετε τον PWA τον καλύτερό σας φίλο.

Το Play Store είναι έτοιμο να δημοσιεύσει PWA

Ναι ναι ναι! Το Play Store και τα PWAs έχουν πλέον γίνει φίλοι. Τώρα μπορούμε να δημοσιεύσουμε PWA στο play store με τη βοήθεια των TWA (Trusted Web Activities). Το Google Chrome 72 πρόσθεσε Δραστηριότητες αξιόπιστων ιστών για την υποστήριξη προβολής ιστού σε πλήρη οθόνη χωρίς να εμφανίζει διεύθυνση URL ή άλλα στοιχεία σχετικά με το πρόγραμμα περιήγησης. Έτσι, μπορείτε να δημιουργήσετε ένα APK της εφαρμογής Ιστού σας και να το ανεβάσετε στο Play Store με τη βοήθεια του στούντιο Android και μερικές γνώσεις ανάπτυξης του Android.

Εδώ προτείνω να παρακολουθήσετε βίντεο παρακάτω για να αποκτήσετε λεπτομερή γνώση της TWA:

Η ύπαρξη PWAs όπως το Facebook Lite, το Instagram Lite, το Flipkart Lite και το Twitter Lite χρησιμοποιούν ως επί το πλείστον το WebView και μας δίνουν την αίσθηση της εφαρμογής. Αλλά έχετε κατά νου ότι η Apple εξακολουθεί να μην παρέχει υποστήριξη στην TWA.

Στο τέλος, μπορούμε να πούμε ότι η PWA είναι μια καλή και οικονομικά αποδοτική προσέγγιση για την ανάπτυξη των εφαρμογών ιστού. Είναι σίγουρα ένα μέλλον ανάπτυξης ιστοσελίδων. Ελπίζουμε ότι η PWA θα μας εξυπηρετήσει περισσότερο στο μέλλον όπως πάντα.

Πατήστε Clap Clap Clap! Επειδή το Clapping είναι μια καλή συνήθεια