Hvordan konvertere WebApp som PWA med Push Notification

0 Shares

I denne artikkelen ser vi hvordan du konverterer en nettapplikasjon eller et nettsted til en PWA med en push-varsling ved hjelp av Firebase Cloud Messaging.

I den moderne verden blir de fleste nettapplikasjoner konvertert til en PWA (Progressive Web App) fordi den gir funksjoner som offline-støtte, push-varsling, bakgrunnssynkronisering. PWA-funksjoner gjør nettapplikasjonen vår mer som en innebygd app og gir en rik brukeropplevelse.

For eksempel har store selskaper som Twitter og Amazon konvertert webappen sin til PWA for mer brukerengasjement.

Innholdsfortegnelse

Hva er en PWA?

PWA = (Web App) + (noen native app-funksjoner)

PWA er din samme nettapp (HTML+CSS+JS). Den fungerer på samme måte som webappen din i alle nettlesere som den gjorde tidligere. Men det kan ha innebygde funksjoner når nettstedet ditt lastes inn i en moderne nettleser. Det gjør nettappen din kraftigere enn før, og den gjør den også mer skalerbar fordi vi kan forhåndshente og bufre eiendeler i frontend, det reduserer forespørsler til backend-serveren din.

Hvordan PWA er forskjellig fra Web App

Installerbar: Webappen din kan installeres som en innebygd app
Progressiv: Fungerer på samme måte som nettappen din, men med noen innebygde funksjoner
Native App Experience: Brukeren kan bruke og navigere Web App som en innfødt, når den er installert.
Lett tilgjengelig: I motsetning til nettappen vår, er det ikke nødvendig for brukerne våre å skrive inn nettadresser hver gang de besøker. Når den er installert, kan den åpnes med et enkelt trykk.
Applikasjonsbufring: Før PWA var den eneste bufringsmekanismen vår nettapp implementert med, ved å bruke HTTP-buffer som kun er tilgjengelig for nettleseren. Men med PWA kan vi cache ting ved å bruke selve koden på klientsiden som ikke er tilgjengelig i en nettapp.
(App/Play) butikkpublisering: PWA kan publiseres i Google Play Store og IOS App Store.

Konvertering av applikasjonen til PWA vil bare gjøre den kraftigere.

Hvorfor bedrifter bør vurdere PWA

Mens de fleste av kundene våre når oss og ber om å utvikle Web App-løsningen først, og deretter spør de etter Android- og iOS-apper. Alt vi skal gjøre er å bygge den samme funksjonaliteten i web-appen til Android/IOS-appen av et eget team som tar mer utviklingskostnader og mer tid til å markedsføre.

Men noen klienter har et begrenset budsjett, eller noen klienter kan tro at time to market er viktigere for produktet deres.

De fleste av klientkravene kan tilfredsstilles av PWA-funksjonene selv. For dem foreslår vi bare PWA og gir dem en idé om å konvertere PWAen som en Android-app ved å bruke TWA hvis de vil distribuere i Playstore.

Hvis kravet ditt virkelig trenger native applikasjonsfunksjoner som ikke kan tilfredsstilles av PWA. Kunder kan gå og utvikle begge applikasjonene som de ønsker. Men selv i det scenariet. De kan distribuere PWA i Play Store til Android-utviklingen er fullført.

Eksempel: Titan Eyeplus

Opprinnelig utviklet de en PWA-app og distribuerte den i lekebutikken ved å bruke TWA (Trusted Web Activity). Når de fullførte Android-applikasjonsutviklingen. De distribuerte sin ekte Android-applikasjon i lekebutikken. De oppnådde både time-to-market ved å bruke PWA og kostnadene ved utviklingen.

PWA-funksjoner

PWA gir våre nettapplikasjoner native app-lignende funksjoner.

Hovedfunksjonene er:

Installerbar: En nettapplikasjon installert som en innebygd app.
Caching: Applikasjonsbufring er mulig, noe som gir vår applikasjon offline-støtte.
Push-varsling: Push-varsling kan sendes fra serveren vår for å engasjere brukerne våre til nettstedet vårt.
Geofencing: Applikasjonen kan bli varslet av en hendelse når enhetens plassering endres.
Betalingsforespørsel: Aktiver betaling i applikasjonen din med en flott brukeropplevelse som en innebygd app.

Level Up brukeropplevelse med disse 6 Gamification-programvarene

Og mange flere funksjoner kommer i fremtiden.

Andre funksjoner er:

Snarveier: Raskt tilgjengelige URL-er lagt til i manifestfilen.
Web Share API: La applikasjonen din motta delte data fra andre applikasjoner.
Merke-API: For å vise antall varsler i din installerte PWA.
Periodic Background Sync API: lagrer brukerens data til den er koblet til nettverket.
Kontaktvelger: Brukes til å plukke kontakter fra brukerens mobil.
Filvelger: Brukes for å få tilgang til filen på lokalt system/mobil

Fordelen med PWA over Native Application

Den opprinnelige appen yter bedre enn PWA og har flere funksjoner enn PWA. Men likevel har den noen fordeler i forhold til den opprinnelige appen.

PWA kjører på tvers av plattformer som Android, IOS, Desktop.
Det reduserer utviklingskostnadene dine.
Enkel funksjonsimplementering sammenlignet med en innebygd app.
Lett å finne fordi PWA (nettsted) er SEO-vennlig
Sikkert fordi det bare fungerer på HTTPS

Ulemper med PWA fremfor native app

Begrensede funksjoner er tilgjengelig sammenlignet med en innebygd app.
PWA-funksjoner er ikke garantert å støtte alle enheter.
Merkevarebyggingen til PWA er lav fordi den ikke er tilgjengelig i appbutikken eller play-butikken.

Du kan distribuere din PWA som en Android-app i Play Store ved hjelp av Android Trusted Web Activity (TWA). Det vil hjelpe merkevarebyggingen din.

Ting som trengs for å konvertere Web App til PWA

For konvertering, hvilken som helst webapp eller nettsted til PWA.

Service-Worker: kjernen i enhver PWA-app for hurtigbufring, pushvarsling, en proxy for våre forespørsler.
Manifestfil: Den har detaljer om nettapplikasjonen din. Den pleide å laste ned applikasjonen vår som en innebygd app på startskjermen.
Applogo: Bilde av høy kvalitet 512 x 512 piksler for appikonet ditt. App-logoen er nødvendig for PWA på startskjermen, splash-skjermen osv. Så vi må lage et sett til 1:1-forholdsbilder for APPen vår ved å bruke alle verktøy.
Responsivt design: Nettappen skal være responsiv for å fungere på forskjellige skjermstørrelser.

Hva er Service Worker:

En tjenestearbeider (skript på klientsiden) er en proxy mellom web-appen din og den ytre siden, og leverer push-varsler for nettappen vår og støtter hurtigbufring.

Service Worker kjører uavhengig fra hovedjavascriptet. Så den har ikke tilgang til DOM API. Den kan bare få tilgang IndexedDB API, Hent API, Cache Storage API. Men den kan kommunisere med hovedtråden med et budskap.

Tjeneste levert av servicemedarbeider:

Avskjærer HTTP-forespørsler fra opprinnelsesdomenet ditt.
Motta pushvarsling fra serveren din.
Offline tilgjengelighet av applikasjonen vår

Tjenestearbeideren kontrollerer applikasjonen din og kan manipulere forespørslene dine, men den kjører uavhengig. Så av den grunn må opprinnelsesdomenet være aktivert med HTTPS for å unngå et mann-i-midten-angrep.

Hva er Manifest-filen

En manifestfil (manifest.json) har detaljer om PWA-appen vår for å fortelle nettleseren.

navn: Navnet på søknaden
short_name: Kort navn for søknaden vår. Hvis gitt
med både egenskapsnavn og short_name vil nettleseren ta short_name.
beskrivelse: Beskrivelse for å beskrive vår applikasjon.
start_url: For å spesifisere hjemmesiden til applikasjonen når vår PWA ble lansert.
ikoner: Sett med bilder for PWA for startskjermen osv.
background_color: For å angi bakgrunnsfargen til splash-skjermen i vår PWA-applikasjon.
display: For å tilpasse nettleserens brukergrensesnitt til å vises i PWA-appen vår.
theme_color: Temafarge for PWA-appen.
scope: URL-omfanget til søknaden vår å vurdere for PWA. Standard til plasseringen av manifestfilen som er lokalisert.
snarveier: Hurtigkoblinger for vår PWA-applikasjon.

Konverter Web App til PWA

For demoformålet har jeg laget en mappestruktur for tipsbilk.net-nettstedet med statiske filer.

index.html – hjemmeside
artikler/
- index.html – artikkelside
forfattere/
- index.html – forfatterside
verktøy/
- index.html – verktøyside
tilbud/
- index.html – tilbudsside

Hvis du allerede har en nettside eller nettapp, kan du prøve å konvertere den til PWA ved å følge trinnene nedenfor.

Topp 13 innholdsmarkedsføringsverktøy for vekst og engasjement

Lag nødvendige bilder for PWA

Først tar du applogoen din og beskjærer den i forholdet 1:1 i 5 forskjellige størrelser. jeg har brukt https://tools.crawlink.com/tools/pwa-icon-generator/ for å få forskjellige bildestørrelser raskt. Så du kan bruke den også.

Opprett en manifestfil

For det andre oppretter du en manifest.json-fil for nettapplikasjonen din med appdetaljene dine. For demoen har jeg laget en manifestfil for tipsbilk.net Website.

{
	"name": "tipsbilk.net",
	"short_name": "tipsbilk.net",
	"description": "tipsbilk.net 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": "tipsbilk.net - Authors",
			"url": "/authors",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Tools",
			"short_name": "Tools",
			"description": "tipsbilk.net - Tools",
			"url": "https://tipsbilk.net.com/tools",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Deals",
			"short_name": "Deals",
			"description": "tipsbilk.net - Deals",
			"url": "/deals",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		}
	]
}

Registrer Service-arbeider

opprette en skriptfil register-service-worker.js og service-worker.js i rotmappen.

Den første, register-service-worker.js, er javascript-filen som kjøres på hovedtråden som har tilgang til DOM API. Men service-worker.js er et service worker-skript som kjører uavhengig av hovedtråden og levetiden er også kort. Den kjører hver gang hendelser ringer servicearbeidere og kjører til den fullfører prosessen.

Ved å sjekke hovedtrådens javascript-fil kan du sjekke om tjenestearbeideren er registrert i den. hvis ikke kan du registrere service worker-skriptet (service-worker.js).

lim inn kodebiten nedenfor i register-service-worker.js:

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

Lim inn kodebiten nedenfor i 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.
});

Vi konsentrerte oss ikke om hvordan vi aktiverer hurtigbuffer for offline-støtte. Vi snakker bare om hvordan du konverterer nettapper til PWA.

Legg til manifestfil og skript i all head-taggen på HTML-siden din.

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

Oppdater siden etter at du har lagt til. Nå kan du installere applikasjonen din som nedenfor på mobil chrome.

På startskjermen blir appen lagt til.

Hvis du bruker WordPress. Prøv å bruke den eksisterende PWA-konverteringspluginen. For vueJS eller reactJS kan du følge metoden ovenfor eller bruke de eksisterende PWA npm-modulene for å raskere utviklingen din. Fordi PWA npm-moduler allerede er aktivert med frakoblet støttebufring, etc.

Aktiver pushvarsling

Web-push-varsler sendes til nettleseren for å få brukerne våre til å engasjere/samhandle med applikasjonen vår oftere. Vi kan aktivere det ved å bruke

Meldings-API: Den brukes til å konfigurere hvordan push-varslingen vår skal vises til brukeren.
Push API: Den brukes til å motta varslingsmeldinger sendt fra vår server til nettleseren.

Det første trinnet for å aktivere push-varsling i applikasjonen vår er å sjekke Notification API og få tillatelse fra brukeren til å vise et varsel. For det, kopier og lim inn kodebiten nedenfor i 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);
        });
    }
};

Hvis alt gikk som det skulle. Du vil motta et varsel fra applikasjonen.

«Varsling» i vinduet vil fortelle oss at Notification API støttes i den nettleseren. Notification.permission vil fortelle at brukeren har fått tillatelse til å vise varselet. Hvis brukeren tillot søknaden vår, vil verdien bli «gitt». hvis brukeren har avvist, vil verdien bli «blokkert».

Aktiver Firebase Cloud Messaging og opprett abonnement

Nå begynner den virkelige delen. For å sende varsler fra serveren din til brukeren trenger vi et unikt endepunkt/abonnement for hver bruker. Til det skal vi bruke Firebase-skymeldinger.

Omgå alle restriksjoner for å laste ned app-APK-er direkte til enheten din

Som et første trinn, opprett en firebase-konto ved å gå til denne linken https://firebase.google.com/ og trykk på kom i gang.

Opprett et nytt prosjekt med navn og trykk fortsett. Jeg skal lage den med navnet tipsbilk.net.

I neste trinn er Google Analytics aktivert som standard. Du kan slå på at vi ikke trenger det nå og trykke fortsett. Du kan aktivere det senere i firebase-konsollen hvis du trenger det.

Når prosjektet er opprettet, vil det se ut som nedenfor.

Gå deretter til prosjektinnstillingene og klikk på skymeldinger og generer nøkler.

Fra trinnene ovenfor har du 3 nøkler.

prosjektserver-nøkkel
Web-push-sertifikater privat nøkkel
Web push-sertifikater offentlig nøkkel

Lim inn kodebiten nedenfor i 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();

Lim inn kodebiten nedenfor i 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)
});

Nå er alt klart i front-end. Ved å bruke abonnementet kan du sende push-varsler til brukeren din når du vil inntil de ikke ble nektet push-tjenestene.

Push fra node.js Backend

Du kan bruke web-push npm-modul for å gjøre det enklere.

Eksempelbit for å sende push-varsling fra nodeJS-server.

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 tipsbilk.net-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 });
    });

Koden ovenfor vil sende en push-melding til abonnementet. Push-hendelsen i service-workeren vil bli utløst.

Push fra PHP Backend

For PHP-backend kan du bruke web-push-php komponistpakke. Sjekk eksempelkoden for å sende push-varsler nedenfor.

<?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 tipsbilk.net-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)
);

Konklusjon

Jeg håper dette gir deg en idé om å konvertere webapplikasjoner til PWA. Du kan sjekke kildekoden til denne artikkelen her og demo det her. Jeg har testet push-varslingen ved å sende den fra backend ved hjelp av eksempelkode også.