Γιατί οι προοδευτικές εφαρμογές Ιστού είναι το μέλλον της ανάπτυξης ιστού

«Το κλειδί είναι να αγκαλιάσουμε την αναστάτωση και να αλλάξουμε νωρίς. Μην αντιδράτε σε αυτό δεκαετίες αργότερα. Δεν μπορείτε να πολεμήσετε την καινοτομία. " - Ράιαν Κάβανου

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

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

PWA - Είναι πραγματικά καλό;

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

Το Accelerated Mobile Pages Project (AMP) με επικεφαλής το Twitter και το Google κυκλοφόρησε το 2016 για την επίλυση μόνο αυτών των προβλημάτων αργής σύνδεσης. Τα PWA λειτουργούν άψογα σε όλα τα πιθανά σενάρια. Με μια καλή σύνδεση, δεν υπάρχει ποτέ πρόβλημα. Το πρόβλημα είναι όταν δεν έχουμε καμία σύνδεση και υποδεχόμαστε με τη σελίδα σφάλματος.

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

Γιατί είναι λογικό να χρησιμοποιείτε το PWA

Σύμφωνα με μια μελέτη, ένας μέσος χρήστης ξοδεύει το 80% του συνολικού του χρόνου σε εφαρμογές μόνο σε τρεις από τις εφαρμογές του (Για μένα το Chrome, το Quora και το Medium).

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

Εγγενείς δυνατότητες εφαρμογών που μπορούν να χρησιμοποιούν οι PWA

  • Ειδοποιήσεις push
  • ΠΛΗΡΗΣ ΟΘΟΝΗ
  • Εργασία εκτός σύνδεσης
  • Υποστηρίζεται η οθόνη Splash δίνοντάς της μια πιο αίσθηση

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

Εγγενείς δυνατότητες εφαρμογών που οι PWA δεν μπορούν να χρησιμοποιούν από τώρα

  • Καμία ή εξαιρετικά περιοριστική πρόσβαση σε διαφορετικούς αισθητήρες υλικού
  • Συναγερμός
  • Πρόσβαση στον τηλεφωνικό κατάλογο
  • Τροποποίηση ρυθμίσεων συστήματος

Τα PWA εξελίσσονται αρκετά γρήγορα και ελπίζουμε να δούμε αυτές τις λειτουργίες να λειτουργούν πολύ σύντομα.

Δύο κύρια συστατικά ενός PWA

Εκδήλωση εφαρμογής

Είναι ένα αρχείο JSON που ορίζει ένα εικονίδιο εφαρμογής, πώς να ξεκινήσει η εφαρμογή (αυτόνομη, πλήρης οθόνη, στο πρόγραμμα περιήγησης κ.λπ.), καθώς και οποιεσδήποτε σχετικές πληροφορίες. Βρίσκεται στη ρίζα της εφαρμογής σας. Απαιτείται σύνδεσμος προς αυτό το αρχείο σε κάθε σελίδα που πρέπει να αποδοθεί.

Προστίθεται στην αρχική ενότητα της σελίδας HTML:

Service Worker

Service worker is where most of the magic of happens. Its nothing but JavaScript code that acts as programmable proxies solely responsible for intercepting and responding to network requests. Since it acts as a proxy and can be easily programmable, the application must be served over HTTPS to keep the data secure.

Its worth noting that the service worker caches the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

How do I get started?

The best thing about getting started is that it’s quite easier than it seems. In fact, it’s very much possible to take an existing site and convert into a PWA. I highly suggest you watch this if you intend to develop a PWA.

Thanks for reading! If you liked it, please support by clapping and sharing the post.