Stop the internet, i want to go offline

Stop the Internet,
I want to go offline
Boyan Mihaylov
@bmihaylov

@bmihaylov | BuildStuff 2016 2
We live in a connected world
https://c1app.wordpress.com/2015/02/02/mobile-apps-a-simple-overview/social-media-network-connection-and-communication-in-the-global_z1j0gjo_/

SLOWEST FASTEST
Internet speed worldwide
https://telegraphtravelmaps.carto.com/viz/b0a43e76-40bf-11e5-bfd4-0e6e1df11cbf/public_map

Working while travelling
https://www.wired.com/wp-content/uploads/blogs/wiredenterprise/wp-content/uploads/2013/09/docker-jungle.jpg

Working while travelling
https://www.selectlegal.co.uk/wp-content/uploads/2015/07/Man-on-train.jpg

5
Principles
for great
offline
experience

#1
Degrade
gracefully as
the network
connection
changes

#2
Provide clear
feedback
about the my
actions

#3
Give me
constant
access to the
content I
care about

#4
Content is
mutable, no
matter if I am
online or
offline

#5
Remember
my recent
activity for
me

Traditional
caching
approaches

HTTP Headers
GET /build-stuff.html HTTP/1.1
…
HTTP 1/1 200 OK
Cache-Control: public, max-age=86400
Expires: Tue, 22 Nov 2016, 20:00:00 GMT
Last-Modified: Wed, 16 Nov 2016, 08:00:00 GMT
ETag: “5485fac7-ae74”
…
Request
Response

Resource versioning
…
<link href="/css/site.css" rel="stylesheet" />
<link href="/css/baske.css?v=2" rel="stylesheet" />
…
<script src="/js/moment-2.8.3.js"></script>
<script src="/js/prettyCheckable.js?v=1"></script>
<script src="/js/customSelect.js?v=1"></script>
<script src="/js/app/basket.js?v=2"></script>
<script src="/js/app/BasketController.js?v=2"></script>
…
<script src="/js/app-bundle.js?v=53e32af"></script>
…

Cookies
…
HTTP 1/1 200 OK
Set-Cookie: i-am-cool=true;
…
#1 Request
#1 Response
Cookie: i-am-cool=true;
…
#2 Request

3rd-party plug-ins

Application cache
CACHE MANIFEST
# 2016-11-18 v1
CACHE:
welcome.html
css/style.css
img/title.png
NETWORK:
*
FALLBACK:
/ offline.html
manifest.appcache Usage
<html manifest="manifest.appcache">
…
– Caching the manifest file?
– Not flexible enough
– Hard to debug
– Deprecated
+ Good browser support

Web storage
localStorage.setItem("conf", "BuildStuff");
const conf = localStorage.getItem("conf");
localStorage.removeItem("conf");
localStorage.clear();
sessionStorage.setItem("mySession", "offline");
+ Key-value store
+ Per session or permanent
+ Cross-browser support
– Serialization / deserialization
– No transactions
– Limited space

Web SQL database
+ SQLite in the browser
+ Relational DB advantages
– Minimal browser support
– Deprecated
const db = openDatabase("mydb", "1.0", "Test DB", 50*1024*2014);
db.transaction(tx => {
tx.executeSql("CREATE TABLE IT NOT EXISTS Conf (id unique, name)");
tx.executeSql("INSERT INTO Conf VALUES (1, 'BuildStuff'");
});

indexedDB
+ Storage of significant amounts
of structured data (+ blobs)
+ Transactional support
+ (Good) browser support
const dbRequest = indexedDB.open("ConfDB");
dbRequest.onupgradeneeded = () => {
dbRequest.result
.createObjectStore("conf", { keyPath: "id" })
.put({ id: 1, name: "BuildStuff" });
};
dbRequest.onsuccess = () => {
const getRequest = dbRequest.result
.objectStore("conf").get(1);
getRequest.onsuccess = () => { /* getRequest.result.name */ };
};
– Complex for simple scenarios

FileSystem API
+ A sandboxed file system
+ Store binary content
– May ask for extra quota
– Only supported in Chrome
– Non-standard
window.webkitStorageInfo
.requestQuota(PERSISTENT, 1024*1024, (quota) => {
window.requestFileSystem(PERSISTENT, quota, onInit, onError);
}, onError);
function onInit(fs) {
fs.root.getFile(
"log.txt", { create: true, exclusive: true },
(fileEntry) => { /* fileEntry.name */ },
onError);
}

Service Worker
A script running in the background
Even when the browser is closed
Acts as a proxy between the browser and
the network (when available)
Programmatic and controllable
Cache API
27@bmihaylov | BuildStuff 2016

Service Worker lifecycle
Installing Activated Idle
Fetch /
message
Terminated
Error

Service Worker – register
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("app-install.js")
.then(function() {
console.log("Service worker has been installed");
}, function(error) {
console.log("Oops!", error);
});
} else {
console.log("No service workers support for this browser");
}
</script>

Service Worker – install
const CACHE_NAME = "app.cache.v1";
this.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll([
"/index.html",
"/css/style.css",
"/js/app.js"
]);
});
);
});
…
app-install.js

Service Worker – fetch
app-install.js
…
this.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
});
);
});
…

Service Worker specifics
HTTPs only
Asynchronous, promise-based
Not working with localStorage
indexedDB only
No access to DOM
Isn’t tied to a particular page
32@bmihaylov | BuildStuff 2016

Caching
strategies
using
service
workers
https://jakearchibald.com/2014/offline-cookbook/

Network only
www.
1 2
3
Scenarios
• Analytics requests
• Non-GET requests

Cache only
www.
1 2
3
Scenarios
• The static part of your app

Cache, falling back to network
www.
1
2
3
4
Scenarios
• The majority of requests
when building offline-first
app

Network, falling back to cache
www.
1
3
2
4
Scenarios
• Online users will always
get the latest content
• Offline users will get older
content

Cache & update
www.
1
2
2
3
4
Scenarios
• You don’t mind showing
old content for a while

Cache, update, refresh
www.
1
2
2
3
4
4
Scenarios
• Content that changes often
(fx., game score, social
media timeline)

Network & cache race
www.
1
2
2
3
3
Scenarios
• Small “non-important”
assets
• Where performance
is vital

Beyond typical scenarios
Network status Background sync Push notifications

Is Service Worker ready?
11 14 10
9.1
TP
10
9.3
all
4.4
4.4.4
49
50
51
52
54
53
55
56
57
52
51
49
41
42
43
53 53
IE Edge Firefox Chrome Safari Opera iOS Safari
Opera
Mini
Android
Browser
Chrome
for
Android

Myths about
working
offline

Myth #1:
4G is
everywhere

Myth #2:
Offline
scenarios
are rare

Myth #3:
Local data
is used only
for offline apps

Myth #4:
Current
web standards
are of no use

48
Thank you, BuildStuff!
@bmihaylov | BuildStuff 2016
hey@boyan.in
@bmihaylov
After party

Stop the internet, i want to go offline

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Stop the internet, i want to go offline

Ähnlich wie Stop the internet, i want to go offline (20)

Mehr von Boyan Mihaylov

Mehr von Boyan Mihaylov (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Stop the internet, i want to go offline