Entwickeln einer Nothing Progressive-Webanwendung in 15 Minuten

Google Play hat eine von Chilango Lab entwickelte App mit über einer Million Downloads und einer ziemlich hohen Bewertung. Es heißt Nichts , was als „Nichts“ übersetzt werden kann, und es ist insofern wunderbar, als es absolut nichts tut. Ein angenehmes Osterei ist zwar darin versteckt, aber das ändert nichts an der Sache. Wenn Sie diese Anwendung analysieren, stellt sich heraus, dass sie 14 MB groß ist und während der Installation 19,24 MB benötigt.


Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass er sich beim Betrachten dieser Anwendung gefragt habe, ob sie umgeschrieben werden könne, damit sie weniger Platz beanspruche.

Es gelang ihm. Er hat nämlich die Funktionalität von Nothing mithilfe von HTML, CSS und JavaScript neu erstellt und daraus eine progressive Webanwendung ( PWA , Progressive Web App) gemacht. Es funktioniert ohne Internetverbindung. Sie können es wie eine normale Anwendung vom Hauptbildschirm aus aufrufen. Der Hauptunterschied zwischen einer normalen Android-Anwendung und ihrer PWA-Kopie ist die Größe. Der erste, Rückruf, belegt 19,24 MB auf dem Gerät. Der zweite - 205 Kb.


Normale Anwendung und PWA

Symbole für nichts erstellen

Bevor ich Ihnen den Code erzähle, erstellen Sie ein Symbol für PWA Nothing. Um dieses Problem zu lösen, habe ich das hervorragende Open-Source- Tool Launcher Icon Generator verwendet .


Launcher Icon Generator

Mit dem Launcher-Symbolgenerator konnte ich buchstäblich sofort ein Symbol für meine Option "Nichts" erstellen. Das Programm generiert automatisch Symbole in verschiedenen Größen.

Pwacompat

Nachdem das Symbol fertiggestellt war, musste ich ein Manifest für die Webanwendung erstellen . Dank dessen zeigt der Chrome-Browser für Android beim Starten von PWA einen Begrüßungsbildschirm an. Ist es möglich, einen solchen Bildschirm auch in anderen Browsern anzuzeigen? Ja, das ist möglich, und dafür benötigen wir die PWACompat-Bibliothek, mit der wir genau das implementieren können, was wir brauchen. Zusammen mit dem Manifest reicht es aus, um eine Verbindung im PWA-Code herzustellen:

<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"    crossorigin="anonymous"></script> 

So sieht der Begrüßungsbildschirm in Safari (iOS) aus.


Safari-Begrüßungsbildschirm

Dies ist jedoch nicht auf die Funktionen von PWACompat beschränkt. Mit dieser Bibliothek können Sie insbesondere Meta-Tags für verschiedene Browser erstellen, die beschreiben, wie PWA geöffnet werden soll, und die Themenfarbe basierend auf dem Manifest der Webanwendung festlegen.

Hinzufügen einer Anwendung zum Startbildschirm

Eine meiner bevorzugten PWA-Funktionen heißt A2HS (Zum Startbildschirm hinzufügen). Dank dieser Funktion können Sie ein Symbol hinzufügen, um die Anwendung auf dem Hauptbildschirm zu starten. Ab Chrome 68 unter Android wird jetzt anstelle eines großen A2HS-Banners ein kleines Informationsfeld mit einem entsprechenden Vorschlag angezeigt.


Auf Wiedersehen A2HS-Banner (Chrome 67 und früher)

In jedem Fall ist das Dashboard eine Zwischenlösung, sobald diese Funktion aus Chrome entfernt wird. Also musste ich eine schönere A2HS-Schnittstelle für PWA Nothing erstellen.


Schaltfläche "Installieren" (links), Schaltfläche "Installieren" und A2HS-Bedienfeld (Mitte), Dialogfeld "Zum Startbildschirm hinzufügen" (rechts)

Wenn der Browser das Hinzufügen einer Anwendung zum Hauptbildschirm unterstützt, wird in diesem Fall oben auf der Seite die Schaltfläche Installieren angezeigt. Wenn der Benutzer auf diese Schaltfläche klickt, wird das Dialogfeld Zum Startbildschirm hinzufügen aufgerufen.

Hier ist der relevante Code.

 var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) {   event.preventDefault();   installPromptEvent = event;   btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () {   btnInstall.setAttribute('disabled', '');   installPromptEvent.prompt();   installPromptEvent.userChoice.then((choice) => {       if (choice.outcome === 'accepted') {           console.log('User accepted the A2HS prompt');       } else {           console.log('User dismissed the A2HS prompt');       }       installPromptEvent = null;   }); }); 

Wenn die Site die A2HS-Kriterien erfüllt, löst der Browser das Ereignis vor der beforeinstallprompt .

Osterei

Achtung, es wird einen Spoiler geben!


Genau genommen ist das PWA Nothing Easter Egg ein Konami-Code und ein 10-Stunden-Video auf YouTube .


Osterei rufen (hoch, hoch, runter, runter, links, rechts, links, rechts und zwei Berührungen)

Nachdem der Benutzer den Code eingegeben hat, öffnet PWA dieses Video .

Um meiner Anwendung Konami-Code-Unterstützung hinzuzufügen, habe ich die Konami-JS- Bibliothek verwendet. Es ist klein, einfach zu handhaben und unterstützt unter anderem mobile Geräte. Hier liegt der einzige Unterschied zwischen meiner PWA und der ursprünglichen Android-Anwendung. Insbesondere wenn ich bei der Eingabe des Codes zwei Berührungen vornehmen muss, müssen Sie in der ursprünglichen Anwendung das Bedienfeld mit den Schaltflächen verwenden.

Deaktivieren Sie die Seitenaktualisierung beim Ziehen

Ich hatte während der Arbeit an der Anwendung ein kleines Problem. Wenn ein Benutzer versucht, eine Seite auf einem mobilen Gerät nach unten zu strecken, führt dies zu einer Seitenaktualisierung (Pull-to-Refresh). Das brauche ich nicht.


Unerwünschte Seitenaktualisierung

Glücklicherweise ist der Umgang mit diesem Problem einfach. Sie benötigen lediglich eine Zeile CSS-Code :

 overscroll-behavior-y: contain 

Hosting

Netlify wurde als Hosting für PWA Nothing ausgewählt. Dies ist eine universelle Plattform für moderne Webprojekte. Der Grund, warum ich mich entschieden habe, meine Anwendung auf Netlify zu hosten, ist, dass hier alles sehr einfach zu konfigurieren ist. Darüber hinaus ist dies alles kostenlos.


Netlify-Systemsteuerung

Um ein Projekt auf Netlify bereitzustellen, können Sie eine von drei Methoden verwenden. Wir sprechen über Befehlszeilentools, über manuelle Bereitstellung und über kontinuierliche Bereitstellung.

▍ Netlify-Befehlszeilentools

Dies ist eine klassische Methode zum Bereitstellen von Webprojekten. Um es verwenden zu können, müssen Sie die Netlify-CLI installieren, sich bei Ihrem Konto anmelden, das Projekt initialisieren und bereitstellen. Es sieht so aus:

 > brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy 

▍Manuelle Bereitstellung

Diese Methode ist vielleicht die einfachste. Die Anwendungsbereitstellung erfolgt mit wenigen Mausbewegungen.


Manuelle Bereitstellung

Diese Funktion hat mir so gut gefallen, dass ich möchte, dass so etwas in Firebase angezeigt wird. Tatsächlich kommt es bei der Bereitstellung eines Projekts darauf an, seinen Ordner auf eine Webseite zu ziehen und dort abzulegen.

▍ Kontinuierliche Bereitstellung

Jetzt benutze ich diese spezielle Methode. Nachdem ich mein GitHub-Repository mit Netlify verknüpft habe, erstellt Netlify das Projekt automatisch und stellt es bereit, wenn ich den Code dorthin sende. Magie, sonst nicht.

▍HTTPS

Da PWAs über HTTPS von einer sicheren Quelle bereitgestellt werden müssen, musste ich sicherstellen, dass HTTPS auf meiner Site aktiviert war. Zwar musste ich mich in diesem Bereich nicht viel anstrengen, da Netlify kostenloses HTTPS für alle Domänen, einschließlich der eigenen Benutzerdomänen, bereitstellt.


Https

Darüber hinaus können Sie über das Netlify-Kontrollfeld den erzwungenen Übergang zu HTTPS ( HSTS ) aktivieren. Dies bietet fortlaufenden Schutz für die Site.

Projektanalyse mit Leuchtturm

Lighthouse ist ein automatisiertes Open-Source-Tool zur Verbesserung der Qualität von Webseiten. Mit seiner Hilfe können Sie jede Seite analysieren, die öffentlich ist oder eine Authentifizierung erfordert. Es ermöglicht Ihnen unter anderem, die Leistung und Zugänglichkeit von Seiten zu analysieren und fortschrittliche Webanwendungen zu erkunden.


Leuchtturm

Meine Anwendung erzielte 97 Punkte in Bezug auf die Leistung und 100 Punkte in anderen Indikatoren. Hier ist der vollständige Bericht .

Zusammenfassung

Wie Sie sehen können, ist eine progressive Webanwendung, die nichts bewirkt, viel kleiner als eine Android-Anwendung mit ebenso umfangreichen Funktionen. Hier können Sie PWA Nothing erleben. Und hier finden Sie den Quellcode.

Liebe Leser! Welche Android-Apps möchten Sie Ihrer Meinung nach in PWA-Form neu erstellen?