208 lines
3.4 KiB
Markdown
208 lines
3.4 KiB
Markdown
# 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.
|
|
|