Πώς να μετατρέψετε την εφαρμογή Web ως PWA με ειδοποίηση Push

από
Tweet
Share
Share
Pin

Σε αυτό το άρθρο, βλέπουμε πώς να μετατρέψετε μια εφαρμογή Web ή έναν ιστότοπο σε PWA με μια ειδοποίηση Push χρησιμοποιώντας το Firebase Cloud Messaging.

Στον σύγχρονο κόσμο, οι περισσότερες εφαρμογές Ιστού μετατρέπονται σε PWA (Progressive Web App) επειδή παρέχει λειτουργίες όπως υποστήριξη εκτός σύνδεσης, ειδοποίηση push, συγχρονισμός φόντου. Οι δυνατότητες PWA κάνουν την εφαρμογή Ιστού μας περισσότερο σαν μια εγγενή εφαρμογή και προσφέρουν μια πλούσια εμπειρία χρήστη.

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

Τι είναι το PWA;

PWA = (Εφαρμογή Ιστού) + (μερικές λειτουργίες εγγενών εφαρμογών)

Το PWA είναι η ίδια εφαρμογή Ιστού σας (HTML+CSS+JS). Λειτουργεί το ίδιο με την εφαρμογή Ιστού σας σε όλα τα προγράμματα περιήγησης, όπως και στο παρελθόν. Αλλά μπορεί να έχει εγγενείς λειτουργίες όταν ο ιστότοπός σας φορτώνεται σε ένα σύγχρονο πρόγραμμα περιήγησης. Κάνει την εφαρμογή ιστού σας πιο ισχυρή από πριν και την καθιστά επίσης πιο επεκτάσιμη, επειδή μπορούμε να κάνουμε εκ των προτέρων ανάκτηση και αποθήκευση στοιχείων στο frontend, μειώνει τα αιτήματα στον διακομιστή υποστήριξης.

Πώς διαφέρει το PWA από το Web App

  • Με δυνατότητα εγκατάστασης: Η εφαρμογή Ιστού σας μπορεί να εγκατασταθεί σαν εγγενής εφαρμογή
  • Προοδευτική: Λειτουργεί όπως η εφαρμογή Ιστού σας, αλλά με ορισμένες εγγενείς λειτουργίες
  • Εγγενής εμπειρία εφαρμογής: Ο χρήστης μπορεί να χρησιμοποιήσει και να πλοηγηθεί στην εφαρμογή Ιστού σαν εγγενής, αφού εγκατασταθεί.
  • Εύκολα προσβάσιμο: Σε αντίθεση με την εφαρμογή ιστού μας, δεν χρειάζεται οι χρήστες μας να πληκτρολογούν διευθύνσεις ιστού κάθε φορά που επισκέπτονται. Μόλις εγκατασταθεί, μπορεί να ανοίξει με ένα μόνο πάτημα.
  • Προσωρινή αποθήκευση εφαρμογών: Πριν από το PWA, ο μόνος μηχανισμός προσωρινής αποθήκευσης με τον οποίο υλοποιήθηκε η εφαρμογή web μας είναι η χρήση της προσωρινής μνήμης HTTP που είναι διαθέσιμη μόνο στο πρόγραμμα περιήγησης. Αλλά με το PWA μπορούμε να αποθηκεύσουμε κρυφά πράγματα χρησιμοποιώντας τον ίδιο τον κώδικα από την πλευρά του πελάτη, ο οποίος δεν είναι διαθέσιμος σε μια εφαρμογή Ιστού.
  • Δημοσίευση καταστήματος (App/Play): Το PWA μπορεί να δημοσιευτεί στο Google Play Store και στο IOS App Store.

Η μετατροπή της εφαρμογής σας σε PWA θα την κάνει πιο ισχυρή.

Γιατί οι επιχειρήσεις πρέπει να εξετάσουν το PWA

Ενώ οι περισσότεροι πελάτες μας επικοινωνούν μαζί μας και ζητούν να αναπτύξουν πρώτα τη λύση Web App και μετά ζητούν εφαρμογές Android και iOS. Το μόνο που πρόκειται να κάνουμε είναι να δημιουργήσουμε την ίδια λειτουργικότητα στην εφαρμογή web για την εφαρμογή Android/IOS από μια ξεχωριστή ομάδα που απαιτεί περισσότερο κόστος ανάπτυξης και περισσότερο χρόνο για την αγορά.

Ωστόσο, κάποιος πελάτης έχει περιορισμένο προϋπολογισμό ή κάποιος πελάτης μπορεί να πιστεύει ότι ο χρόνος για την αγορά είναι πιο σημαντικός για το προϊόν του.

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

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

Παράδειγμα: Titan Eyeplus

Αρχικά, ανέπτυξαν μια εφαρμογή PWA και την ανέπτυξαν στο play store χρησιμοποιώντας το TWA (Trusted Web Activity). Μόλις ολοκληρώσουν την ανάπτυξη εφαρμογών Android. Ανέπτυξαν την πραγματική τους εφαρμογή Android στο play store. Πέτυχαν τόσο χρόνο για την αγορά χρησιμοποιώντας PWA όσο και το κόστος της ανάπτυξης.

Χαρακτηριστικά PWA

Το PWA παρέχει στις εφαρμογές Ιστού μας εγγενείς λειτουργίες που μοιάζουν με εφαρμογές.

  Πώς να ενημερώσετε το Safari σε iPhone και Mac

Τα κύρια χαρακτηριστικά είναι:

  • Με δυνατότητα εγκατάστασης: Μια εφαρμογή Ιστού εγκατεστημένη όπως μια εγγενής εφαρμογή.
  • Προσωρινή αποθήκευση: Η προσωρινή αποθήκευση εφαρμογών είναι δυνατή, γεγονός που παρέχει στην εφαρμογή μας υποστήριξη εκτός σύνδεσης.
  • Push Notification: Push Notification μπορεί να σταλεί από τον διακομιστή μας για να προσελκύσει τους χρήστες μας στον ιστότοπό μας.
  • Geofencing: Η εφαρμογή μπορεί να ειδοποιείται από ένα συμβάν κάθε φορά που αλλάζει η τοποθεσία της συσκευής.
  • Αίτημα πληρωμής: Ενεργοποιήστε την πληρωμή στην εφαρμογή σας με μια εξαιρετική εμπειρία χρήστη όπως μια εγγενής εφαρμογή.

Και πολλά άλλα χαρακτηριστικά που θα έρθουν στο μέλλον.

Άλλα χαρακτηριστικά είναι:

  • Συντομεύσεις: URL με γρήγορη πρόσβαση που προστέθηκαν στο αρχείο μανιφέστου.
  • Web Share API: Αφήστε την εφαρμογή σας να λαμβάνει κοινόχρηστα δεδομένα από άλλες εφαρμογές.
  • Badge API: Για εμφάνιση του αριθμού ειδοποιήσεων στο εγκατεστημένο PWA.
  • Periodic Background Sync API: αποθηκεύει τα δεδομένα του χρήστη σας μέχρι να συνδεθεί στο δίκτυο.
  • Επιλογέας επαφών: Χρησιμοποιείται για την επιλογή επαφών από το κινητό του χρήστη.
  • Επιλογέας αρχείων: Χρησιμοποιείται για πρόσβαση στο αρχείο σε τοπικό σύστημα/κινητό

Πλεονέκτημα του PWA έναντι της εγγενούς εφαρμογής

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

  • Το PWA εκτελείται σε cross-platform όπως Android, IOS, Desktop.
  • Μειώνει το κόστος ανάπτυξής σας.
  • Εύκολη ανάπτυξη χαρακτηριστικών σε σύγκριση με μια εγγενή εφαρμογή.
  • Εύκολα ανακαλύπτεται επειδή το PWA (ιστότοπος) είναι φιλικό προς το SEO
  • Ασφαλές γιατί λειτουργεί μόνο σε HTTPS

Μειονεκτήματα του PWA έναντι της εγγενούς εφαρμογής

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

Μπορείτε να αναπτύξετε το PWA σας ως εφαρμογή Android στο play store χρησιμοποιώντας το Android Αξιόπιστη Δραστηριότητα Ιστού (TWA). Θα βοηθήσει το branding σας.

Πράγματα που απαιτούνται για τη μετατροπή της εφαρμογής Web σε PWA

Για μετατροπή οποιασδήποτε εφαρμογής Ιστού ή ιστότοπου σε PWA.

  • Service-Worker: ο πυρήνας οποιασδήποτε εφαρμογής PWA για προσωρινή αποθήκευση, Pushes Notification, ένας διακομιστής μεσολάβησης για τα αιτήματά μας.
  • Αρχείο Manifest: Έχει λεπτομέρειες σχετικά με την εφαρμογή Ιστού σας. Κάποτε κατέβαζε την εφαρμογή μας σαν εγγενής εφαρμογή στην αρχική οθόνη.
  • Λογότυπο εφαρμογής: Εικόνα υψηλής ποιότητας 512 x 512 px για το εικονίδιο της εφαρμογής σας. Απαιτείται λογότυπο εφαρμογής για το PWA στην αρχική οθόνη, στην οθόνη εκκίνησης κ.λπ. Επομένως, πρέπει να δημιουργήσουμε εικόνες σε αναλογία 1:1 για την εφαρμογή μας χρησιμοποιώντας οποιαδήποτε εργαλεία.
  • Responsive Design: Η εφαρμογή web θα πρέπει να ανταποκρίνεται για να λειτουργεί σε διαφορετικά μεγέθη οθόνης.

Τι είναι το Service Worker:

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

Το Service Worker εκτελείται ανεξάρτητα από την κύρια Javascript. Άρα δεν έχει πρόσβαση στο DOM API. Έχει πρόσβαση μόνο IndexedDB API, Ανάκτηση API, Cache Storage API. Αλλά μπορεί να επικοινωνήσει με το κύριο νήμα με ένα μήνυμα.

Υπηρεσία που παρέχεται από εργαζόμενο σέρβις:

  • Υποκλοπή αιτημάτων HTTP από τον τομέα προέλευσής σας.
  • Λάβετε Push Notification από τον διακομιστή σας.
  • Διαθεσιμότητα της εφαρμογής μας εκτός σύνδεσης

Ο υπάλληλος σέρβις ελέγχει την εφαρμογή σας και μπορεί να χειριστεί τα αιτήματά σας, αλλά εκτελείται ανεξάρτητα. Για αυτόν τον λόγο, ο τομέας προέλευσης πρέπει να είναι ενεργοποιημένος με HTTPS για να αποφευχθεί μια επίθεση man-in-the-middle.

Τι είναι το αρχείο Manifest

Ένα αρχείο δήλωσης (manifest.json) έχει λεπτομέρειες σχετικά με την εφαρμογή PWA για να ενημερώσει το πρόγραμμα περιήγησης.

  • όνομα: Όνομα της αίτησης
  • short_name: Σύντομο όνομα για την αίτησή μας. Εάν παρέχεται
  • τόσο με το όνομα ιδιότητας όσο και με το short_name, το πρόγραμμα περιήγησης θα λάβει short_name.
  • περιγραφή: Περιγραφή για την περιγραφή της εφαρμογής μας.
  • start_url: Για να καθορίσετε την αρχική σελίδα της εφαρμογής κατά την εκκίνηση του PWA μας.
  • εικονίδια: Σύνολο εικόνων για PWA για Αρχική οθόνη κ.λπ.
  • background_color: Για να ορίσετε το χρώμα φόντου της οθόνης εκκίνησης στην εφαρμογή μας PWA.
  • εμφάνιση: Για να προσαρμόσετε τη διεπαφή χρήστη του προγράμματος περιήγησής μας ώστε να εμφανίζεται στην εφαρμογή PWA.
  • theme_color: Χρώμα θέματος της εφαρμογής PWA.
  • εύρος: Πεδίο διεύθυνσης URL της αίτησής μας προς εξέταση για PWA. Προεπιλογή στη θέση του αρχείου δήλωσης που βρίσκεται.
  • συντομεύσεις: Γρήγοροι σύνδεσμοι για την εφαρμογή μας PWA.
  Πορτραίτα Το πρόσωπο ρολογιού δεν λειτουργεί στο Apple Watch; Εδώ είναι η Διόρθωση!

Μετατρέψτε την εφαρμογή Web σε PWA

Για το σκοπό επίδειξης, έχω δημιουργήσει μια δομή φακέλου ιστότοπου grtechpc.org με στατικά αρχεία.

  • index.html – αρχική σελίδα
  • άρθρα/
    • index.html – σελίδα άρθρων
  • συγγραφείς/
    • index.html – σελίδα συγγραφέων
  • εργαλεία/
    • index.html – σελίδα εργαλείων
  • συμφωνίες/
    • index.html – σελίδα προσφορών

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

Δημιουργία απαιτούμενων εικόνων για PWA

Αρχικά, πάρτε το λογότυπο της εφαρμογής σας και περικόψτε το σε μέγεθος αναλογίας 1:1 σε 5 διαφορετικά μεγέθη. έχω χρησιμοποιήσει https://tools.crawlink.com/tools/pwa-icon-generator/ για να λαμβάνετε γρήγορα διαφορετικά μεγέθη εικόνας. Έτσι μπορείτε να το χρησιμοποιήσετε και εσείς.

Δημιουργήστε ένα αρχείο δήλωσης

Δεύτερον, δημιουργήστε ένα αρχείο manifest.json για την εφαρμογή Ιστού σας με τα στοιχεία της εφαρμογής σας. Για την επίδειξη, έχω δημιουργήσει ένα αρχείο δήλωσης για τον ιστότοπο grtechpc.org.

{
	"name": "grtechpc.org",
	"short_name": "grtechpc.org",
	"description": "grtechpc.org produces high-quality technology & finance articles, makes tools, and APIs to help businesses and people grow.",
	"start_url": "/",
	"icons": [{
		"src": "assets/icon/icon-128x128.png",
		"sizes": "128x128",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-152x152.png",
		"sizes": "152x152",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-192x192.png",
		"sizes": "192x192",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-384x384.png",
		"sizes": "384x384",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-512x512.png",
		"sizes": "512x512",
		"type": "image/png"
	}],
	"background_color": "#EDF2F4",
	"display": "standalone",
	"theme_color": "#B20422",
	"scope": "/",
	"shortcuts": [{
			"name": "Articles",
			"short_name": "Articles",
			"description": "1595 articles on Security, Sysadmin, Digital Marketing, Cloud Computing, Development, and many other topics.",
			"url": "https://geekflare.com/articles",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Authors",
			"short_name": "Authors",
			"description": "grtechpc.org - Authors",
			"url": "/authors",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Tools",
			"short_name": "Tools",
			"description": "grtechpc.org - Tools",
			"url": "https://grtechpc.org.com/tools",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Deals",
			"short_name": "Deals",
			"description": "grtechpc.org - Deals",
			"url": "/deals",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		}
	]
}

Εγγραφή Service-worker

δημιουργήστε ένα αρχείο σεναρίου register-service-worker.js και service-worker.js στον ριζικό φάκελο.

Το πρώτο, register-service-worker.js είναι το αρχείο javascript που θα εκτελείται στο κύριο νήμα που μπορεί να έχει πρόσβαση στο DOM API. Αλλά το service-worker.js είναι ένα σενάριο υπηρεσίας εργαζόμενου που εκτελείται ανεξάρτητα από το κύριο νήμα και η διάρκεια ζωής του είναι επίσης μικρή. Εκτελείται κάθε φορά που συμβάντα καλούν τους υπαλλήλους της υπηρεσίας και εκτελείται μέχρι να ολοκληρωθεί η διαδικασία.

Ελέγχοντας το αρχείο javascript του κύριου νήματος, μπορείτε να ελέγξετε εάν ο εργαζόμενος σέρβις είναι εγγεγραμμένος σε αυτό. Εάν όχι, μπορείτε να καταχωρήσετε το σενάριο του Service Worker (service-worker.js).

επικολλήστε το παρακάτω απόσπασμα στο register-service-worker.js:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js');
    });
}

Επικολλήστε το παρακάτω απόσπασμα στο service-worker.js

self.addEventListener('install', (event) => { // event when service worker install
    console.log( 'install', event);
    self.skipWaiting();
});

self.addEventListener('activate', (event) => { // event when service worker activated
    console.log('activate', event);
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) { // HTTP request interceptor
    event.respondWith(fetch(event.request)); // send all http request without any cache logic
    /*event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event. request);
        })
    );*/ // cache new request. if already in cache serves with the cache.
});

Δεν επικεντρωθήκαμε στο πώς να ενεργοποιήσουμε την προσωρινή μνήμη για υποστήριξη εκτός σύνδεσης. Μιλάμε μόνο για τον τρόπο μετατροπής εφαρμογών Ιστού σε PWA.

Προσθέστε αρχείο δήλωσης και σενάριο στην ετικέτα all head της σελίδας σας HTML.

<link rel="manifest" href="https://grtechpc.org.com/manifest.json">
<script src="/register-service-worker.js"></script>

Ανανεώστε τη σελίδα αφού προσθέσετε. Τώρα μπορείτε να εγκαταστήσετε την εφαρμογή σας όπως παρακάτω στο mobile chrome.

Στην αρχική οθόνη, η εφαρμογή προστίθεται.

Εάν χρησιμοποιείτε WordPress. Δοκιμάστε να χρησιμοποιήσετε την υπάρχουσα προσθήκη μετατροπέα PWA. Για vueJS ή reactJS, μπορείτε να ακολουθήσετε την παραπάνω μέθοδο ή να χρησιμοποιήσετε τις υπάρχουσες μονάδες PWA npm για να επιταχύνετε την ανάπτυξή σας. Επειδή οι μονάδες PWA npm είναι ήδη ενεργοποιημένες με την προσωρινή αποθήκευση υποστήριξης εκτός σύνδεσης, κ.λπ.

Ενεργοποίηση Push Notification

Οι ειδοποιήσεις push Web αποστέλλονται στο πρόγραμμα περιήγησης για να κάνουν τους χρήστες μας να ασχολούνται/αλληλεπιδρούν με την εφαρμογή μας πιο συχνά. Μπορούμε να το ενεργοποιήσουμε χρησιμοποιώντας

  • API ειδοποιήσεων: Χρησιμοποιείται για τη διαμόρφωση του τρόπου με τον οποίο θα εμφανίζεται η ειδοποίηση push μας στον χρήστη.
  • Push API: Χρησιμοποιείται για τη λήψη μηνυμάτων ειδοποίησης που αποστέλλονται από τον διακομιστή μας στο πρόγραμμα περιήγησης.

Το πρώτο βήμα για να ενεργοποιήσετε την ειδοποίηση push στην εφαρμογή μας είναι να ελέγξετε το Notification API και να λάβετε άδεια από τον χρήστη για την εμφάνιση μιας ειδοποίησης. Για αυτό, αντιγράψτε και επικολλήστε το παρακάτω απόσπασμα στο register-service-worker.js.

if ('Notification' in window && Notification.permission != 'granted') {
    console.log('Ask user permission')
    Notification.requestPermission(status => {  
        console.log('Status:'+status)
        displayNotification('Notification Enabled');
    });
}


const displayNotification = notificationTitle => {
    console.log('display notification')
    if (Notification.permission == 'granted') {
        navigator.serviceWorker.getRegistration().then(reg => {
            console.log(reg)
            const options = {
                    body: 'Thanks for allowing push notification !',
                    icon:  '/assets/icons/icon-512x512.png',
                    vibrate: [100, 50, 100],
                    data: {
                      dateOfArrival: Date.now(),
                      primaryKey: 0
                    }
                  };
    
            reg.showNotification(notificationTitle, options);
        });
    }
};

Αν όλα πήγαν σωστά. Θα λάβετε ειδοποίηση από την εφαρμογή.

  Εξαγωγή φωτογραφιών HD από ένα βίντεο στο iPhone σας

Η “Ειδοποίηση” στο παράθυρο θα μας πει ότι το API ειδοποιήσεων υποστηρίζεται σε αυτό το πρόγραμμα περιήγησης. Το Notification.permission θα πει ότι ο χρήστης έχει άδεια να εμφανίσει την ειδοποίηση. Εάν ο χρήστης επέτρεψε την εφαρμογή μας, η τιμή θα ‘χορηγηθεί’. Εάν ο χρήστης έχει απορρίψει, η τιμή θα «μπλοκαριστεί».

Ενεργοποιήστε το Firebase Cloud Messaging και δημιουργήστε συνδρομή

Τώρα αρχίζει το πραγματικό κομμάτι. Για την προώθηση ειδοποιήσεων από τον διακομιστή σας στον χρήστη χρειαζόμαστε ένα μοναδικό τελικό σημείο/συνδρομή για κάθε χρήστη. Για αυτό, θα χρησιμοποιήσουμε την ανταλλαγή μηνυμάτων cloud του firebase.

Ως πρώτο βήμα, δημιουργήστε έναν λογαριασμό firebase μεταβαίνοντας σε αυτόν τον σύνδεσμο https://firebase.google.com/ και πατήστε το ξεκίνημα.

  • Δημιουργήστε ένα νέο έργο με όνομα και πατήστε συνέχεια. Θα το δημιουργήσω με το όνομα grtechpc.org.
  • Στο επόμενο βήμα, το Google Analytics είναι ενεργοποιημένο από προεπιλογή. Μπορείτε να αλλάξετε ότι δεν το χρειαζόμαστε τώρα και να πατήσετε συνέχεια. Μπορείτε να το ενεργοποιήσετε αργότερα στην κονσόλα firebase, εάν χρειάζεται.
  • Μόλις δημιουργηθεί το έργο, θα μοιάζει όπως παρακάτω.

    • Στη συνέχεια, μεταβείτε στις ρυθμίσεις του έργου και κάντε κλικ στο cloud messaging και δημιουργήστε κλειδιά.

    Από τα παραπάνω βήματα, έχετε 3 κλειδιά.

    • κλειδί διακομιστή έργου
    • Ιδιωτικό κλειδί πιστοποιητικών Web push
    • Πιστοποιητικά Web push δημόσιο κλειδί

    Τώρα επικολλήστε το παρακάτω απόσπασμα στο register-service-worker.js:

    const updateSubscriptionOnYourServer = subscription => {
    console.log('Write your ajax code here to save the user subscription in your DB', subscription);
    // write your own ajax request method using fetch, jquery, axios to save the subscription in your server for later use.
};

const subscribeUser = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // paste your webpush certificate public key
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    })
    .then((subscription) => {
        console.log('User is subscribed newly:', subscription);
        updateSubscriptionOnServer(subscription);
    })
    .catch((err) => {
        if (Notification.permission === 'denied') {
          console.warn('Permission for notifications was denied')
        } else {
          console.error('Failed to subscribe the user: ', err)
        }
    });
};
const urlB64ToUint8Array = (base64String) => {
    const padding = '='.repeat((4 - base64String.length % 4) % 4)
    const base64 = (base64String + padding)
        .replace(/-/g, '+')
        .replace(/_/g, '/')

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
};

const checkSubscription = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    swRegistration.pushManager.getSubscription()
    .then(subscription => {
        if (!!subscription) {
            console.log('User IS Already subscribed.');
            updateSubscriptionOnYourServer(subscription);
        } else {
            console.log('User is NOT subscribed. Subscribe user newly');
            subscribeUser();
        }
    });
};

checkSubscription();

    Επικολλήστε το παρακάτω απόσπασμα στο service-worker.js.

    self.addEventListener('push', (event) => {
  const json = JSON.parse(event.data.text())
  console.log('Push Data', event.data.text())
  self.registration.showNotification(json.header, json.options)
});

    Τώρα όλα έτοιμα στο μπροστινό μέρος. Χρησιμοποιώντας τη συνδρομή, μπορείτε να στέλνετε ειδοποιήσεις push στον χρήστη σας όποτε θέλετε μέχρι να μην τους αρνηθούν τις υπηρεσίες push.

    Push από το node.js Backend

    Μπορείτε να χρησιμοποιήσετε το web-push μονάδα npm για ευκολότερη.

    Παράδειγμα αποσπάσματος για αποστολή ειδοποίησης push από τον διακομιστή nodeJS.

    const webPush = require('web-push');
    // pushSubscription is nothing but subscription that you sent from your front-end to save it in DB
    const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    //your web certificates public-key
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    //your web certificates private-key
    const vapidPrivateKey = 'web-certificate private key';

    var payload = JSON.stringify({
      "options": {
        "body": "PWA push notification testing fom backend",
        "badge": "/assets/icon/icon-152x152.png",
        "icon": "/assets/icon/icon-152x152.png",
        "vibrate": [100, 50, 100],
        "data": {
          "id": "458",
        },
        "actions": [{
          "action": "view",
          "title": "View"
        }, {
          "action": "close",
          "title": "Close"
        }]
      },
      "header": "Notification from grtechpc.org-PWA Demo"
    });

    var options = {
      vapidDetails: {
        subject: 'mailto:[email protected]',
        publicKey: vapidPublicKey,
        privateKey: vapidPrivateKey
      },
      TTL: 60
    };

    webPush.sendNotification(
      pushSubscription,
      payload,
      options
    ).then(data => {
      return res.json({status : true, message : 'Notification sent'});
    }).catch(err => {
      return res.json({status : false, message : err });
    });

    Ο παραπάνω κωδικός θα στείλει μια ειδοποίηση push στη συνδρομή. Το συμβάν push στο service-worker θα ενεργοποιηθεί.

    Push από το Backend της PHP

    Για backend PHP μπορείτε να χρησιμοποιήσετε το web-push-php πακέτο συνθέτη. Ελέγξτε το παράδειγμα κώδικα για να στείλετε ειδοποιήσεις push παρακάτω.

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

require __DIR__.'/../vendor/autoload.php';
use MinishlinkWebPushWebPush;
use MinishlinkWebPushSubscription;

// subscription stored in DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = array (
'options' =>  array (
                'body' => 'PWA push notification testing fom backend',
                'badge' => '/assets/icon/icon-152x152.png',
                'icon' => '/assets/icon/icon-152x152.png',
                'vibrate' => 
                array (
                  0 => 100,
                  1 => 50,
                  2 => 100,
                ),
                'data' => 
                array (
                  'id' => '458',
                ),
                'actions' => 
                array (
                  0 => 
                  array (
                    'action' => 'view',
                    'title' => 'View',
                  ),
                  1 => 
                  array (
                    'action' => 'close',
                    'title' => 'Close',
                  ),
                ),
),
'header' => 'Notification from grtechpc.org-PWA Demo',
);

// auth
$auth = [
    'GCM' => 'your project private-key', // deprecated and optional, it's here only for compatibility reasons
    'VAPID' => [
        'subject' => 'mailto:[email protected]', // can be a mailto: or your website address
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recommended) uncompressed public key P-256 encoded in Base64-URL
        'privateKey' => 'your web-certificate private-key', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
    ],
];

$webPush = new WebPush($auth);

$subsrciptionData = json_decode($subsrciptionJson,true);


// webpush 6.0
$webPush->sendOneNotification(
  Subscription::create($subsrciptionData),
  json_encode($payloadData) // optional (defaults null)
);

    συμπέρασμα

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