räckvidd vs engagemang - sastsast.se/q-moten/2018/q1/progressive web apps sast copy.pdf · offline...
TRANSCRIPT
Räckvidd vs engagemang
Top 500 appar vs top 500 webbplatser. Källa: Comscore ”The 2017 U.S. Mobile App Report”, 2017
67% av mobiltrafiken i Europa går över 2g eller 3g (2016)
Källa: GSMA - The Mobile Economy (2017) https://www.gsma.com/mobileeconomy/
77% av mobiltrafiken globalt går över 2g eller 3g (2016)
Källa: GSMA - The Mobile Economy (2017) https://www.gsma.com/mobileeconomy/
Hastigheten har betydelse…
• 53% av mobilanvändare lämnar enwebbsida som tar längre än 3s attladda
• 1s snabbare laddningstid kan öka konverteringsgraden med ca 7%
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/https://www.webpagefx.com/blog/internet/website-page-load-time-conversions/
Progressive web apps
Pålitlig Snabb Engagerande
”Reliability means never showing the downasaur”
• Pålitlig• Laddar alltid – även vid dålig/ingen uppkoppling• Cachar och för-laddar resurser• Levererar meddelanden och data även om
uppkopplingen bryts eller fönstret stängs
• Snabb• Leverera ”något” till användaren så snabbt som
möjligt• Svara direkt på användarens interaktioner
• Engagerande• Kan skicka notifieringar till användaren (push-notiser)• Går att lägga till på hem-skärmen (som en vanlig app)• Går att köra i helskärmsläge
Service workers
• Förutsättning för de flesta av funktionerna i en PWA
• Javascript i browsern
• Kräver HTTPS
• Separat livscykel från webbsidan
• Lyssnar på events (fetch, install, activate…)
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/serviceworker.js")
.then(function(registration) {
console.log(”Registered, scope:", registration.scope);
}).catch(function(err) {
console.log(”Registration failed:", err);
});
}
https://www.mywebshop.com/category
https://www.mywebshop.com/category/product
Push notifications Registrering
Meddelande-server
Service worker
(browser)
Web server
Push notifications Skicka meddelande
Meddelande-server
Service worker
(browser)
Web server
1. Skicka meddelande till prenumerant
Push Notificationsself.addEventListener("push", function(event) {
var message = event.data.text();
self.registration.showNotification("Push message received", {
body: message
});
});
Service worker
(browser)
Web server
var webpush = require("web-push");
webpush.setGCMAPIKey(pushKeys.GCMAPIKey);
webpush.setVapidDetails(
pushKeys.subject,
pushKeys.publicKey,
pushKeys.privateKey
);
webpush.sendNotification(subscription, "It's going to rain!").then(function()
{
console.log("Message sent");
}).catch(function() {
console.log("Message failed");
});
Offline first
• Att man är ”offline” ska behandlas som ett av många programtillstånd
• Mobile first: ge användaren bästa möjliga upplevelsen för dennes enhet
• Offline first: ge användaren bästa möjliga upplevelsen för dennes uppkoppling
Cache only self.addEventListener("fetch", function(event) {
event.respondWith(
caches.match(event.request)
);
});
self.addEventListener("fetch", function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
self.addEventListener("fetch", function(event) {
event.respondWith(
caches.open("cache-name").then(function(cache) {
return cache.match(event.request).then(function(cachedResponse) {
var fetchPromise =
fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
return cachedResponse || fetchPromise;
})
})
);
});
Cache, falling back to network
Cache, falling back to network with frequentupdates
https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#serving-suggestions
Add to homescreen{
"name": "NASA Open Source Software",
"short_name": "NASA OSS",
"start_url": "/",
"display": "standalone",
"theme_color": "#212121",
"background_color": "#212121",
"icons": [
{
"src": "images/logos/nasa-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/logos/nasa-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
• 84% minsking av time-to-interactive
• 17% konverteringsökning i mobilen
• 53% fler mobila sessioner för iOS
• 18% öppningsgrad för pushnotiser om övergivna varukorgar
• 8% av kunderna som kommer in via enpushnotis genomför ett köp
https://www.lancome-usa.com
• Använder 3% av utrymmet jämfört med android-appen (600kb vs 23,5mb)
• <5s laddningstid (första besöket) över 3G
• <3s för efterföljande besök
• Konsumerar mindre data än appen
https://mobile.twitter.com
Lighthouse
• Granskningsverktyg för Progressive web apps
• Går att köra i ChromeDevTools, via kommandolinjen eller som en Node-modul
Lighthouse – via kommandolinjen/NodeJS
JSON
Användarupplevelse
• Fortfarande stor skillnad mellan app och webbnär det gäller upplevelse och förväntningar
• Standarder saknas kring t.ex. “lägg till som app”
• Timing otroligt viktigt – när ska du frågaanvändaren om att få skicka pushnotiser?
• Tydlighet
”Slå på aviseringar” ”Meddela mig om förändringar i min bokning”
https://jakearchibald.github.io/isserviceworkerready/
Resurser
• https://developers.google.com/web/progressive-web-apps/• https://pwa.rocks• https://www.pwastats.com/• https://jakearchibald.github.io/isserviceworkerready/• https://developers.google.com/web/fundamentals/primers/service-
workers/• https://developers.google.com/web/fundamentals/instant-and-
offline/offline-cookbook/#serving-suggestions• https://developers.google.com/web/ilt/pwa/introduction-to-push-
notifications• https://dockyard.com/blog/2017/07/13/safari-ios-and-progressive-web-
apps
https://www.linkedin.com/in/oskarlind/