Βελτιστοποίηση PWAS για διαφορετικές λειτουργίες εμφάνισης – Magazine Smashing

Οι προοδευτικές εφαρμογές ιστού (PWAs) είναι ένας πολύ καλός τρόπος για να δημιουργηθούν εφαρμογές για το Web Feel Native, αλλά απομακρύνοντας από ένα περιβάλλον προγράμματος περιήγησης, μπορούμε να εισαγάγουμε ζητήματα χρηστικότητας. Το Declan καλύπτει τον τρόπο με τον οποίο μπορούμε να τροποποιήσουμε την εφαρμογή μας ανάλογα με την εφαρμογή εμφάνισης για τον μετριασμό αυτών των προβλημάτων.

Οι προοδευτικές εφαρμογές ιστού (PWA) είναι ένας φανταστικός τρόπος για να μετατρέψετε τις εφαρμογές ιστού σε αυτόματες, αυτόνομες εμπειρίες. Γέφρουν το χάσμα μεταξύ ιστότοπων και εγγενών εφαρμογών, αλλά αυτός ο μετασχηματισμός μπορεί να είναι επιρρεπής στην εισαγωγή σχεδιαστικών προκλήσεων που απαιτούν προσεκτική εξέταση.

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

fullscreen: Κρύβει όλο το UI του προγράμματος περιήγησης, χρησιμοποιώντας ολόκληρη την οθόνη.
standalone: Μοιάζει με μια εγγενή εφαρμογή, κρύβοντας τα χειριστήρια του προγράμματος περιήγησης, αλλά διατηρώντας το σύστημα UI του συστήματος.
minimal-ui: Δείχνει ελάχιστα στοιχεία UI του προγράμματος περιήγησης.
browser: Τυπική εμπειρία προγράμματος περιήγησης ιστού με διεπαφή πλήρους προγράμματος περιήγησης.

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

Είναι εύκολο να ξεχάσουμε πόση λειτουργικότητα μας παρέχει το πρόγραμμα περιήγησης. Πράγματα όπως τα κουμπιά προς τα εμπρός/πίσω, η δυνατότητα ανανέωσης μιας σελίδας, αναζήτησης σε σελίδες ή ακόμα και χειρισμού, μοιράζοντας ή αντιγράφοντας τη διεύθυνση URL μιας σελίδας είναι όλα τα χαρακτηριστικά που παρέχονται από το πρόγραμμα περιήγησης, τα οποία οι χρήστες μπορούν να χάσουν την πρόσβαση όταν το UI του προγράμματος περιήγησης είναι κρυμμένο. Υπάρχει επίσης η περίπτωση των πραγμάτων που εμφανίζουμε σε ιστότοπους που δεν μεταφράζονται απαραιτήτως σε εμπειρίες εφαρμογών.

Οι διαφορετικές λειτουργίες εμφάνισης PWA όπως φαίνεται σε ένα τηλέφωνο Android που τρέχει Chrome 138. (Μεγάλη προεπισκόπηση·

Φανταστείτε έναν χρήστη βαθιά σε μια φόρμα χωρίς κουμπί πίσω, προσπαθώντας να μοιραστείτε μια σελίδα προϊόντος χωρίς τη δυνατότητα να αντιγράψετε μια διεύθυνση URL ή να χτυπήσετε ένα σφάλμα χωρίς κουμπί ανανέωσης για να τα διασώσετε!

Όπως και ο τρόπος με τον οποίο κάνουμε διαφορετικές σκέψεις κατά το σχεδιασμό για τον ιστό έναντι του σχεδιασμού για την εκτύπωση, πρέπει να κάνουμε σκέψεις κατά το σχεδιασμό για ανεξάρτητες εμπειρίες και όχι για εμπειρίες με βάση το πρόγραμμα περιήγησης με την προσαρμογή του περιεχομένου και της εμπειρίας των χρηστών στο μέσο.

Ευτυχώς, μας παρέχονται πολλοί τρόποι για να προσαρμόσουμε τον ιστό.

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

Ερωτήματα μέσων ενημέρωσης όπως @media (min-width: 1000px) Τείνουν να έχουν τη μεγαλύτερη χρήση για τη ρύθμιση σημείων διακοπής με βάση το μέγεθος των προβολών, αλλά είναι ικανά πολύ περισσότερα. Μπορούν να χειριστούν στυλ εκτύπωσης, προσανατολισμό συσκευών, προτιμήσεις αντίθεσης και ένα ολόκληρο τόνο περισσότερο. Στην περίπτωσή μας, μας ενδιαφέρει το display-mode Χαρακτηριστικό μέσων.

Τα ερωτήματα πολυμέσων λειτουργίας εμφάνισης αντιστοιχούν στην τρέχουσα λειτουργία εμφάνισης.

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

Αυτά τα ερωτήματα μέσων αναφέρουν απευθείας την τρέχουσα λειτουργία:

@media (display-mode: standalone) θα ισχύει μόνο σε σελίδες που έχουν οριστεί σε αυτόνομη λειτουργία.
@media (display-mode: fullscreen) Ισχύει για τη λειτουργία πλήρους οθόνης. Αξίζει να σημειωθεί ότι αυτό ισχύει και όταν χρησιμοποιείτε το API πλήρους οθόνης.
@media (display-mode: minimal-ui) Ισχύει για ελάχιστη λειτουργία UI.
@media (display-mode: browser) Ισχύει για τη λειτουργία τυπικού προγράμματος περιήγησης.

Αξίζει επίσης να παρακολουθείτε το για το window-controls-overlay και tabbed λειτουργίες εμφάνισης. Κατά τη στιγμή της γραφής, αυτές οι δύο λειτουργίες εμφάνισης είναι πειραματικές και μπορούν να χρησιμοποιηθούν display_override. display-override είναι μέλος της εκδήλωσης του PWA μας, όπως displayαλλά παρέχει μερικές επιπλέον επιλογές και δύναμη.

display έχει μια προκαθορισμένη αλυσίδα εφεδρείας (fullscreen -> standalone -> minimal-ui -> browser) ότι δεν μπορούμε να αλλάξουμε, αλλά display-override Επιτρέπει τη ρύθμιση μιας διαταγής από την επιλογή μας, όπως και τα εξής:

"display_override": ("fullscreen", "minimal-ui")

window-controls-overlay μπορεί να εφαρμοστεί μόνο για PWAs που εκτελείται σε ένα λειτουργικό σύστημα επιφάνειας εργασίας. Κάνει το PWA να πάρει ολόκληρο το παράθυρο, με κουμπιά ελέγχου παραθύρων να εμφανίζονται ως επικάλυψη. Εν τω μεταξύ, tabbed είναι σχετικό όταν υπάρχουν πολλαπλές εφαρμογές σε ένα μόνο παράθυρο.

Εκτός από αυτά, υπάρχει επίσης το picture-in-picture Λειτουργία εμφάνισης που ισχύει για τις τρόπους εικόνας-σε-εικόνα.

Χρησιμοποιούμε αυτά τα ερωτήματα πολυμέσων ακριβώς όπως θα κάναμε οποιοδήποτε άλλο ερώτημα μέσων. Για να δείξετε ένα στοιχείο με την τάξη .pwa-only Όταν η λειτουργία οθόνης είναι αυτόνομη, θα μπορούσαμε να το κάνουμε αυτό:

.pwa-only {
    display: none;
}

@media (display-mode: standalone) {
    .pwa-only {
        display: block;
    }
}

Αν θέλαμε να δείξουμε το στοιχείο όταν η λειτουργία οθόνης είναι αυτόνομη ή minimal-uiΘα μπορούσαμε να το κάνουμε αυτό:

@media (display-mode: standalone), (display-mode: minimal-ui) {
    .pwa-only {
        display: block;
    }
}

Όσο μεγάλο είναι, μερικές φορές το CSS δεν είναι αρκετό. Σε αυτές τις περιπτώσεις, μπορούμε επίσης να αναφέρουμε τη λειτουργία εμφάνισης και να κάνουμε τις απαραίτητες προσαρμογές με το JavaScript:

const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
// Listen for display mode changes
window.matchMedia("(display-mode: standalone)").addEventListener("change", (e) => {
  if (e.matches) {
    // App is now in standalone mode
    console.log("Running as PWA");
  }
});

Πρακτικές εφαρμογές

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

Προσαρμογή περιεχομένου για χρήστες PWA

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

Εμφάνιση περισσότερες επιλογές και λειτουργίες

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

Κατάλληλες δυνατότητες πλατφόρμας

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

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

Εγκαταστήστε τις προτροπές

Μια κοινή ενόχληση είναι μια προτροπή για την εγκατάσταση ενός ιστότοπου ως PWA που εμφανίζεται όταν ο χρήστης έχει ήδη εγκαταστήσει τον ιστότοπο. Στην ιδανική περίπτωση, το πρόγραμμα περιήγησης θα παρέχει μια δική του γραμμή εγκατάστασης, εάν το PWA μας έχει διαμορφωθεί σωστά, αλλά όχι όλα τα προγράμματα περιήγησης και μπορεί να είναι λεπτό. Το MDN έχει έναν φανταστικό οδηγό Δημιουργία ενός κουμπιού προσαρμοσμένου για να ενεργοποιήσετε την εγκατάσταση ενός PWAαλλά μπορεί να μην ταιριάζει στις ανάγκες μας.

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

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

/* Utility class to hide elements in PWA mode */
.hide-in-pwa {
  display: block;
}

@media (display-mode: standalone), (display-mode: minimal-ui) {
  .hide-in-pwa {
    display: none !important;
  }
}

Στη συνέχεια, στο HTML σας:


  



  For the best experience, install this as an app!

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

Στρατηγική χρήση του πεδίου εφαρμογής και ξεκινήστε τη διεύθυνση URL

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

Ακολουθεί ένα παράδειγμα προφανών χρησιμοποιώντας αυτές τις ιδιότητες:

{
    "name": "Example PWA",
    "scope": "/dashboard/",
    "start_url": "/dashboard/index.html",
    "display": "standalone",
    "icons": (
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    )
}

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

start_url Ορίζει τη διεύθυνση URL που θα παρουσιαστεί ένας χρήστης όταν ανοίξουν την εφαρμογή. Αυτό είναι χρήσιμο εάν, για παράδειγμα, η εφαρμογή σας έχει περιεχόμενο μάρκετινγκ στο example.com και ένα ταμπλό στο example.com/dashboard/index.html. Είναι πιθανό ότι οι άνθρωποι που έχουν εγκαταστήσει την εφαρμογή ως PWA δεν χρειάζονται το περιεχόμενο μάρκετινγκ, ώστε να μπορείτε να ορίσετε το start_url να /dashboard/index.html Έτσι, η εφαρμογή ξεκινά σε αυτήν τη σελίδα όταν ανοίγουν το PWA.

Βελτιωμένες μεταβάσεις

Οι μεταβάσεις προβολής μπορούν να αισθάνονται άγνωστες, εκτός τόπου, και ένα tad gaudy στο διαδίκτυο, αλλά είναι ένα κοινό χαρακτηριστικό των εγγενών εφαρμογών. Μπορούμε να ρυθμίσουμε μόνο τις μεταβάσεις PWA, περιτυλίγοντας κατάλληλα το σχετικό CSS:

@media (display-mode: standalone) {
  @view-transition {
    navigation: auto;
  }
}

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

Υποστήριξη και δοκιμή του προγράμματος περιήγησης

Η υποστήριξη του προγράμματος περιήγησης για τα ερωτήματα των μέσων προβολής είναι Καλό και εκτεταμένο. Ωστόσο, αξίζει να το σημειώσετε Ο Firefox δεν έχει υποστήριξη PWAκαι ο Firefox για το Android εμφανίζει μόνο PWA browser Λειτουργία, οπότε θα πρέπει να κάνετε τις απαραίτητες εκτιμήσεις. Ευτυχώς, η προοδευτική βελτίωση είναι στο πλευρό μας. Εάν ασχολούμαστε με ένα πρόγραμμα περιήγησης που δεν έχει υποστήριξη για τα PWAs ή αυτά τα ερωτήματα μέσων, θα αντιμετωπίσουμε χαριτωμένη υποβάθμιση.

Η δοκιμή PWAs μπορεί να είναι προκλητική επειδή κάθε συσκευή και το πρόγραμμα περιήγησης τους χειρίζεται διαφορετικά. Κάθε λειτουργία εμφάνισης συμπεριφέρεται ελαφρώς διαφορετικά σε κάθε συνδυασμό προγράμματος περιήγησης και OS.

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

Βουλώνω πάλι

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

Απόκρυψη περιττών προτροπών εγκατάστασης Για χρήστες που έχουν ήδη εγκαταστήσει την εφαρμογή,
Παρέχετε τα κατάλληλα βοηθήματα πλοήγησης Κατά τη δημιουργία ελέγχου του προγράμματος περιήγησης δεν είναι διαθέσιμα,
Προσαρμόστε το περιεχόμενο και τη λειτουργικότητα για να ταιριάζει με τις προσδοκίες των χρηστών σε διαφορετικά πλαίσια,
Δημιουργήστε περισσότερες εμπειρίες γέννησης αυτό το σεβασμό των συμβάσεων πλατφόρμας και
Ενισχύστε προοδευτικά την εμπειρία για δεσμευμένους χρήστες.

Το κλειδί είναι να θυμηθούμε ότι οι χρήστες PWA σε αυτόνομη λειτουργία έχουν διαφορετικές ανάγκες και προσδοκίες από τους τυπικούς επισκέπτες του ιστότοπου. Με την ανίχνευση και την ανταπόκριση σε τρόπους εμφάνισης, μπορούμε να δημιουργήσουμε εμπειρίες που αισθάνονται πιο γυαλισμένες, σκόπιμες και πραγματικά app-like.

Καθώς τα PWAs συνεχίζουν να ωριμάζουν, οι προσεγμένες εφαρμογές και η προσαρμογή θα γίνουν όλο και πιο σημαντικές για τη δημιουργία πραγματικά επιτακτικών εμπειριών εφαρμογών στο διαδίκτυο. Εάν είστε φαγούρα για ακόμα περισσότερες πληροφορίες και συμβουλές και κόλπα PWA, ελέγξτε τον “εκτεταμένο οδηγό της Ankita Masand για τις προοδευτικές εφαρμογές ιστού”.