Než se vaše progresivní webová aplikace stane samostatnou, musíte zvážit tři věci

Minulý týden jsem byl na TECH.insights v Londýně a Rowan Merewood měl vynikající přednášku o progresivních webových aplikacích. Byla to jedna z těchto prezentací, která obsahovala spoustu informací, takže i lidé, kteří znají technologii, se mohli naučit něco nového. Miluji tento druh rozhovorů!

Moje osobní webová stránka je sbírka statických souborů HTML a je také progresivní webovou aplikací. Transformace na progresivní webovou aplikaci mi ze začátku připadala trochu divná, protože to není skutečná aplikace, ale chtěl jsem být jedním ze skvělých dětí a PWA stále nabízejí spoustu dalších vylepšení. Pokročilé ukládání do mezipaměti a chování offline jsou věci, které jsou užitečné pro jakýkoli web.

Implementovaný servisní pracovník používá sw-toolbox pro usnadnění práce s určitou strategií ukládání do mezipaměti. Pokud jste ještě nevyzkoušeli sw-toolbox, rozhodně byste měli! Je to skvělá pomoc a velmi usnadňuje implementaci servisního pracovníka.

Podívejme se, jak můj web vypadá v prohlížeči Chrome na mém zařízení Android, a vezměme to jako začátek, abychom z něj udělali samostatnou webovou aplikaci.

Aplikace bude samostatná

Jednou ze skvělých věcí na progresivních webových aplikacích je to, že jsou „instalovatelné“ a můžete se zbavit uživatelského rozhraní prohlížeče kolem vaší webové aplikace. Toho dosáhnete propojením manifest.json soubor ve vašem HTML.

<link rel="manifest" href="manifest.json">

{
  "name": "Stefan Judis Web Development",
  "short_name": "Stefans Discoveries",
  "theme_color": "#1d7cbb",
  "background_color": "#ffffff",
  "display": "standalone",
  ...
}

Chcete-li, aby vaše webová aplikace vypadala jako skutečná aplikace, můžete použít display vlastnost a nastavte ji na standalone aby aplikace vypadala a působila jako samostatná aplikace. Tato možnost je velmi vzrušující – ale pojďme se podívat, co to znamená.

Uživatelské rozhraní prohlížeče existuje z nějakého důvodu

I když je příjemné vidět svůj web v samostatném režimu, musíte si být vědomi skutečnosti, že klíčové funkce uživatelského rozhraní prohlížeče jsou pryč. Samostatnou verzi mého webu si můžete prohlédnout níže. Objasňuje tři hlavní problémy.

Ukazatele pokroku jsou klíčovou součástí dobrého uživatelského dojmu

První věc, kterou jsem si všiml, je, že ukazatele pokroku jsou pryč. Ve standardním uživatelském rozhraní prohlížeče vám vždy něco říká, že jste klikli na odkaz a že čekáte, až se vrátí odpovědi. V samostatném režimu již není žádný vizuální indikátor. Dobře vyvinuté jednostránkové aplikace mají implementovány indikátory pokroku, ale "normální" webové stránky, jako je můj osobní, obvykle nemají.

Chybějící indikátor průběhu je velmi patrný, když máte pomalé připojení. Když jsem byl minulý týden ve Spojeném království, zjistil jsem, že jsem několikrát v telefonu klepal na odkazy, protože jsem si nebyl jistý, jestli se něco děje.

Jak opravit chybějící indikátor načítání?

Ukázalo se, že pomocí window.matchMedia můžete zjistit, zda váš web běží v samostatném režimu . Můj první nápad byl zobrazit indikátor načítání vždy, když někdo klikne na odkaz.

var baseRegex = new RegExp( `${ window.location.hostname}` );

if ( window.matchMedia( '(display-mode: standalone)' ).matches ) {
  window.addEventListener( 'click', function() {
    if (
      event.target.tagName === 'A' &&
      ! baseRegex.test( event.target.href )
    ){
      document.getElementById( 'loading-indicator' ).classList.add( 'is-active' );
    }
  } );
}

Toto řešení bylo trochu divné, ale fungovalo dobře a ukazuje, že se něco děje. 🎉

Různé zdroje zůstávají v samostatném režimu

Dalším problémem jsou odkazy na různé původy. Nechci otevírat téměř náboženskou diskusi o odkazech a target="_blank" zde, ale nelíbí se mi pravidlo, že odkazy směřující do jiného původu by se měly otevírat na nové kartě. Jsem klasický "Tab-Hoarder" a rád bych se sám rozhodl, kdy otevřít novou kartu. Proto zde nejsou žádné target="_blank" odkazy na mém webu.

Abych tento problém vyřešil, rozšířil jsem předchozí fragment JavaScriptu na volání window.open když odkaz ukazuje na jiný původ.

var baseRegex = new RegExp( `${ window.location.hostname}` );

if ( window.matchMedia( '(display-mode: standalone)' ).matches ) {
  window.addEventListener( 'click', function() {
    if (
      event.target.tagName === 'A' &&
      ! baseRegex.test( event.target.href )
    ){
      window.open( event.target.href );
      event.preventDefault();
    } else {
      document.getElementById( 'loading-indicator' ).classList.add( 'is-active' );
    }
  } );
}

Volání window.open opustí samostatné uživatelské rozhraní a otevře výchozí prohlížeč. Skvělé!

Adresy URL nelze sdílet

Posledním a posledním problémem je, že uživatelé již nemají přístup k URL. Ve videu jste viděli, že jsem navštívil příspěvek na blogu, a neexistuje způsob, jak sdílet polohu nebo dokonce zjistit, jaká je skutečná poloha.

Jedním ze základních principů internetu je, že můžeme propojovat zdroje. Nechtěl jsem se s tím rozejít. Ale jak to může fungovat, když návštěvníci nemají přístup k URL?

Poznámka:Včera jsem si na svou domovskou obrazovku přidal novou aplikaci Twitter Lite a byl jsem překvapen, když jsem zjistil, že aplikace má stejný problém.

Dostupné adresy URL jsou základní funkcí webu!

Abych tento problém vyřešil, implementoval jsem rozhraní Web Share API. Web Share API je stále experimentální funkcí a má několik problémů:

• Své stránky musíte hostovat v zabezpečeném kontextu
• Musíte zadat alespoň jeden text nebo adresu URL, ale pokud chcete, můžete zadat obojí
• Rozhraní API můžete vyvolat pouze jako výsledek uživatelského gesta
• Všechny hodnoty vlastností, které předáváte do rozhraní API, musí být řetězce

S tím vším dokážu žít. Dalším úlovkem je, že pokud chcete používat rozhraní Web Share API, stále se musíte přihlásit ke zkušební verzi a umístit do dokumentů metaznačku, abyste ji mohli používat. Pak jste připraveni spustit skutečné dialogy sdílení například kliknutím na tlačítko. To je skvělé. V případě, že se chcete ponořit hlouběji, Michael Scharnagl napsal na toto téma vynikající tutoriál a vysvětlil, jak jej implementovat postupně vylepšovaným způsobem.

// check if Web Share API is available
if ( navigator.share !== undefined ) {
  var SHARE_BTN = document.querySelector( '.shareBtn' );
  
  // change link from "Share on Twitter" to "Share"
  SHARE_BTN.innerHTML = `<svg>...</svg> Share`;

  SHARE_BTN.addEventListener( 'click', function (ev) {
    navigator.share( {
      title : document.title,
      url   : window.location.href
    } )
    .then( () => console.log( 'Successful share' ) )
    .catch( ( error ) => {
      console.log(' Error sharing:', error );
      window.open( this.href );
    } );

   ev.preventDefault();
  } );
}

Ale počkejte chvíli a pojďme si to chvíli promyslet. Když jste v nativní aplikaci, funkce sdílení je obvykle specifická pro aplikaci a uživatelé se dozvěděli, kde najdou tlačítko pro sdílení. Pro případ mého webu – nechci někam umisťovat moc výrazné tlačítko pro sdílení a také nechci uživatele učit, jak věci sdílet. Tento přístup není vhodný pro statický web.

Nakonec jsem šel s tlačítkem pro sdílení na konci stránek s články. Toto tlačítko funguje víceméně dobře a líbí se mi rozhraní Web Share API, ale podle mého názoru to zdaleka není optimální, protože ne každou stránku lze sdílet v samostatném režimu.

Poznámka:Zdá se, že Chrome Desktop má problém s navigator.share v aktuální verzi. Stále tento problém zkoumám. :)

Reimplementace těchto funkcí

Pojďme se tedy podívat na konečný výsledek.

Tento výsledek je víceméně přijatelný, ale upřímně s tímto výsledkem jsem nebyl spokojen .

U statických webů to za to nestojí

Udělal jsem to, že jsem znovu implementoval funkce, které získám zdarma, když můj web běží v prohlížeči. A aby bylo jasno – můj web není webová aplikace. Stojí za to znovu vynalézt kolo?

Poté, co jsem nad tím pár nocí spal, jsem se rozhodl, že samostatný režim není pro můj statický web nejvhodnější. Přešel jsem na "display": "minimal-ui" které dnes není podporováno, ale vrací se zpět do normálního uživatelského rozhraní prohlížeče. Dokážu s tím žít a jsem zvědavý, jak se s popsanými problémy vypořádá minimální uživatelské rozhraní. Odstranil jsem také „JavaScript samostatné aplikace“.

Můj web stále těží z progresivních vychytávek webové aplikace a neběží v samostatném režimu pro případ, že by si jej někdo přidal na jeho/její domovskou obrazovku. A nevypadá to jako aplikace – ale myslím, že je to v pořádku !