Το UX αποτελεί το επίκεντρο της σύγχρονης ανάπτυξης ιστού εδώ και αρκετό καιρό. Αυτό επηρεάζεται από διάφορους παράγοντες, όπως η ταχύτητα φόρτωσης σελίδων, η αναγνωσιμότητα, η χρηστικότητα και ο σχεδιασμός. Αλλά τώρα ότι περισσότεροι χρήστες προτιμούν την περιήγηση στο κινητό τηλέφωνο πάνω από τη χρήση επιτραπέζιων υπολογιστών, οποιοσδήποτε ιστότοπος - είτε πρόκειται για ένα εξειδικευμένο ιστολόγιο είτε για ένα κατάστημα ηλεκτρονικού εμπορίου - πρέπει να αρχίσει να δίνει προτεραιότητα στην φιλικότητα προς κινητά .
Σήμερα, είναι εύκολο να εφαρμόσετε ένα θέμα που ανταποκρίνεται στο κινητό και να χρησιμοποιήσετε εργαλεία όπως το Google Φιλική δοκιμή για κινητά για να λάβετε πρόσθετες συστάσεις σχετικά με τον τρόπο βελτιστοποίησης του ιστότοπού σας. Αλλά αν θέλετε να πάρετε τα πράγματα στο επόμενο επίπεδο, μπορείτε να αναπτύξετε μια Προοδευτική Web App (PWA) για να προσφέρετε νέες και αξέχαστες νέες εμπειρίες στους χρήστες κινητών σας.
Ένα PWA αξιοποιεί σύγχρονες τεχνολογίες ιστού για να ενεργοποιήσει λειτουργίες που μοιάζουν με εφαρμογές. Σε αντίθεση με τους παραδοσιακούς ιστότοπους για κινητά, ένα PWA δεν χρειάζεται να ανανεώσει ολόκληρη τη σελίδα κατά τη φόρτωση νέου περιεχομένου, ούτε χρειάζεται σύνδεση στο Διαδίκτυο για να είναι προσβάσιμη. Μπορούν επίσης να εγκατασταθούν, πράγμα που σημαίνει ότι οι χρήστες μπορούν εύκολα να επαναχρησιμοποιηθούν προσθέτοντας μια συντόμευση της αρχικής οθόνης.
Οι προοδευτικές εφαρμογές ιστού έχουν τη δυνατότητα να είναι το επόμενο μεγάλο πράγμα για τον ιστό για κινητά. Αυτό είχε αρχικά προταθεί από την Google μόλις δύο χρόνια πίσω το 2015. Αλλά μέσα σε τόσο σύντομο χρονικό διάστημα έχει ήδη προσελκύσει πολλή προσοχή επειδή είναι σχετικά εύκολο να αναπτυχθεί και για την εφαρμογή της εφαρμογής του χρήστη.
-Rahul Varshneya, συνιδρυτής της εταιρείας ανάπτυξης εφαρμογών Arkenea .
Ένα PWA είναι ένα μεγάλο έργο που μπορεί να οδηγήσει την κατεύθυνση της παρουσίας του κινητού σας ιστού στο μέλλον. Αλλά αν είστε εντελώς νέοι για τα PWA, εδώ είναι 7 εργαλεία και πόροι που θα σας βάλουν στο σωστό δρόμο:
Όταν πρόκειται για την ανάπτυξη μιας PWA, πρέπει να έχετε μια βαθύτερη κατανόηση για το τι είναι σε θέση.
Για να δείτε τα PWA σε δράση, μπορείτε να ανατρέξετε στο PWA.rockscks για παραδείγματα κάτω από διάφορες κατηγορίες, συμπεριλαμβανομένων επιχειρήσεων, παιχνιδιών, αγορών και κοινωνικών. Αυτό θα σας βοηθήσει να απεικονίσετε τι θα μπορούσε να μοιάζει με το μελλοντικό σας PWA. Μπορείτε επίσης να αντλήσετε έμπνευση από τα διαθέσιμα παραδείγματα όταν αντιληφθείτε τι θα προσφέρει στους χρήστες κινητής τηλεφωνίας σας.
Ρίχνω αναίσθητο είναι ένα δωρεάν εργαλείο ανοιχτού κώδικα που μπορεί να σας βοηθήσει με Μοντέλο-Προβολή-Προβολή μοντέλου ή MVVM συνδέσεις. Αυτό σας επιτρέπει να απλοποιήσετε τη διαδικασία κωδικοποίησης των διεπαφών χρήστη JavaScript, επιτρέποντάς σας να ορίσετε προβολές και δηλωτικές δεσμεύσεις που ελέγχονται από ιδιότητες προβολής .
Η πλατφόρμα λειτουργεί αποκλειστικά με το JavaScript, το οποίο λειτουργεί με όλα τα μεγάλα προγράμματα περιήγησης και οποιοδήποτε πλαίσιο ιστού. Η βιβλιοθήκη Knockout μπορεί επίσης εύκολα να ενσωματωθεί στις υπάρχουσες ιστοσελίδες χωρίς εκτεταμένες αναδιαγραφές.
Ο πιο γρήγορος τρόπος για να δημιουργήσετε ένα PWA είναι να χρησιμοποιήσετε PWABuilder και γρήγορα να χτίσετε έναν υπάλληλο υπηρεσιών για λειτουργίες εκτός σύνδεσης, ο οποίος λειτουργεί τραβώντας και εξυπηρετώντας το "offline.html" από το διακομιστή ιστού όποτε οι χρήστες χάνουν σύνδεση στο διαδίκτυο. Μπορείτε επίσης να υποβάλετε το PWA στο κατάστημα εφαρμογών για συσκευές Android και iOS.
Για να χρησιμοποιήσετε το PWABUilder, το μόνο που χρειάζεται να κάνετε είναι να εισαγάγετε τη διεύθυνση URL του ιστοτόπου σας και στη συνέχεια να συμπληρώσετε τις πρόσθετες λεπτομέρειες όπως το όνομά σας, την περιγραφή τοποθεσίας και το εικονίδιο που προτιμάτε. Μπορείτε επίσης να τροποποιήσετε εύκολα ορισμένες ιδιότητες όπως ο προσανατολισμός της οθόνης PWA, η γλώσσα και το χρώμα φόντου. Η πλατφόρμα θα δημιουργήσει αυτόματα ένα δηλωτικό με βάση τις πληροφορίες που παρέχετε.
Το JavaScript είναι συνήθως η εισαγωγική γλώσσα που μαθαίνουν οι σπουδαστές που επιθυμούν να μάθουν την ανάπτυξη ιστού. Αν είστε έμπειρος προγραμματιστής Java ή .NET, τότε AngularJS είναι ένα από τα καλύτερα πλαίσια JavaScript που μπορείτε να χρησιμοποιήσετε για εφαρμογές ιστού. Ωστόσο, ο ιστότοπός τους προσφέρει έναν τόνο οδηγών, σεμιναρίων και πόρων που θα σας βοηθήσουν να μάθετε το δρόμο σας γύρω από την πλατφόρμα.
Η τελευταία έκδοση, Angular v4.0, παρέχει το ίδιο περιβάλλον, είτε αναπτύσσεστε για κινητά είτε για επιφάνεια εργασίας. Σε περίπτωση που νομίζετε ότι το Angular είναι πολύ περίπλοκο για τις ανάγκες σας, μπορείτε να επιλέξετε αντίθετα Αντιδρώ -Βιβλιοθήκη JavaScript προσαρμοσμένη στην ανάπτυξη UI. Μια άλλη εναλλακτική λύση είναι Πολυμερές , το οποίο μπορεί να σας παρέχει πρότυπα και άλλα επαναχρησιμοποιήσιμα στοιχεία που μπορούν να επιταχύνουν τη διαδικασία ανάπτυξης PWA.
Ένα PWA δεν είναι ακριβώς ένα DIY project για αυτο-δημιουργημένους bloggers ή έμποροι θυγατρικών, αλλά μπορεί ακόμα να γίνει με τους σωστούς πόρους. Εάν έχετε ήδη εμπειρία με συστήματα διαχείρισης περιεχομένου αλλά είστε ανίδεοι για την ανάπτυξη εφαρμογών ιστού, τότε μπορείτε να πάρετε τα βασικά κάτω Προγραμματιστές Google , μια βιβλιοθήκη πόρων που μπορεί να σας βοηθήσει να μάθετε πώς να κωδικοποιείτε.
Οι προγραμματιστές Google έχουν ένα ολοκληρωμένο φροντιστήριο σχετικά με τον τρόπο λειτουργίας των PWA, τον τρόπο κατασκευής του και τον τρόπο εκτέλεσης του. Καλύπτει επίσης άλλα βασικά στοιχεία, όπως την ενεργοποίηση του "προσθήκη στο banner αρχικής οθόνης" και τη χρήση του HTTPS.
Webpack είναι ένα εξαιρετικά χρήσιμο εργαλείο για τη συσύνδεση των πόρων των εφαρμογών σας JavaScript, συμπεριλαμβανομένων των μη κωδικών στοιχείων, όπως γραμματοσειρές και εικόνες. Αυτά θα αντιμετωπίζονται ως αντικείμενα JavaScript, τα οποία με τη σειρά τους θα επιτρέπουν την ταχύτερη φόρτωση τους. Η πλατφόρμα επίσης διευκολύνει σημαντικά τη διαχείριση των εξαρτήσεων.
Απλά θυμηθείτε ότι το Webpack έχει μια απότομη καμπύλη μάθησης, που σημαίνει ότι θα μπορούσατε να κοιτάτε τις ώρες περιήγησης για εκμάθηση και οδηγούς. Ωστόσο, οι εκπαιδευτικοί πόροι και η τεκμηρίωση που είναι διαθέσιμα στην ιστοσελίδα τους δεν είναι φιλικές προς τους αρχάριους. Τα καλά νέα είναι ότι το Webpack καλύπτεται ευρέως σε άλλους ιστότοπους, συμπεριλαμβανομένου του τμήματος τεκμηρίωσης του Angular 4.0.
Τελικά, GitHub είναι ένας ιστότοπος με βάση την κοινότητα που διατηρεί αποθήκες έργων. Καλύπτει ένα ευρύ φάσμα θεμάτων σχετικών με το προγραμματισμό, συμπεριλαμβανομένων των εργαζομένων στις υπηρεσίες JavaScript και PWA. Στην πραγματικότητα, μπορείτε να βρείτε τα αποθετήρια PWA.rocks και Webpack μέσα στην πλατφόρμα. Αυτό θα σας βοηθήσει να εμβαθύνετε την κατανόησή σας ή ακόμα και να συμβάλλετε στην περαιτέρω ανάπτυξη.
Σήμερα, υπάρχουν λίγες αποθήκες που περιλαμβάνουν PWA στο GitHub. Μπορείτε να μάθετε από αυτά τα έργα ή να ξεκινήσετε το δικό σας αποθετήριο καθώς θα πειραματιστείτε με το πρώτο σας PWA. Το GitHub διαθέτει επίσης χαρακτηριστικά διαχείρισης έργου, επιτρέποντάς σας να συνεργάζεστε άψογα με άλλους προγραμματιστές εξ αποστάσεως.
Οι προοδευτικές εφαρμογές ιστού είναι το μέλλον των εμπειριών του διαδικτύου μέσω κινητού τηλεφώνου, αλλά δεν τις χρησιμοποιούν σήμερα πολλές μάρκες. Με τα παραπάνω εργαλεία, είστε πλέον σε θέση να δημιουργήσετε ένα stand-alone PWA και να δημιουργήσετε μια έγκυρη παρουσία. Απλώς σημειώστε ότι τα εργαλεία, οι πόροι και οι πρακτικές της PWA εξελίσσονται με τις συνεχώς εξελισσόμενες τεχνολογίες των μεγάλων διαδικτυακών φυλλομετρητών.