Direkt zum Hauptbereich

Progressive Web App

In einem vorherigen Post habe ich meinen kleinen Notenrechner vorgestellt.

In diesem Post möchte ich basierend darauf eine Progressive Web App vorstellen welche Online wie Offline funktioniert. Und welche man auch dann laden kann wenn der Browser offline ist.

Die Seite sowie den Quellcode findet hier hier:

Notenrechner:
https://kayschneider.github.io/notenRechner/#/calc


Quellcode:
https://github.com/KaySchneider/notenRechner


Was genau eine Progressive Web App ist, wird hier erklärt:
https://developers.google.com/web/progressive-web-apps/

In diesem kleinen Notenrechner, widme ich mich nur der Offline Funktionalität der kleinen App. Der Notenrechner soll online und offline gleichermaßen funktionieren.

Dazu benötigen wir einen Service Worker, welcher uns den gewünschten content herunterlädt und beim Nutzer auf die Festplatte ablegt, dort kann nun auch im Offline Modus auf die Inhalte zugegriffen werden. Als positiver Nebeneffekt, lädt die Seite auch schneller zumindest beim zweiten Besuch der Seite da die Inhalte schon beim Nutzer liegen.

Wichtig ist als erstes ein manifest.json einzubinden und eure Seite muss via SSL ausgeliefert werden. Dazu kann man auch die gesamte check liste von google durchgehen:

https://developers.google.com/web/progressive-web-apps/checklist 

Hier  ein Beispielhaftes manifest.json:



Wichtig ist das das manifest.json folgende Attribute enthält:

  • name Der Name wird im Installations Banner angezeigt
  • short_name Dieser Name wird auf dem Home screen angezeigt und sollte kürzer sein 
Die Icons sollten in den unterschiedlichen größen hinterlegt werden, dies erleichtert das auffinden eurer progressive Web App auf dem Handy enorm. 
Das Attribute start_url enthält die zu startende Seite wenn der Nutzer die Anwendung startet. Hier kann man auch ein tracking Parameter hinzufügen start_url:"?utm_source=homescreen". Somit könnt ihr tracken wieviel Nutzer eure app wirklich auch vom Homescreen heraus starten.

Mit dem Attribut display kann man die Anwendung im Browser öffnen lassen oder standalone. Der standalone Modus fühlt sich mehr wie eine Anwendung an.
Mögliche Werte für das Attribut display:
  • browser Öffnet die Anwendung im Browser
  • standalone Öffnet die Anwendung im Standalone Modus(ähnlich wie eine App) 

Weiterführende Informationen zum Thema Web manifest finden sich hier:


Der wichtigste Teil in diesem Beitrag ist der Service Worker. 










Kommentare

Beliebte Posts aus diesem Blog

Web Development.......Gehalt.... TYPO3

Wie wäre es mal mit einem Mindestlohn für Internetprogrammierer??

Warum ich dies vordere?? Eine gute Frage, vor kurzem habe ich
ein Angebot bekommen um als Internetprogrammierer, bei
einer namentlich nicht genannten Firma, anzuheuern.
Das hört sich ja alles recht gut an, nur das Bruttogehalt bei
diesem Angebot getrug 1.500.-€.
Na dass ist ja der Wahnsinn... 1.500 €. Naja wie jeder oder
sage ich mal die meisten Web Developer wissen ist dass
nicht annähernd das Gehalt was man als Web Developer
bekommen sollte, oder bekommt!
Also ich fand diese email hatt es wirklich verdient hier einmal
genannt zu werden.
Ah ich erarbeite mir im Moment Typo3( da selbermachen nicht mehr in mode ist!! )
Und zu diesen zwecken schaute ich mich mal im Web um wer oder
was da sich nicht alles als "Typo3 Agentur" ausgiebt.

Dass sollte jeder von euch mal googeln ;-) macht wirklich laune.
Und für was mittlerweile Typo3 alles benutzt wird.
Einige Agenturen machen einfach jede Vereins/ Hinz und Kuntz Seite
mit typo3 ???…

Zertifizierte Online-Shops, trügerische Sicherheit!

Online Shopping Sicherheit Trusted Zertifikate gibt es mittlerweile wie Sand am Meer.
Doch was taugt ein Zertifizierter Shop überhaupt.
Was meinen die mit "trusted"...... ist "https" ?? Reicht dass schon ??

Ich habe mit das Zertifikat vom Tüv mal genauer unter die Lupe genommen. Und musste feststellen dass bei einigen Shops trotz (trusted, save, zertifiziert) und anderen ominösen Auszeichnungen. Es offensichtliche Sicherheitslücken gibt. Diese musste ich nicht suchen, sonder die sind mir geradezu ins Auge gesprungen.

Bei ciao.de zum Bleistift ist XSS möglich. Und das ohne Probleme und Einschränkungen. XSS ist allgemein bei vielen Shops möglich. Am besten ist es für einen Angreifer, Shop mit community und einem einheitlichen Login.

Es sind nicht nur mini Shops welche unsicher sind. Es sind OnlineShops von Beate-Uhse, Karstadt-Quelle etc dabei. Also nicht nur komische Läden wo niemand einkauft!!


So wird es leicht gemacht Daten auszulesen, und man kann den XSS Code sehr eff…