Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline...
Transcript of Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline...
![Page 1: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/1.jpg)
![Page 2: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/2.jpg)
Räckvidd vs engagemang
Top 500 appar vs top 500 webbplatser. Källa: Comscore ”The 2017 U.S. Mobile App Report”, 2017
![Page 3: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/3.jpg)
67% av mobiltrafiken i Europa går över 2g eller 3g (2016)
Källa: GSMA - The Mobile Economy (2017) https://www.gsma.com/mobileeconomy/
![Page 4: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/4.jpg)
77% av mobiltrafiken globalt går över 2g eller 3g (2016)
Källa: GSMA - The Mobile Economy (2017) https://www.gsma.com/mobileeconomy/
![Page 5: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/5.jpg)
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/
![Page 6: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/6.jpg)
Progressive web apps
Pålitlig Snabb Engagerande
![Page 7: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/7.jpg)
”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
![Page 8: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/8.jpg)
![Page 9: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/9.jpg)
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
![Page 10: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/10.jpg)
Push notifications Registrering
Meddelande-server
Service worker
(browser)
Web server
![Page 11: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/11.jpg)
Push notifications Skicka meddelande
Meddelande-server
Service worker
(browser)
Web server
1. Skicka meddelande till prenumerant
![Page 12: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/12.jpg)
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");
});
![Page 13: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/13.jpg)
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
![Page 14: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/14.jpg)
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
![Page 15: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/15.jpg)
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"
}
]
}
![Page 16: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/16.jpg)
• 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
![Page 17: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/17.jpg)
• 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
![Page 18: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/18.jpg)
Lighthouse
• Granskningsverktyg för Progressive web apps
• Går att köra i ChromeDevTools, via kommandolinjen eller som en Node-modul
![Page 19: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/19.jpg)
Lighthouse – via kommandolinjen/NodeJS
JSON
![Page 20: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/20.jpg)
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”
![Page 21: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/21.jpg)
![Page 22: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/22.jpg)
https://jakearchibald.github.io/isserviceworkerready/
![Page 23: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/23.jpg)
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
![Page 24: Räckvidd vs engagemang - SASTsast.se/q-moten/2018/q1/Progressive web apps SAST copy.pdf · Offline first •Att man är offline ska behandlas som ett av många programtillstånd](https://reader030.fdocument.pub/reader030/viewer/2022040409/5ec567e80e30496ba64586dc/html5/thumbnails/24.jpg)
https://www.linkedin.com/in/oskarlind/