Durch die Nutzung von PWA zusammen mit Laravel können Sie eine progressive Web-App erstellen, die es Ihrer Website ermöglicht, eine mobile App nachzuahmen und gleichzeitig alle herkömmlichen Website-Funktionen beizubehalten. Den verfügbaren Daten zufolge kann PWA die Website-Leistung um 63 % steigern und weist eine durchschnittliche Ladezeit von 2,75 Sekunden auf. Darüber hinaus verspricht es eine Steigerung des Benutzerengagements um 68 % und einen Anstieg des Website-Verkehrs um 65 %.
Durch die Verwendung einer PWA (Progressive Web Apps) wird Ihre Website auf den Startbildschirmen der Benutzer „installierbar“. Es bleibt offline zugänglich und ermöglicht Push-Benachrichtigungen. IndexedDB ermöglicht umfangreiches Daten-Caching, einschließlich API-Anfragen. In diesem Leitfaden werde ich die grundlegende Konfiguration für einen schnellen Start mit Laravel 5.4 skizzieren. Um die Daten von Servicemitarbeitern beim Testen in Chrome zu untersuchen, greifen Sie auf Devtools zu und navigieren Sie zur Registerkarte „Anwendung“.
Bevor Sie sich mit dem Prozess befassen, ist es wichtig, einen Einblick in PWAs zu gewinnen und die Schritte dazu zu erkunden Stellen Sie Laravel Developers USA ein.
Was ist PWA?
Eine PWA (Progressive Web Apps erstellen), allgemein als PWA bezeichnet, stellt eine Webanwendung dar, auf die auf allen Geräten zugegriffen werden kann und die sowohl als mobile App als auch als Website dient und für die Erstellung progressiver Web-App-Erlebnisse konzipiert ist. Es bietet eine ideale Abhilfe, wenn Ihre E-Commerce-Website unter einer unterdurchschnittlichen Benutzererfahrung auf Mobilgeräten und schlechten Konversionsraten leidet. Selbst bei langsamer Internetverbindung bieten PWAs ein Benutzererlebnis, das nativen Apps ähnelt, und verlassen sich ausschließlich auf Standardtechnologien. Dies führt zu verbesserten Konversionsraten und einem optimierten Surferlebnis.
Im Laravel-Framework dienen JavaScript, Cascading Style Sheets und HTML als primäre Sprachen zur Erstellung progressiver Web-Apps. PWAs ähneln sowohl im Aussehen als auch in der Funktionalität herkömmlichen Websites und gewährleisten so ihre Auffindbarkeit über Webbrowser. Sie bieten jedoch mobile anwendungsähnliche Funktionen, einschließlich erhöhter Geschwindigkeit, Offline-Funktionen, Push-Benachrichtigungen und nahtloser Geräteintegration.
Darüber hinaus haben PWAs das Potenzial, progressive Web-Apps zu erstellen, die auf bekannten App-Marktplätzen wie Apples App Store und Google Play bereitgestellt werden können. Die genaue Definition von PWAs stellt eine Herausforderung dar, da es keine allgemein akzeptierte Konstruktionsmethode gibt. Folglich gibt es keine endgültige Wörterbuchbeschreibung. Google, der Erfinder, bietet in seiner formellen Einführung nicht viel Klarheit und lässt viele Fragen unbeantwortet. Dem Dokument zufolge ist PWA wie folgt definiert:
- zuverlässig – Es wird auch bei instabilen Netzwerkbedingungen schnell geladen.
- schnell – Bereitstellung nahtloser Animationen und Reaktion auf Benutzereingaben ohne Verzögerung beim Scrollen.
- Fesselnd – Es vermittelt den Eindruck einer nativen Smartphone-Anwendung und bietet ein umfassendes Benutzererlebnis.
Wenn Sie sich noch nicht im Klaren über das Progressive Web App-Konzept sind, schauen wir uns die Details an.
Was genau ist der Zweck der PWA?
Sie wissen vielleicht bereits, dass der Bereich E-Commerce einen beispiellosen und schnellen Wandel erlebt. Dieses Sprichwort hält sich schon seit einiger Zeit hartnäckig, aber in der heutigen Landschaft ist es wahrer denn je. Mobile-optimierter E-Commerce ist seit Jahren Standard und wächst stetig weiter. Die Zahlen belegen diesen Trend.
- Im Jahr 2014 übertraf die weltweite Nutzung mobiler Geräte erstmals die Nutzung von Desktop-Computern, wie von (comScore) berichtet.
- Es wird erwartet, dass der mobile Handel bis 2025 einen Einzelhandelsumsatz von 728,28 Milliarden US-Dollar erzielen wird, was 44,2 % des gesamten E-Commerce-Einzelhandelsumsatzes in den Vereinigten Staaten ausmacht (laut Business Insider).
- Laut Outerbox Design gaben 80 % der Verbraucher an, dass sie ihre mobilen Geräte in einem physischen Geschäft zu einem von drei Zwecken nutzen: Produktbewertungen lesen, Preise vergleichen oder alternative Ladenstandorte finden.
Vor diesem Hintergrund ist es ratsam, umgehend auf den mobilen Handel umzusteigen, falls Sie dies noch nicht getan haben. Sie können Ihre Ziele effizient und kosteneffektiv erreichen, indem Sie eine Progressive Web App (PWA) einführen, die eine Mobile-First-E-Commerce-Transformation ermöglicht.
Was ist Laravel?
Laravel ist ein Open-Source-PHP-Framework, das kostenlos heruntergeladen werden kann und die Entwicklung innovativer PHP-Anwendungen ermöglicht. Laravel hat in den letzten Jahren einen deutlichen Popularitätsschub erlebt. Programmierer entscheiden sich zunehmend dafür als primäres Framework, da es sich um ein robustes Ökosystem handelt, das seine nativen Funktionen nutzt, gepaart mit der Vielzahl kompatibler Pakete und Erweiterungen, die ihnen zur Verfügung stehen.
Laravel bietet eine Reihe erweiterter Datenbankfunktionen wie Eloquent, einen Object Relational Mapper (ORM) und integrierte Tools zum Erstellen von Datenbankmigrationen und Seedern. Artisan dient als Befehlszeilendienstprogramm, das Entwickler bei der effizienten Generierung neuer Anwendungselemente wie Modelle und Controller unterstützt.
Unsere Serie „Erstellen einer Links-Landingpage in PHP mit Laravel und Docker Compose“ bietet einen projektzentrierten Ansatz für Laravel. Es umfasst Aufgaben wie das Initiieren einer neuen Laravel-App innerhalb eines Container-Entwicklungs-Setups, die Anbindung an eine Datenbank und das Anpassen der Seitenvorlagenansicht, um eine kuratierte Auswahl an Links zu präsentieren.
Ist Laravel Frontend oder Backend?
Obwohl Laravel über spezifische Front-End-Funktionen verfügt, liegt sein Hauptaugenmerk auf dem Backend. Die Funktionalitäten von Laravel gehen jedoch über ein bestimmtes Frontend hinaus.
Wie funktioniert Laravel?
Gewinnen Sie Einblicke in die Art und Weise, wie Laravel Anfragen verwaltet, was oft als Anfragelebenszyklus bezeichnet wird, um die Fähigkeiten des Frameworks zu verstehen. Wie bereits erwähnt, arbeitet Laravel nach dem Model-View-Controller-Muster. Wenn in dieser Architektur ein Benutzer eine Anfrage initiiert, ruft der Controller Daten aus dem Modell ab und präsentiert sie anschließend in einer Ansicht. Die Datei public/index.php dient als Gateway zu einer Laravel-Anwendung. Es trägt die Verantwortung für die Initialisierung des Frameworks und den Erwerb einer neuen Anwendungsinstanz bei Erhalt einer Anfrage. Die Anwendungsinstanz ruft die Anforderung ab und leitet sie entweder an den Konsolenkernel oder den HTTP-Kernel weiter.
Der Kernel übernimmt die Verantwortung für die Definition der Middleware, die Anforderungen durchlaufen müssen, sowie einer Reihe von Bootstrappern, die vor der Anforderungsbearbeitung wichtige Aufgaben ausführen. Das Laden der Dienstanbieter der Anwendung ist ein integraler Bestandteil des Pre-Handling-Verfahrens.
Nach einem erfolgreichen Bootstrap und der Registrierung der Dienstanbieter übernimmt der Router die Verantwortung und bestimmt, ob die Anfrage einer Route zugewiesen oder an einen Controller weitergeleitet wird. Außerdem führt es bei Bedarf jede routenspezifische Middleware aus. Sobald eine Anfrage die erforderliche Middleware durchlaufen und verarbeitet hat, wird jede Antwort von einer Route oder Controller-Methode die Kette hinauf zur Ansicht übertragen.
Kann man mit Laravel eine PWA erstellen?
Mit Progressive Web Apps (PWAs) können Sie Ihre Webanwendung sowohl auf mobilen als auch auf Desktop-Geräten starten. Das Schreiben umfangreicher Zeilen nativen, plattformspezifischen Codes bleibt Ihnen erspart.
Mit Laravel PWA können Sie mit Laravel innerhalb weniger Minuten schnell eine PWA erstellen.
Schritt 1: Verwenden Sie den folgenden Befehl, um das Paket zu installieren:
Komponist benötigt ladumor/laravel-pwa
Schritt 2: Fügen Sie im Abschnitt „Provider“ der Konfigurationsdatei „app.php“ den Dienstanbieter hinzu. Wenn Sie es auf Laravel 6 oder höher installiert haben, können Sie diesen Schritt überspringen.
Schritt 3: Um die Fassade einzubinden, fügen Sie sie in den Abschnitt „aliases“ der Konfigurationsdatei app.php ein. Wenn Sie es auf Laravel 6 oder einer neueren Version installiert haben, können Sie diesen Schritt überspringen.
‘LaravelPwa’ => \Ladumor\LaravelPwa\LaravelPwa::class,
Schritt 4: Ich vertraue darauf, dass die Installation abgeschlossen ist und die Notwendigkeit entfällt, den nachfolgenden Befehl zur Asset-Veröffentlichung auszuführen.
php artisan laravel-pwa:publish
Schritt 5: Bitte stellen Sie sicher, dass Sie diesen wichtigen Schritt abschließen. Alle Ihre Vermögenswerte sind jetzt öffentlich zugänglich. Um Ihre Haupt-Blade-Datei fertigzustellen, müssen Sie ihre Komponenten verbinden, beispielsweise in der Datei app.blade.php.
Fügen Sie den folgenden Codeausschnitt in den Header der Haupt-Blade-Datei ein.
<!– PWA –>
<meta name=”theme-color” content=”#6777ef”/>
<link rel=”apple-touch-icon” href=”{{ asset(‘logo.PNG’) }}”>
<link rel=”manifest” href=”{{ asset(‘/manifest.json’) }}”>
Fügen Sie vor dem Schließen des Körpers den folgenden Code zur Root-Blade-Datei hinzu:
<script src=”{{ asset(‘/sw.js’) }}”>
</script>
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register(“/sw.js”).
then(function (reg) {
console.log(“Service worker has been registered for scope: ” + reg.scope);
});
}
</script>
Wenn Sie die manuelle Einrichtung der Verwendung dieses Pakets vorziehen, führt Sie dieser Artikel durch den Vorgang.
Welche Vorteile bietet die Entwicklung einer PWA mit dem Laravel Framework?
Aufgrund der herausragenden Leistung, der schnellen Ladezeiten und der Wiederverwendbarkeit des Codes von PWA können Sie die umfangreichen Framework-Funktionen von Laravel nutzen.
Darüber hinaus profitieren Sie von:
- Herrliche Benutzererfahrung (UX) auf verschiedenen Gerätetypen.
- Wir implementieren Ihr Programm in Konfigurationen für die Online- und Offline-Bereitstellung.
- Auch wenn keine Internetverbindung besteht, kann Ihre Anwendung weiterhin Push-Benachrichtigungen senden und empfangen.
- Es kann eine Vielzahl von Geräten aufnehmen und ist einfach zu montieren.
- Mit einem geringeren Platzbedarf bewältigt es problemlos erhebliche CPU-Anforderungen.
Ziel dieses Blogs ist es, eine umfassende Schritt-für-Schritt-Anleitung für die Erstellung einer PWA mit Laravel bereitzustellen.
Das könnte Ihnen gefallen: So funktioniert die Laravel-Leistungsoptimierung: 13 Tipps, die Sie befolgen sollten
Verwandeln Sie Ihre Anwendung mit Laravel in eine PWA: Eine umfassende Schritt-für-Schritt-Anleitung.
Befolgen Sie diese schnelle Methode, um Ihre Laravel-Anwendung in eine progressive Web-App (PWA) umzuwandeln. In nur wenigen Minuten sind Sie nach Abschluss des letzten Schritts bereit, Ihre ganz eigene progressive Web-App zu starten.
Schritt 1: Server bereitstellen
Bevor Sie beginnen, initiieren Sie die Laravel-Entwicklungsdienste. Stellen Sie sicher, dass weder NPM noch BrowserSync derzeit aktiv sind. Zum Einrichten des Servers.
php artisan serve
Bei der Verwendung von NPM oder BrowserSync zur Bereitstellung des Entwicklungsservers stößt die PWA auf Probleme. Das Problem entsteht, weil BrowserSync von einer virtuellen Maschine aus arbeitet. Obwohl der Servicemitarbeiter eine eindeutige URL registriert, zeichnet das Manifest daher den virtuellen Host auf. Daher wird die Installationsoption nicht im Browser angezeigt.
Schritt 2: Installieren Sie das Composer-Paket
Fügen Sie das Laravel PWA-Paket hinzu. Das Erreichen dieses Meilensteins ist bereits eine beeindruckende Leistung.
Brauche Silvio Leite/LaravelPwa beim Komponieren
Stellen Sie die Ressourcen und die Setup-Datei nach der Installation zur Verfügung.
Zum Beispiel: php artisan seller:publish -provider=“LaravelPWAProvidersLaravelPWAServiceProvider“
Sie finden die Datei „laravelpwa.php“ im Konfigurationsordner. Ändern Sie den Namen der App (Kurz- und Langform) und das Farbschema nach Bedarf, um sie mit dem Gesamtdesign zu harmonieren.
<?php
return [
‘name’ => ‘XYZ’,
‘manifest’ => [
‘name’ => env(‘APP_NAME’, ‘MY PWA APP’),
‘short_name’ => ‘PWA’,
‘start_url’ => ‘/’,
‘background_color’ => ‘#00be9c’,
‘theme_color’ => ‘#1c3c50’,
‘display’ => ‘standalone’,
‘orientation’=> ‘any’,
‘icons’ => [
’72×72′ => ‘/images/icons/icon-72×72.png’,
‘96×96′ => ‘/images/icons/icon-96×96.png’,
‘128×128’ => ‘/images/icons/icon-128×128.png’,
‘144×144’ => ‘/images/icons/icon-144×144.png’,
‘152×152’ => ‘/images/icons/icon-152×152.png’,
‘192×192’ => ‘/images/icons/icon-192×192.png’,
‘384×384’ => ‘/images/icons/icon-384×384.png’,
‘512×512’ => ‘/images/icons/icon-512×512.png’
],
‘splash’ => [
‘640×1136’ => ‘/images/icons/splash-640×1136.png’,
‘750×1334’ => ‘/images/icons/splash-750×1334.png’,
‘828×1792’ => ‘/images/icons/splash-828×1792.png’,
‘1125×2436’ => ‘/images/icons/splash-1125×2436.png’,
‘1242×2208’ => ‘/images/icons/splash-1242×2208.png’,
‘1242×2688’ => ‘/images/icons/splash-1242×2688.png’,
‘1536×2048’ => ‘/images/icons/splash-1536×2048.png’,
‘1668×2224’ => ‘/images/icons/splash-1668×2224.png’,
‘1668×2388’ => ‘/images/icons/splash-1668×2388.png’,
‘2048×2732’ => ‘/images/icons/splash-2048×2732.png’,
],
‘custom’ => []
]
];
Schritt 3: Ändern Sie die Bilder
Jedes Bild, einschließlich der Symbole und Begrüßungsbildschirme, wird in einem Array in der identischen Konfigurationsdatei dargestellt (wie oben gezeigt). PWAs erfordern eindeutige Symbole und Begrüßungsbildschirme, um ihren ordnungsgemäßen Betrieb sicherzustellen. Diese Bilder werden in das öffentliche Verzeichnis hochgeladen, das sich unter public/images/icons befindet.
Sie können die Größe jedes Symbols individuell anpassen.
[
‘path’ => ‘/images/icons/icon-512×512.png’,
‘sizes’ => ‘512×512’,
‘purpose’ => ‘any’
],
Schritt 4: Fügen Sie die Blade-Direktive ein
Um dies zu erreichen, muss die Blade-Direktive „@laravelPWA“ in das Layout der übergeordneten Ansicht eingefügt werden. Durch diese Aktion wird anschließend die Verfügbarkeit der Assets im Browser sichergestellt. Führen Sie diesen Schritt unbedingt jedes Mal aus, bevor Sie das Kopfetikett schließen.
<html>
<head>
<title>App</title>
…
@laravelPWA
</head>
<body>
…
@yield(‘content’)
…
</body>
</html>
Schritt 5: Nehmen Sie die Offline-Route
Was passiert, wenn die Netzwerkverbindung unterbrochen wird? In einem solchen Fall ist es wichtig, eine Offline-Route einzurichten, die mit einer Standardansicht reagiert. Um dies zu erreichen, ändern Sie die Routendateien unter „routes/web.php“, indem Sie Folgendes hinzufügen.
Route::get(‘/offline’, function () {
return view(‘modules/laravelpwa/offline’);
});
Schritt 6: Ändern Sie den Servicemitarbeiter
Wenn Sie Bedenken haben, die Kontrolle abzugeben, können Sie mit importScripts benutzerdefinierte Logik integrieren, um die Kontrolle zu behalten. Ebenso kann Ihr gewähltes Paket Ihren Servicemitarbeiter generieren. Im Wesentlichen spielen Servicemitarbeiter eine entscheidende Rolle bei der Erfüllung Ihrer spezifischen Bedürfnisse. Sie haben die Freiheit, Bibliotheken auszuwählen, die zu Ihrer bevorzugten Datenbank passen. Nachdem Sie das Plugin heruntergeladen und installiert haben, können Sie ein PWA-Projekt in Laravel starten.
Dennoch kann jede Anwendung den nachfolgenden Standard-Dienstanbietercode verwenden.
var staticCacheName = “pwa-v” + new Date().getTime();
var filesToCache = [
‘/offline’,
‘/css/app.css’,
‘/js/app.js’,
‘/images/icons/icon-72×72.png’,
‘/images/icons/icon-96×96.png’,
‘/images/icons/icon-128×128.png’,
‘/images/icons/icon-144×144.png’,
‘/images/icons/icon-152×152.png’,
‘/images/icons/icon-192×192.png’,
‘/images/icons/icon-384×384.png’,
‘/images/icons/icon-512×512.png’,
‘/images/icons/splash-640×1136.png’,
‘/images/icons/splash-750×1334.png’,
‘/images/icons/splash-1242×2208.png’,
‘/images/icons/splash-1125×2436.png’,
‘/images/icons/splash-828×1792.png’,
‘/images/icons/splash-1242×2688.png’,
‘/images/icons/splash-1536×2048.png’,
‘/images/icons/splash-1668×2224.png’,
‘/images/icons/splash-1668×2388.png’,
‘/images/icons/splash-2048×2732.png’
];
// Cache on install
self.addEventListener(“install”, event => {
this.skipWaiting();
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
)
});
// Clear cache on activate
self.addEventListener(‘activate’, event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames
.filter(cacheName => (cacheName.startsWith(“pwa-“)))
.filter(cacheName => (cacheName !== staticCacheName))
.map(cacheName => caches.delete(cacheName))
);
})
);
});
// Serve from Cache
self.addEventListener(“fetch”, event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
.catch(() => {
return caches.match(‘offline’);
})
)
})
Durch Ändern des nachfolgenden Codes können Sie die Service-Worker-Funktionalität anpassen.
public path/serviceworker.js
Schritt 7: Für die Offline-Ansicht anpassen
Sie können eine veröffentlichte Blade-Ansicht im Ansichtsordner/modules/laravelpwa/offline.blade.php finden, wenn Sie den Befehl „vendor:publish“ zum Veröffentlichen von Assets verwenden.
Nehmen Sie die erforderlichen Änderungen vor, um eine ordnungsgemäße Anzeige im Layout der übergeordneten Ansicht sicherzustellen, in dem sich die Direktive „@laravelPWA“ befindet.
@extends(‘layouts.app’)
@section(‘content’)
<h1>Customize this content</h1>
@endsection
Jetzt können Sie die Seite aktualisieren und Laravel nahtlos in der PWA-Anwendung weiter nutzen.
Bei der Installation wird automatisch eine Verknüpfung zur Web-App auf dem Startbildschirm des Geräts platziert. Sobald die App über den Startbildschirm geöffnet ist, wird die Navigation mühelos. Es ist weder die Zurück-Schaltfläche des Browsers noch die Schaltfläche „Nächste Seite“ erforderlich.
Letzter Gedanke
Die Erstellung einer PWA mit Laravel ist die einfachste Methode. Sie können eine PWA innerhalb weniger Minuten einrichten und in Betrieb nehmen. Darüber hinaus verhält es sich zunehmend wie eine native App. Wenn Sie auf Unsicherheit stoßen, konsultieren Sie die web.dev-Dokumentation für mögliche Lösungen.
