Wiki/meetups-workshops/modern-mobile-web-day/Readme.md

Modern Mobile Web Day

Optimierungstipps

Wie testen

• PageSpeedInsights

• TestMySide

• WebPageTest

• Developer Tools

What to aim for

• Competitors Test

• User Tests

• A/B Tests

Pitfalls:

• Server-side delay
• Transferring more than needed
  • Split
  • Defer
  • Outsource
  • Omit
• Forgetting some compression

https://compressor.io/

• Unsuitable formats
• To many transfers/requests
  • sprite maps
  • combine scripts/styles
• Fix & forget

Einmalige optimierung, sollte automatisch sein.

Q&A

Single click pay - Datenschutz

IANAL:

Unkompliziert weil client seitig.

Autofill:

• User muss einmal einwilligen

Chrome Autosync:

• Googles problem

Automatische eingabe:

• Pop fragt User nach konsent.

Accelerated Mobile Pages

https://ampbyexample.com/

https://ampstart.com/

Progressive Web Apps

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

• Offline
• Push Notifications
• Add to Homescreen

https://www.pwabuilder.com/

https://github.com/GoogleChrome/workbox

Progressive Features

https://whatwebcando.today/

https://pwa-directory.appspot.com/

• Auto SignIn/Credential API

• Payment Request API

  new PaymentRequest(methodData, transactionDetails, options)

  // know ahead of time if a user can pay request.canMakePayment()

ProprietÃre extension: Google pay

• web_share.js

  navigator.share(title, text, url)

• Chrome dev tools - Audits - Light House

Q&A

Browser Support

Microsoft nimmt pages automatisch in appstore auf.

Safari macht Probleme, geht aber so langsam. Derzeit in der preview/beta.

Wie viel Speicher zur verfuegung?

Vom Browser abhaengig.

Bei Chrome: 16% vom verfuegbaren Device storage.

Playstore?

bs

Trusted web activities

Derzeit:

Viele Leute Web als Webview in den Playstore.

Nicht so nice.

Plan:

https://developers.google.com/web/updates/2017/10/using-twa

Signierter code der mehr darf, z.B. native APIs aufrufen.

Interaktion mit normalem Cache

Normaler cache funktioniert weiter.

Zusaetzlich Code cache. Geparsedter code wird vorgehalten. Bessere performance.

Amp vs Pwa

AMP as PWA

AMP to PWA

AMP in PWA

PWA shell content als AMP, wird von PWA gefetched.

Q&A

Deregister

Nicht sicher ob sich der der service worker selber deregistern kann.

Push Notification wenn der User nicht online

Eventuell irgendwo gequequed.

AbhÃngig vom Backend.

Was ist das erste wenn man hier raus geht?

Was macht überhaupt Ãr mich Sinn?

Wo verliere ich den User?

• Verschwindet der User -> add home screen
• Verliere den User im Bezahlprozess -> payment api
• Beim ersten page load -> amp
• ...

Gegenfrage: was brÃuchte es denn?

• Bewusstsein bei den PMs

  • Dass die User abspringen wenn die Seite lÃnger als 2s laden

• Kosten-nutzen Rechnung / Benchmarking

https://www.thinkwithgoogle.com/tools/

https://www.thinkwithgoogle.com/feature/mobile/

Wie kommt ihr zur Kosten/Nutzen Berechnung

Google's Empfehlung: SPA mit SSR

Manifest kann nicht mehr aktualisiert werden

War mal so, derzeit kanns einmal/Tag geupdated werden. (zumindest bei Chrome)

Wie kann man Splashscreen anpassen

Tasächlich relativ wenig

Wie kann man sich an Martin wenden

Martin hilft gerne.