Jsou zobrazeny jen nové odpovědi. Zobrazit všechny
Předmět Autor Datum
SPA a PWA robim uz hodne dlouho, spravil som ich desiatky. Su to skvele veci, ale len pokial program…
Mlocik97 31.12.2018 12:18
Mlocik97
Sdílíme podobnej pohled na věc :-) Já si fakt PWA strašně chválím! Jak měříš čas načtení PWA na mob…
Pavel 31.12.2018 12:35
Pavel
Jak měříš čas načtení PWA na mobilu? LightHouse s emuláciou mobilného zariadenia. Nebo jsou ty čas…
Mlocik97 31.12.2018 14:03
Mlocik97
Právě jsem našel tohle: sw-precache - co na to říkáš? LightHouse s emuláciou mobilného zariadenia.…
Pavel 31.12.2018 14:29
Pavel
Ten sw-precashe som pozeral,... hmm... neviem, nemám k tomu úplne určitý názov... Ostatne ETag by ma… poslední
Mlocik97 17.01.2019 16:19
Mlocik97

SPA a PWA robim uz hodne dlouho, spravil som ich desiatky. Su to skvele veci, ale len pokial programator je vie spravne pouzit. Podla mna z pohladu uzivatele dokonala vec. Z pohladu programatora skvela vec, ale prijde mi ze nektere veci kolem service-workeru sa riesia zbytocne zlozito (principovo). Ostatne vysledkom je aj skvela rychlost nacitania. (vsetky moje PWA sa nacitaju za kazdej situacie do 150-200ms uplne kompletne). Len to prepisovanie cashe a sw mi prijde krkolomnejsie a este som nezistil ako generovat nazov cashe a refreshovat ho podla hashu dat, ktore uchovavam v JSON alebo XML formatoch. Abych pri zmene lubovolneho suboru o tychto formatoch automaticky vynutil aktualizaciu sw. Rucne prepisovanie SW a nazvu cashe pri akejkolvek zmene dat je zatim pre mna asi najhorsia vec. Zatim mam nazov cashe v tvare YYMMDD-HHMM (datum a cas).

P.S. Martin Michálek má k PWA lepšie tutoriály, a odporúčam i "frontendisti". Obsah skvely, len moc koktaju do videa :D

Sdílíme podobnej pohled na věc :-) Já si fakt PWA strašně chválím!

Jak měříš čas načtení PWA na mobilu? Umím propojit Android s PC a přes Chrome a nástroje pro vývojáře umím (plus mínus) zjistit info v případě, že web načtu na Androidu v Chromu - používám console.log a vypisuju jednotlivý časy; ale jde to udělat i přímo z nainstalované PWA v mobilu? Nebo jsou ty časy principiálně stejný, ať je to PWA otevřený v Chromu nebo přímo spuštěný z ploch mobilu?

Přemýšlím, jak by šlo vyřešit to co popisješ - zautomatizovat aktualizaci bez ručního přepisu verze v sw. Asi krkolomná představa: sw si jednou za hodinu zjistí http requestem obsah souboru update.json a vypočítá si hash a porovná ho s posledním uloženým hashem? Ale co pak dál...?

Zkusím si toho autora najít, díky za nasměrování.

Jak měříš čas načtení PWA na mobilu?

LightHouse s emuláciou mobilného zariadenia.

Nebo jsou ty časy principiálně stejný, ať je to PWA otevřený v Chromu nebo přímo spuštěný z ploch mobilu?

Stačí to otvoriť na PC v LightHouse a zvoliť již zmínenú emuláciu mobilného zariadenia. V Throttlingu pak ešte nastavujem CPU Slowdown. A okrem toho mi tam beží jeden script, díky ktorému mám presnejšie meranie. Ostatne ale vo vätšine prípade ti LightHouse dá docela dosť presné výsledky. Občas pozriem aj do PageSpeed Insights.

https://github.com/addyosmani/webpack-lighthouse-plugin
https://github.com/GoogleChrome/lighthouse

Přemýšlím, jak by šlo vyřešit to co popisješ - zautomatizovat aktualizaci bez ručního přepisu verze v sw. Asi krkolomná představa: sw si jednou za hodinu zjistí http requestem obsah souboru update.json a vypočítá si hash a porovná ho s posledním uloženým hashem? Ale co pak dál...?

Ja som uvažoval o nasledovnom spôsobe:

- Ak som online a súbory sa zmenily:
1. Načítať dáta zo SW, avšak pozdržať vykreslovanie (len dát, nikoliv stránky samotnej). Pararelne popritom získať hashe dát zo serveru. Získanie hashe zo SW, porovnanie.
2. Vykreslenie dát, kde sa hash zhoduje. Kde sa hash nezhoduje stiahnuť zo serveru a priebežne vykreslovať.
3. Nahradiť súbory v SW, súbormi stiahnutými zo serveru. (Vykonáva sa čiastočne pararelne s krokom 2, čiastočne pararelne znamená že kým sa vykresluje súbor číslo 10, tak sa v SW nahrádza súbor číslo 9).
- Ak som online a súbory sa nezmenily:
1. Načítať dáta zo SW, avšak pozdržať vykreslovanie (len dát, nikoliv stránky samotnej). Pararelne popritom získať hashe dát zo serveru. Získanie hashe zo SW, porovnanie.
2. Vykreslovanie dát.
- Ak som offline
1. Načítať dáta zo SW, priebežné vykreslovanie.

Zdá sa že v prípade ak si online, tak v takom prípade sa bude stránka načitávať pomalšie... Nikoliv, ak je to správne naprogramované, rozdiel je rádovo 10, maximálne 20ms, avšak vo vykreslovaní to vyzerá ešte na menej. Samozrejme ak dlho trvá získanie hashe zo serveru, tak začneš vykreslovanie ešte pred aktualizáciou SW, tak jak kdyby si byl offline. Nekde na stránke pritom nechávam vykresliť aj info o aktualizácii dát. Keďže PWA stavám na AngularJS, Vue alebo Angularu (TS), tak používam ng-cloak alebo jeho alternatívy v ďalších frameworkoch (V Angular (TS) používam '?.', viď https://stackoverflow.com/questions/39409532/does-angular2-have-ngcloak čož je iba iastočná náhrada, pre plnú náhradu sa dá *ngCloak vytvoriť), vo vue je to v-cloak. Ostatne i tak za každej situácie mám stránku komplet vykreslenú do 150-200ms. Takže to nerobí problém.

Ten sw-precashe som pozeral,... hmm... neviem, nemám k tomu úplne určitý názov... Ostatne ETag by mal byť riešením. Ale neviem ako ten ETag prečítať z client-sidu.

Inak v prípade service-workeru som však narazil na pár ďalších problémov,... jedna je scope, resp. že pri URL končiacou so slashom '/' to funguje v poho, ale bez už to vníma ako inú stránku, a vráti to ERR_INTERNET_DISCONNECTED. V Chrome je BUG s cashovaním faviconu.

Zpět do poradny Odpovědět na původní otázku Nahoru