Περιεχόμενο
- Η ανάβαση των PWA
- Τα PWA βρίσκονται σε δράση σήμερα
- Εγκατάσταση
- Εκτός σύνδεσης και άμεση κυκλοφορία
- Πρώτη εμπειρία
- Καταστήματα εφαρμογών
- Ενσωμάτωση πλατφόρμας
- Σχεδιασμός και προκλήσεις UX
- Το έτος των PWA
Ακριβώς όπως ο ανταποκρινόμενος σχεδιασμός ιστού έκλεισε το χάσμα μεταξύ ιστότοπων επιτραπέζιων και κινητών πριν από μερικά χρόνια, οι προοδευτικές τεχνικές εφαρμογών ιστού κλείνουν επί του παρόντος το χάσμα μεταξύ του ιστού και του κόσμου των εφαρμογών. Με τις εμπειρίες των χρηστών από επιτραπέζιους υπολογιστές σε εφαρμογές για κινητά να συγκλίνουν γρήγορα, φαίνεται ότι εξελίσσεται ένα πολύ πιο κομψό, πιο αποτελεσματικό Διαδίκτυο - αν και αναπόφευκτα όχι χωρίς σημαντικές αλλαγές στον υποκείμενο γενετικό κώδικα.
- Πώς να δημιουργήσετε μια Προοδευτική εφαρμογή Ιστού
Προφανώς υπάρχουν ορισμένες σημαντικές επιλεκτικές πιέσεις που οδηγούν σε αυτό. Πρώτα απ 'όλα, η δημιουργία εγγενών εφαρμογών για κάθε θέση δεν είναι απαραίτητα αποτελεσματική χρήση πόρων: οι χρήστες καταλήγουν σε εκατοντάδες μεγάλες εφαρμογές που σπαταλούν εύρος ζώνης και πολύτιμο χώρο στο δίσκο και οι εταιρείες ξοδεύουν πολλά χρήματα δημιουργώντας εφαρμογές μόνο για να εγκαταλειφθούν. μετά τις πρώτες εκδόσεις τους. Και οι περισσότερες από αυτές τις εφαρμογές βασίζονται μόνο σε περιεχόμενο ιστού: πληροφορίες που προέρχονται από υπηρεσίες ιστού ή από ένα σύστημα διαχείρισης περιεχομένου.
Ο ορισμός μιας προοδευτικής εφαρμογής ιστού δεν είναι συγκεκριμένος. Το PWA είναι απλώς μια εφαρμογή ιστού που χρησιμοποιεί πολλά νέα API και ικανότητες στην πλατφόρμα ιστού χρησιμοποιώντας προοδευτική βελτίωση για να προσφέρει μια εμπειρία σαν εφαρμογή σε κάθε πλατφόρμα με την ίδια βάση κώδικα. Είναι περισσότερο ένα σύνολο βέλτιστων πρακτικών και χρήσης API που δημιουργεί μια εξαιρετική εμπειρία όπως η εφαρμογή για τους χρήστες σας, οπότε δεν είναι σαν να έχετε ή να μην έχετε PWA. μοιάζει περισσότερο με τον ιστότοπό σας να είναι περισσότερο ή λιγότερο PWA.
Πρόκειται να αρχίσετε να δημιουργείτε έναν νέο ιστότοπο; Δοκιμάστε να χρησιμοποιήσετε ένα πρόγραμμα δημιουργίας ιστότοπων. Και βεβαιωθείτε ότι έχετε την υποστήριξη που χρειάζεστε και από μια αξιοπρεπή υπηρεσία φιλοξενίας ιστοσελίδων. Ή για κάτι ελαφρώς διαφορετικό, ανατρέξτε στον οδηγό μας για την καλύτερη αποθήκευση cloud.
Η ανάβαση των PWA
Ενώ το όνομα PWA επινοήθηκε το 2015 στο άρθρο Escaping Tabs χωρίς Χάνοντας την Ψυχή μας από τον Alex Russell που εργάζεται στο Google για την ομάδα του Chrome, το ταξίδι τους δεν ξεκίνησε πραγματικά εκεί. Κάποτε είχαμε εφαρμογές HTML (HTA), οι οποίες δημιουργήθηκαν από τη Microsoft το 1999, μαζί με πολλές άλλες πλατφόρμες εφαρμογών ιστού από τη Nokia, το BlackBerry και άλλες εταιρείες. Στη συνέχεια, το 2007, ο Steve Jobs παρουσίασε τον μοναδικό τρόπο δημιουργίας εφαρμογών για το αρχικό iPhone: PWAs, αν και με διαφορετικό όνομα. Το Chrome ξεκίνησε από εκεί, βελτίωσε τα API λίγα χρόνια αργότερα και εφηύρε το όνομα PWA.
Με τόσες πολλές προηγούμενες αποτυχημένες εμπειρίες που προσπαθούν να φέρουν περιεχόμενο ιστού στον κόσμο των εφαρμογών, γιατί πιστεύουμε ότι θα λειτουργήσει τώρα; Κατ 'αρχάς, εξαρτάται από τις εταιρείες που εργάζονται και προωθούν τις τεχνολογίες πίσω από PWA, όπως η Microsoft, η Google, η Apple και η Mozilla, για να αναφέρουμε μερικές. Επίσης, η απόδοση της πλατφόρμας ιστού έφτασε σε ένα σημείο όπου δεν υπάρχει διαφορά όταν συγκρίνετε ένα καλά σχεδιασμένο PWA με μια εγγενή εφαρμογή. Αυτές οι συνθήκες δεν υπήρξαν ποτέ πριν και αυτός είναι ένας λόγος για τον οποίο η κοινότητα ιστού αποφάσισε ότι έχει έρθει η ώρα για PWA.
Τα PWA βρίσκονται σε δράση σήμερα
Σήμερα τα PWA είναι πλήρως λειτουργικά και μπορούν να εγκατασταθούν σε:
- Android με τα περισσότερα προγράμματα περιήγησης, με το Chrome να προσφέρει την καλύτερη εμπειρία
- iOS με Safari
- Chromebook
- Windows 10 από το Microsoft Store
- Προτεινόμενα τηλέφωνα με το KaiOS - ένα πιρούνι από το Firefox OS - προς το παρόν διαθέσιμο για εκατομμύρια χρήστες κυρίως στην Ινδία
Η υποστήριξη έρχεται επίσης σε macOS, Windows και Linux μέσω Chrome αργότερα αυτό το έτος. Διατίθεται σήμερα ως πειραματική σημαία «Desktop PWA» αν θέλετε να το δοκιμάσετε τώρα. Η εγκατάσταση στα Windows on Edge χωρίς τη χρήση του καταστήματος έρχεται αργότερα, αν και δεν έχει καθοριστεί συγκεκριμένο χρονικό πλαίσιο.
Εάν διαβάσετε ξανά τη λίστα, μπορείτε να δείτε ότι κάθε πλατφόρμα έχει ή πρόκειται να έχει υποστήριξη για πλήρως εγκατεστημένες PWA τους επόμενους μήνες. Και επειδή το PWA είναι απλώς ένας ιστότοπος με λειτουργίες στην κορυφή που θα ενεργοποιούνται μόνο σε συμβατά προγράμματα περιήγησης, μπορούμε ακόμη να πούμε ότι είναι συμβατό με όλα τα προγράμματα περιήγησης από τη βασική του λειτουργικότητα.
Επίσης, οι PWA δημιουργούνται επί του παρόντος από τα περισσότερα CLI για διαφορετικά πλαίσια, όπως το Angular 6+ CLI, το React Create App, το PWA Starter Kit από το Polymer και το Preact CLI. Τέλος, η ομάδα του Ionic Framework βρήκε την ιδέα του Capacitor, μιας ανοικτής πηγής αντικατάστασης Cordova που καθιστά δυνατή τη χρήση εγγενών PWA σε κάθε κατάστημα εφαρμογών.
Εγκατάσταση
Μία από τις κρίσιμες πτυχές ενός PWA είναι η εγκατάσταση της εφαρμογής. Αυτή η διαδικασία πραγματοποιείται σε δύο προαιρετικά βήματα: τη λήψη και την αποθήκευση εκτός σύνδεσης των αρχείων της εφαρμογής και την εγκατάσταση εικονιδίων στο λειτουργικό σύστημα. Επειδή και τα δύο βήματα είναι προαιρετικά, μπορείτε να προσφέρετε μια εμπειρία εκτός σύνδεσης στο πρόγραμμα περιήγησης ή μπορείτε να προσφέρετε ένα εικονίδιο χωρίς εγκατάσταση εκτός σύνδεσης. Ωστόσο, ένα πραγματικό PWA πρέπει να περιλαμβάνει και τα δύο: πρέπει να σερβίρεται με TLS σε HTTPS και ο χρήστης θα αποφασίσει εάν θα το χρησιμοποιήσει στο πρόγραμμα περιήγησης ή στο δικό του εγκατεστημένο εικονίδιο.
Εκτός σύνδεσης και άμεση κυκλοφορία
Ο εγκέφαλος ενός PWA είναι το service worker, ένα αρχείο JavaScript εγκατεστημένο στη συσκευή του χρήστη και είναι υπεύθυνο για τη λήψη των αρχείων της εφαρμογής, την αποθήκευσή τους σε μια προσωρινή μνήμη και αργότερα την εξυπηρέτησή τους όταν χρειάζεται. Μόλις εγκατασταθεί ο εργαζόμενος υπηρεσίας, ενεργεί σαν διακομιστής μεσολάβησης για κάθε πόρο που χρειάζεται η εφαρμογή ιστού: μπορεί να αποφασίσει να τον πάρει από το δίκτυο ή να τον παραδώσει από την τοπική προσωρινή μνήμη, γεγονός που καθιστά την εφαρμογή διαθέσιμη εκτός σύνδεσης και επίσης διαθέσιμη μερικά χιλιοστά του δευτερολέπτου ακόμη και αν ο χρήστης έχει σύνδεση, μιμείται μια αρχική εφαρμογή.
Για να εγκαταστήσετε ένα service worker, το έγγραφο HTML θα πρέπει να περιλαμβάνει κάτι όπως:
εάν («serviceWorker» στο navigator) navigator.serviceWorker.register ("sw.js");
Αυτό θα εγκαταστήσει το αρχείο "sw.js" στις συσκευές χρηστών για τον τρέχοντα φάκελο στον τρέχοντα τομέα - μια έννοια γνωστή ως πεδίο εφαρμογής. Μετά την εγκατάστασή του, οι επόμενες επισκέψεις σε οποιαδήποτε διεύθυνση URL εντός του πεδίου εφαρμογής της θα διαχειρίζονται από τον συγκεκριμένο εργαζόμενο.
Ας υποθέσουμε ότι διαθέτουμε PWA με τέσσερα αρχεία: index.html, app.js, app.css και logo.png. Το πρώτο πράγμα είναι να εγκαταστήσετε αυτά τα αρχεία στην προσωρινή μνήμη του αρχείου sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; εαυτός. addEventListener ("install", event => {event. waitingUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (πόροι)));});
Στη συνέχεια, για να προβάλλεται πάντα το PWA από την προσωρινή μνήμη, πρέπει να ακούσουμε το συμβάν ανάκτησης εντός του εργαζόμενου υπηρεσίας και να αποφασίσουμε τη χρήση της πολιτικής προσωρινής μνήμης, όπως η προσωρινή μνήμη πρώτα με το ακόλουθο απόσπασμα.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). τότε (res => res);
Σε αυτήν την περίπτωση, κάθε φορά που ο χρήστης αποκτά πρόσβαση στο PWA (και από πρόγραμμα περιήγησης ή από εγκατεστημένο εικονίδιο), ο κινητήρας λαμβάνει τα αρχεία από την προσωρινή μνήμη. Ένα πλεονέκτημα των PWA έναντι των εγγενών εφαρμογών είναι ότι οι συσκευές δεν χρειάζεται να κατεβάσουν ξανά όλα τα αρχεία όταν υπάρχει αλλαγή, μόνο το αρχείο που έχει αλλάξει με μια διαφανή διαδικασία. Επίσης, μπορούμε να κατεβάσουμε τμήματα της εφαρμογής κατόπιν αιτήματος.
Αλλά η πρόκληση είναι πώς ξέρετε ποια αρχεία ενημερώθηκαν στον διακομιστή, ώστε να μπορείτε να τα αντικαταστήσετε στην προσωρινή μνήμη; Εάν δεν θέλετε να γράψετε έναν εργαζόμενο υπηρεσιών χαμηλού επιπέδου για να το διαχειριστείτε, μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη ανοιχτής πηγής Workbox, η οποία θα σας βοηθήσει με τη δημιουργία του service worker και τη δήλωση πόρων για την ενημέρωση του εγκατεστημένου πακέτου.
Λάβετε υπόψη ότι τα αρχεία του PWA σας θα διαγραφούν εάν υπάρχει πίεση αποθήκευσης στη συσκευή, εκτός εάν ζητήσετε Μόνιμη αποθήκευση εάν είναι διαθέσιμη:
εάν («αποθήκευση» στο navigator && «persist» στο navigator.storage) navigator.storage.persist ();
Στο Chrome και στα περισσότερα προγράμματα περιήγησης Android, η εφαρμογή σας δεν μπορεί να χρησιμοποιήσει περισσότερο από το 5% του διαθέσιμου χώρου. στο iOS είναι μόνο 50MiB (σχεδόν 50MB) ανά κεντρικό υπολογιστή. στο Edge είναι μεταβλητή σύμφωνα με το συνολικό μέγεθος μνήμης και στο Windows Store, είναι απεριόριστο.
Πρώτη εμπειρία
Έχουμε τον εγκέφαλο και τώρα ήρθε η ώρα για την καρδιά: το μανιφέστο της εφαρμογής ιστού. Ο σκοπός της μετατροπής ενός ιστότοπου σε PWA δεν είναι απλώς να διασφαλιστεί ότι είναι διαθέσιμος γρήγορα ή εκτός σύνδεσης, αλλά και να του επιτρέψει να έχει το δικό του εικονίδιο στο λειτουργικό σύστημα και να προσφέρει μια εντελώς αυτόνομη εμπειρία όπως οποιαδήποτε άλλη εγκατεστημένη εφαρμογή.
Το μανιφέστο είναι ένα αρχείο JSON που ορίζει μεταδεδομένα για το PWA που χρησιμοποιείται από ένα πρόγραμμα περιήγησης ή ένα κατάστημα εφαρμογών για να καθορίσει τη συμπεριφορά εγκατάστασης.
Το αρχείο ορίζει πολλές ιδιότητες ως μεταδεδομένα για το PWA σας. Κάθε λειτουργικό σύστημα θα διαβάσει αυτές τις ιδιότητες και θα προσπαθήσει το καλύτερο για να ταιριάζει με την εμπειρία που προτιμάτε. Για παράδειγμα, το Android θα διαβάσει το "display: standalone" και θα δημιουργήσει μια κανονική εμπειρία εφαρμογής. Με το "display: minimal-ui" θα δημιουργήσει μια εμπειρία με ένα ορατό URL και πιστοποιητικό TLS - χρήσιμο για εφαρμογές που είναι ευαίσθητες στην ασφάλεια. Με το «display: fullscreen» δημιουργεί εντυπωσιακές εφαρμογές χωρίς γραμμή κατάστασης ή ορατό κουμπί πίσω. Ένα σύνολο εικονιδίων και χρωμάτων καθορίζει πώς θα εμφανίζονται οι οθόνες εκκίνησης ή οι γραμμές τίτλου για το παράθυρο της εφαρμογής σας.
Υπάρχουν ορισμένες γεννήτριες δηλωτικών, όπως το Web App Manifest Generator ή το PWA Builder που θα αλλάξουν επίσης το μέγεθος του εικονιδίου για εσάς σε διαφορετικές αναλύσεις εάν παρέχετε ένα υψηλής ανάλυσης (τουλάχιστον 512 pixel).
Όταν έχετε συνδέσει το αρχείο δήλωσης στο έγγραφο HTML, οι χρήστες θα μπορούν να εγκαταστήσουν την εφαρμογή χρησιμοποιώντας διαφορετικές τεχνικές ανάλογα με το πρόγραμμα περιήγησης, που συνήθως ονομάζεται Προσθήκη στην αρχική οθόνη, Εγκατάσταση ή απλώς Προσθήκη. Εάν το PWA είναι ανιχνεύσιμο από το Bing, η Microsoft θα το προσθέσει αυτόματα στο Microsoft Store, ώστε οι χρήστες των Windows 10 να μπορούν να το εγκαταστήσουν από εκεί.
Σε ορισμένα λειτουργικά συστήματα, το PWA σας θα έχει τη δυνατότητα λήψης συνδέσμων. Αυτό σημαίνει ότι μετά την εγκατάσταση της εφαρμογής από τον χρήστη, οποιαδήποτε διεύθυνση URL εντός του πεδίου της δήλωσης θα ανοίξει εντός των ορίων της εφαρμογής σας και όχι στο πρόγραμμα περιήγησης, ανεξάρτητα από το εάν εμφανίζεται στο πρόγραμμα περιήγησης ή σε άλλες εφαρμογές όπως το WhatsApp, το Facebook ή ένα email.
Εάν πληροίτε τις απαιτήσεις PWA που ορίζουμε εδώ, ορισμένες πλατφόρμες θα προσφέρουν σήματα περιβάλλοντος (ένα μικρό εικονίδιο συνήθως στη γραμμή διευθύνσεων URL που καθορίζει ότι ο ιστός είναι εγκατεστημένος) ή ένα banner εφαρμογής ιστού. Εάν προτιμάτε, μπορείτε επίσης να προσθέσετε το δικό σας προσαρμοσμένο κουμπί εγκατάστασης χρησιμοποιώντας το ακόλουθο απόσπασμα:
window.addEventListener ("Beforeinstallpr ompt", function (e) {e.prompt (); // θα εμφανίσει την εγγενή προτροπή εγκατάστασης})
Εάν το PWA είναι εγκατεστημένο, το συμβάν "εγκατεστημένο" θα ενεργοποιηθεί στο αντικείμενο παραθύρου, ώστε να μπορείτε να παρακολουθείτε στατιστικά στοιχεία που το ακούνε.
Καταστήματα εφαρμογών
Ένα από τα σημαντικότερα οφέλη της εγκατάστασης από ένα πρόγραμμα περιήγησης είναι η αποφυγή της διαδικασίας έγκρισης του καταστήματος εφαρμογών ή η πληρωμή για να είναι εκδότης. Αυτό έρχεται με προφανή πλεονεκτήματα, όπως άμεση δημοσίευση, δημιουργία ιδιωτικών εφαρμογών για εταιρείες ή εφαρμογές που δεν πρέπει να γίνονται αποδεκτές στα καταστήματα.
Αλλά ορισμένες εταιρείες θέλουν να είναι στο κατάστημα. Από σήμερα, τα μόνα καταστήματα που δέχονται επίσημα PWA είναι το Windows Store και το kaiOS Store. Ευτυχώς, με εργαλεία όπως το Capacitor (επί του παρόντος σε Alpha) ή το PWA Builder, μπορούμε να δημιουργήσουμε και να υπογράψουμε εγγενή πακέτα και για άλλες πλατφόρμες.
Υπάρχουν ήδη PWA που έχουν ήδη δημοσιευτεί στο Google Play Store, όπως το Twitter Lite και το Google Maps Go, επί του παρόντος υπό προσαρμοσμένες εφαρμογές. Το Chrome θα προσφέρει μια λύση από το Chrome 68 μέσω αξιόπιστων δραστηριοτήτων ιστού. Από εκείνο το σημείο, θα είμαστε σε θέση να δημιουργήσουμε ένα πακέτο Android (APK) με ένα πρόγραμμα εκκίνησης στο PWA μας και να το ανεβάσουμε στο κατάστημα. Για το Microsoft Store στα Windows 10, ο ιστότοπος PWA Builder βοηθάει τη δημιουργία ενός πακέτου APPX Windows 10. Χρησιμοποιώντας μια προβολή ιστού, ενδέχεται να μπορείτε να δημιουργήσετε μη αυτόματα μια εφαρμογή iOS για το App Store, αλλά να είστε εξαιρετικά προσεκτικοί σχετικά με τους κανόνες του καταστήματος.
Ενσωμάτωση πλατφόρμας
Με την εφαρμογή τεχνικών προοδευτικής βελτίωσης, θα μπορείτε να χρησιμοποιείτε πολλές δυνατότητες, όπως ειδοποιήσεις push, πρόσβαση σε κάμερα και μικρόφωνο, γεωγραφική τοποθεσία, αισθητήρες, πληρωμές, διαλόγους κοινής χρήσης και αποθήκευση εκτός σύνδεσης. Όλες αυτές οι λειτουργίες εκτελούνται απευθείας στο μοντέλο ασφαλείας του προγράμματος περιήγησης, συμπεριλαμβανομένων διαλόγων δικαιωμάτων.
Μπορούμε επίσης να επικοινωνήσουμε με άλλες εφαρμογές μέσω προγραμμάτων URI, όπως το άνοιγμα Twitter, YouTube ή WhatsApp μέσω των διευθύνσεων URL ή προσαρμοσμένων URI, όπως το whatsapp: //.
Τέλος, κατά τη δημιουργία εγγενών PWA που δημοσιεύονται στο κατάστημα χρησιμοποιώντας το Capacitor ή στο Microsoft Store, θα είμαστε σε θέση να γεφυρώσουμε τα εγγενή API που θα μας επιτρέψουν να εκτελέσουμε σχεδόν οποιονδήποτε εγγενή κώδικα. Αυτή η ενσωμάτωση με τα Windows 10 περιλαμβάνει πρόσβαση υλικού αλλά και ενσωμάτωση με το λειτουργικό σύστημα, προσφέροντας επιλογές όπως το Pin to Start. Για παράδειγμα, το Twitter PWA σάς επιτρέπει να καρφιτσώσετε οποιονδήποτε χρήστη στην αρχική σας οθόνη.
Σχεδιασμός και προκλήσεις UX
Ο σχεδιασμός PWAs έχει μοναδικές προκλήσεις, επομένως είναι σημαντικό να αφιερώσετε λίγο χρόνο στην έρευνα, τη δοκιμή όσο το δυνατόν περισσότερο και λαμβάνοντας υπόψη τα εξής:
- Οι χρήστες θα περιμένουν εμπειρίες σαν εφαρμογές.
- Η διαδικασία εγκατάστασης είναι ακόμα νέα, επομένως πρέπει να καταβάλουμε επιπλέον προσπάθεια για να εξηγήσουμε πώς να εγκαταστήσουμε την εφαρμογή.
- Η ενημέρωση της εφαρμογής στο παρασκήνιο χωρίς αλληλεπίδραση χρήστη είναι εξαιρετική, αλλά προσθέτει επίσης ορισμένες προκλήσεις για το UX.
- Στον επιτραπέζιο υπολογιστή, ο σχεδιασμός ιστοσελίδων ανταποκρίνεται σε νέα σύνορα, καθώς τα παράθυρα PWA μπορεί να είναι μικροσκοπικά, πολύ μικρότερα από μια φορητή θύρα προβολής. Αυτό σημαίνει ότι πρέπει να δημιουργήσουμε συγκεκριμένες προβολές ή μικρά widget για αυτήν τη μορφή, όπως φαίνεται στο Chrome OS σήμερα.
- Οι ειδοποιήσεις push θα πρέπει να προσθέτουν αξία μόνο στον χρήστη, οπότε μάθετε να ρωτάτε τη σωστή στιγμή και μην χάνετε την ευκαιρία να στέλνετε μηνύματα που δεν είναι χρήσιμα ή ενδιαφέροντα.
- Πρέπει να σχεδιάσουμε για απόδοση στον ιστό και για πρόσβαση εκτός σύνδεσης.
Το έτος των PWA
Με την προσθήκη iOS και επιτραπέζιου υπολογιστή φέτος, τα PWA είναι παντού σήμερα. Αλλά πρέπει να θυμόμαστε ότι το ταξίδι τους μόλις ξεκινά, οπότε περιμένετε συχνές αλλαγές και φροντίστε να ενημερώνεστε για τις τελευταίες τεχνικές και ιδέες για να προσφέρετε μια εξαιρετική εμπειρία χρήστη ενώ εξελίσσεται η πλατφόρμα.
Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 308 του καθαρά, το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων. Αγοράστε το τεύχος 308 εδώ ή εγγραφείτε εδώ.
