Inhalt
- Den Opstig vu PWAen
- PWAs an Aktioun haut
- Installatioun
- Offline an direkt starten
- Éischtklassescht Erliefnes
- App Geschäfter
- Plattform Integratioun
- Design an UX Erausfuerderungen
- D'Joer vu PWAen
Just wéi reaktiounsfäeger Webdesign de Spalt tëscht Desktop an Handysäiten e puer Joer zougemaach huet, progressiv Web App Techniken de Moment de Spalt tëscht dem Web an der App Welt zou. Mat Benotzererfarunge vu Desktop bis mobil Apps séier konvergéiert, schéngt et wéi wann e vill méi schlanken, méi effizienten Internet sech entwéckelt - awer zwangsleefeg net ouni e puer bedeitend Ännerungen u sengem Basisgrond genetesche Code.
- Wéi eng Progressiv Web App ze bauen
Evidentlech sinn et e puer bedeitend selektiv Drock déi dëst dreiwen. Als éischt, natierlech Appe fir all Nisch ze kreéieren ass net onbedéngt eng effizient Notzung vu Ressourcen: Benotzer kommen mat honnerte vu groussen Apps verschwend Bandbreet a wäertvoll Disk Space a Firme verbréngen vill Suen fir Apps ze kreéieren nëmme fir datt se opginn. no hiren éischte Versiounen. An déi meescht vun dësen Apps gi just vum Webinhalt ugedriwwen: Informatioune kommen aus Webservicer oder engem Content Management System.
D'Definitioun vun enger progressiver Web App ass net konkret. Eng PWA ass just eng Web App déi e puer nei APIen a Fäegkeeten an der Webplattform benotzt mat progressiver Verbesserung fir eng appähnlech Erfahrung op all Plattform mat der selwechter Codebasis ze bidden. Et ass méi e Set vu beschten Praktiken an API Benotzung déi eng exzellent App-ähnlech Erfahrung fir Är Benotzer erstellt, also ass et net wéi Dir e PWA hutt oder net hutt; et ass méi wéi Äre Site méi oder manner PWA ass.
Sidd Dir amgaang en neie Site ze bauen? Probéiert e Site Builder ze benotzen. A gitt sécher datt Dir och de Support kritt vun engem anstännege Webhosting Service. Oder fir eppes liicht anescht, kuckt eise Guide fir déi bescht Cloud Späichere.
Den Opstig vu PWAen
Wärend den Numm PWA am Joer 2015 am Artikel Escaping Tabs Ouni Verléiere vun eiser Séil gouf vum Alex Russell geschafft bei Google fir d'Chrome Team, hir Rees huet eigentlech net do ugefaang. Mir hu fréier HTML Uwendungen (HTAs), déi vu Microsoft am Joer 1999 erstallt goufen, zesumme mat villen anere Web App Plattformen vun Nokia, BlackBerry an aner Firmen. Dunn, am Joer 2007, huet de Steve Jobs presentéiert wat deemools deen eenzege Wee war fir Apps fir den originale iPhone ze kreéieren: PWAs, awer mat engem aneren Numm. Chrome huet vun do ugefaang, d'API e puer Joer méi spéit verbessert an de PWA Numm erfonnt.
Mat esou vill fréiere gescheitert Erfarungen, déi versichen Webinhalter an d'Welt vun Apps ze bréngen, firwat denken mir datt et elo funktionnéiert? Gutt primär ass et un de Firmen déi elo schaffen an d'Technologien hannert PWAs promoten, wéi Microsoft, Google, Apple a Mozilla, fir nëmmen e puer ze nennen. Och d'Performance vun der Webplattform huet e Punkt erreecht wou et keen erkannten Ënnerscheed gëtt wann Dir e gutt entwéckelt PWA mat enger natierlecher App vergläicht. Dës Konditioune hunn nach ni virdru existéiert an dat ass ee Grond datt d'Webgemeinschaft decidéiert huet datt d'Zäit fir PWAs komm ass.
PWAs an Aktioun haut
Haut PWAs si voll funktionell an installéierbar op:
- Android mat de meeschte Browser, mat Chrome déi bescht Erfahrung
- iOS mat Safari
- Chromebooks
- Windows 10 vum Microsoft Store
- Feature Telefonen mat KaiOS - eng Gabel vum Firefox OS - aktuell verfügbar fir Millioune Benotzer haaptsächlech an Indien
Ënnerstëtzung kënnt och op macOS, Windows a Linux duerch Chrome spéider dëst Joer. Et ass haut als experimentelle Fändel 'Desktop PWA' verfügbar wann Dir et elo wëllt probéieren. Installatioun op Windows on Edge ouni d'Benotzung vum Geschäft kënnt och méi spéit, och wa kee spezifeschen Zäitrahmen definéiert ass.
Wann Dir d'Lëscht nei liest, kënnt Dir gesinn all Plattform huet oder ass amgaang Ënnerstëtzung fir voll installéierbar PWAs an de folgende Méint ze hunn. A well eng PWA just eng Websäit ass mat Features uewen déi nëmmen op kompatibel Browser aktivéiert ginn, kënne mir souguer soen datt se kompatibel mat all Browser vu senger Basisfunktionalitéit ass.
Och PWAs ginn de Moment aus de meeschte CLIs fir verschidde Kadere generéiert, abegraff de Angular 6+ CLI, React Create App, PWA Starter Kit vu Polymer a Preact CLI. Schlussendlech koum d'Ionic Framework Team op d'Iddi vum Capacitor, en Open-Source Cordova Ersatz deen natierlech PWAs an all App Store méiglech mécht.
Installatioun
Ee vun de kriteschen Aspekter vun enger PWA ass d'Installatioun vun der App. Dëse Prozess gëtt an zwee optional Schrëtt gemaach: den Download an d'Ofline Späicheren vun den App Dateien an d'Ikon Installatioun am OS. Well béid Schrëtt optional sinn, kënnt Dir en Offline-Erfarung am Browser ubidden oder Dir kënnt eng Ikon ouni Offline-Installatioun ubidden. Awer e richtege PWA sollt béid enthalen: et muss mat TLS ënner HTTPS zerwéiert ginn an de Benotzer entscheet ob hien et am Browser benotzt oder an engem eegene installéiert Ikon.
Offline an direkt starten
D'Gehir vun enger PWA ass de Service Worker, eng JavaScript Datei installéiert op dem Benotzer Apparat deen verantwortlech ass fir d'Dateien vun der App erofzelueden, se an e Cache ze späicheren a spéider ze servéieren wann néideg. Wann de Service Worker installéiert ass, handelt et wéi en Netzwierk Proxy fir all Ressource déi d'Web App brauch: et kann decidéieren se aus dem Netzwierk ze sichen oder se aus dem lokalen Cache ze liwweren, wat d'App offline verfügbar mécht an och verfügbar just e puer Millisekonnen, och wann de Benotzer eng Verbindung huet, emuléiert en natierlechen App Start.
Fir e Serviceaarbechter z'installéieren, muss Äert HTML Dokument eppes enthalen wéi:
wann ('serviceWorker' am Navigator) navigator.serviceWorker.register ("sw.js");
Dat installéiert d'Datei "sw.js" op den Apparater vun de Benotzer fir den aktuellen Dossier an der aktueller Domain - e Konzept dat bekannt ass wéi den Ëmfang. Nodeems et installéiert ass, ginn déi nächst Visiten op all URL a sengem Ëmfang vun deem Serviceaarbechter geréiert.
Loosst eis soen datt mir e PWA mat véier Dateien hunn: index.html, app.js, app.css a logo.png. Déi éischt Saach ass dës Dateien an de Cache an der sw.js Datei z'installéieren.
const Ressourcen = ["index.html", "app.js", "app.css", "logo.png"]; selwer. addEventListener ("installéieren", event => {event. waitUntil (caches.open ("myPWAcache"). duerno (cache => cache.addAll (Ressourcen)));});
Dann fir datt d'PWA ëmmer vum Cache zerwéiert gëtt, musse mir no der Ofhuelung am Serviceaarbechter lauschteren an decidéieren d'Cache Politik ze benotzen, wéi zB Cache als éischt mat dem folgenden Ausschnëtt.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). dann (res => res);
An dësem Fall, all Kéier wann de Benotzer op d'PWA zougräift (souwuel vun engem Browser oder vun engem installéiert Ikon), kritt de Motor d'Fichier'en aus dem Cache. E Virdeel vu PWAs versus native Apps ass datt Geräter net all d'Dateien erofluede mussen wann et eng Ännerung gëtt, nëmmen d'Datei déi mat engem transparenten Prozess geännert huet. Och kënne mir nach ëmmer Deeler vun der App op Ufro eroflueden.
Awer d'Erausfuerderung ass wéi wësst Dir wéi eng Dateien um Server aktualiséiert goufen sou datt Dir se am Cache ersetze kënnt? Wann Dir net e Low-Level Service Worker schreiwe wëllt fir dëst ze managen, kënnt Dir d'Open-Source Bibliothéik Workbox benotzen, déi Iech hëllefe mat der Generatioun vum Service Worker an dem Ressource Manifest fir den installéiert Package z'aktualiséieren.
Maacht Iech bewosst datt d'Fichiere vun Ärem PWA geläscht ginn wann et Späicherdrock op dem Apparat ass, ausser Dir bestänneg Lagerung ufreet wann et verfügbar ass:
wann ('Lagerung' am Navigator && 'bestoe bleift' an navigator.storage) navigator.storage.persist ();
Op Chrome an déi meescht Android Browser kann Är App net méi wéi fënnef Prozent vum verfügbare Raum benotzen; op iOS ass et 50MiB (no bei 50MB) pro Host nëmmen; am Edge ass et variabel no der totaler Gedächtnisgréisst an am Windows Store ass et onlimitéiert.
Éischtklassescht Erliefnes
Mir hunn d'Gehir an elo ass et Zäit fir d'Häerz: de Web App Manifest. Den Zweck vun enger Websäit an eng PWA ze maachen ass net nëmmen ze garantéieren datt se séier verfügbar ass oder wärend offline awer och fir et z'erméiglechen seng eege Ikon am OS ze hunn an eng ganz eegestänneg Erfahrung ze bidden wéi all aner installéiert App.
De Manifest ass eng JSON Datei déi Metadate fir d'PWA definéiert déi vun engem Browser oder engem App Store benotzt ginn fir d'Installatiounsverhalen ze definéieren.
De Fichier definéiert verschidde Properties als Metadaten fir Är PWA. All OS liest dës Eegeschaften a probéiert säi Bescht fir d'Erfahrung ze passen déi Dir léiwer hutt. Zum Beispill Android liest 'Display: Standalone' an erstellt eng normal App Experienz. Mat 'Display: minimal-ui' erstellt en Experienz mat enger sichtbarer URL an TLS Zertifika - nëtzlech fir Sécherheetsempfindlech Apps. Mat 'Display: Vollbildschirm' erstallt et komplett immersive Apps ouni Statusbar oder sichtbar Réck Knäppchen. E Set vu Ikonen a Faarwen definéiert wéi d'Sprëtzschiermer oder d'Titellars fir d'Fënster vun Ärer App ausgesinn.
Et ginn e puer Manifestatiounsgeneratoren, wéi zum Beispill Web App Manifest Generator oder PWA Builder, déi och d'Ikon fir Iech a verschiddene Resolutioune veränneren, wann Dir eng héich Opléisung bitt (minimum 512 Pixel).
Wann Dir d'Manifestdatei an Ärem HTML Dokument verlinkt hutt, kënnen d'Benotzer d'App installéiere mat ënnerschiddlechen Techniken ofhängeg vum Browser, normalerweis genannt Add to Home Screen, Install oder just Add. Wann Äre PWA vu Bing duerchkrabbar ass, füügt Microsoft et automatesch an de Microsoft Store bäi sou datt Windows 10 Benotzer et fäeg installéiere kënnen.
Op e puer Betribssystemer wäert Är PWA d'Fäegkeet hunn Links ze fänken. Dëst bedeit datt nodeems de Benotzer d'App installéiert huet, all URL am Kader vun Ärem Manifest bannent de Grenze vun Ärer App opgemaach gëtt an net am Browser, egal ob se am Browser oder an aneren Apps wéi WhatsApp, Facebook erschéngt oder eng E-Mail.
Wann Dir de PWA Ufuerderunge passéiert, déi mir hei definéieren, ginn e puer Plattformen Ambient Badging (e klengt Symbol normalerweis an der URL Bar, uginn datt de Web installéierbar ass) oder e Web App Banner. Wann Dir et virzitt, kënnt Dir och Ären eegene Installatiounsknäppchen mat folgendem Stéck bäifügen:
window.addEventListener ("beforeinstallpr ompt", Funktioun (e) {e.prompt (); // weist d'Installatioun natierlech Prompt})
Wann de PWA installéiert ass, gëtt d'Evenement 'appinstalléiert' op de Fënsterobjekt geschoss, fir datt Dir Statistiken verfollegt, déi no lauschteren.
App Geschäfter
Ee vun de wichtegste Virdeeler vun der Installatioun vun engem Browser ass et fäeg ze sinn den App-Store Zustimmungsprozess ze vermeiden oder ze bezuelen fir e Verlag ze sinn. Dat kënnt mat offensichtleche Virdeeler, wéi Instant Verëffentlechung, privat Apps fir Firme kreéieren oder Apps déi net an de Geschäfter akzeptéiert solle ginn.
Awer verschidde Firme wëllen am Geschäft sinn. Vun haut un sinn déi eenzeg Geschäfter déi offiziell PWAs akzeptéieren de Windows Store an de kaiOS Store. Glécklech, mat Tools wéi Capacitor (aktuell an Alpha) oder PWA Builder, kënne mir natierlech Pakete fir aner Plattformen erstellen an ënnerschreiwen.
Et ginn e puer PWAs déi schonn am Google Play Store publizéiert goufen, wéi Twitter Lite a Google Maps Go, aktuell ënner personaliséierten Implementatiounen. Chrome bitt eng Léisung vu Chrome 68 iwwer vertraut Webaktivitéiten. Vun dësem Zäitpunkt kënne mir en Android Package (APK) mat engem Launcher op eise PWA erstellen an an de Buttek eroplueden. Fir de Microsoft Store op Windows 10 hëlleft de Site PWA Builder de Moment mat der Generatioun vun engem APPX Windows 10 Package. Mat enger Webvisioun kënnt Dir eventuell manuell eng iOS App fir den App Store erstellen awer sidd extrem virsiichteg mat de Regele vum Store.
Plattform Integratioun
Duerch d'Ëmsetzung vun fortschrëttleche Verbesserungstechniken kënnt Dir vill Features benotzen, dorënner Push Notifikatiounen, Kamera a Mikrofon Zougank, Geolokalisatioun, Sensoren, Bezuelungen, Deelen Dialogen an Offline Speicher. All dës Features lafen direkt am Sécherheetsmodell vum Browser, abegraff Erlaabnis Dialogen.
Mir kënnen och mat aneren Apps iwwer URI Scheme kommunizéieren, sou wéi Twitter, YouTube oder WhatsApp duerch hir URLen oder personaliséiert URIs opzemaachen, wéi whatsapp: //.
Schlussendlech, wann Dir natierlech PWAs erstellt, déi an de Buttek mam Capacitor oder dem Microsoft Store verëffentlecht ginn, kënne mir op natierlech APIen iwwerbrécken, déi et erméiglechen praktesch all natierlechen Code auszeféieren. Dës Integratioun mam Windows 10 enthält Hardware Zougang awer och Integratioun mam OS, bitt Optiounen wéi Pin to Start. Zum Beispill, den Twitter PWA léisst Iech all Benotzer op Äre Startschierm pinnen.
Design an UX Erausfuerderungen
PWAs ze designen huet eenzegaarteg Erausfuerderungen, sou datt et wichteg ass Zäit ze recherchéieren, sou vill wéi méiglech ze testen an déi folgend ze berécksiichtegen:
- D'Benotzer erwaarden App-ähnlech Erfahrungen.
- Den Installatiounsprozess ass nach ëmmer nei, dofir musse mir extra Efforte maachen fir z'erklären wéi d'App installéiert gëtt.
- D'App aktualiséieren am Hannergrond ouni Benotzerinteraktioun ass super awer et füügt och e puer Erausfuerderunge fir d'UX bäi.
- Um Desktop, reaktiounsfäeger Webdesign hëlt eng nei Grenz wéi PWA Fënstere kënne kleng sinn, vill méi kleng wéi e mobilen Viewport. Dëst bedeit datt mir spezifesch Usiichten oder kleng Widgets fir dëst Format erstelle mussen, wéi et am Chrome OS haut ze gesinn ass.
- Push Notifikatioune solle just de Benotzer méi Wäert ginn, also léiert am richtege Moment ze froen an Offall net d'Méiglechkeet Messagen ze schécken déi net nëtzlech oder interessant sinn.
- Mir mussen designen fir Webleistung a fir offline Zougang.
D'Joer vu PWAen
Mat dem Zousaz vun iOS an Desktop dëst Joer sinn PWAs haut iwwerall. Awer mir mussen drun erënneren datt hir Rees just ufänkt, also erwaart dacks Ännerungen a gitt sécher datt Dir Iech mat den neisten Techniken an Iddien aktualiséiert fir eng exzellent Benotzererfarung ze liwweren wärend d'Plattform entwéckelt.
Dësen Artikel gouf ursprénglech an der Emissioun 308 vum Netz, de beschte verkaafte Magazin vun der Welt fir Webdesigner an Entwéckler. Kaaft Ausgab 308 hei oder hei abonnéieren.
