1. Make your website (a bit) offline
Paweł Łukaszuk
meet.js Białystok #

2. Where are we today:
average time spent browsing on a smartphone: 2h 53m / day 90% of consumer's mobile time is spent in apps

3. it’s an App World, the Web just lives in it
smartinsights.com

4. Native vs Mobile ☑ fullscreen ☐ add to main view notifications
fast loading
offline

5. we live in a disconnected & battery powered world,
but our technology and practices are a leftover
from the always connected & steadily powered past

6. being offline is simply a fact of life
if you’re mobile, you’ll be offline at some point

7. Google’s idea for future web apps:
enhance browsers with new features create a Progressive Web Apps… …which uses modern web capabilities… …to deliver an app like user experience

10. !(Progressive Web Apps)
Cordova based hybrid apps React Native NativeScript Electron and NW.js

11. Progressive Web Apps – internals

12. Technologies
Promises Fetch API Cache API Service Worker Browser API Manifest.JSON

14. Promises The Promise object is used for asynchronous computations.
Promise represents a value which may be available now, in the future, or never.
promise.then(function(result) {
console.log(result); // :) })
.catch(function(error) {
console.log(error); // :(
});

16. Fetch API The Fetch API provides an interface for fetching resources.
It will seem familiar to XMLHttpRequest but provides a more powerful and flexible feature set.
fetch(' {
    method: 'get'
}).then(function(response) {
    // Success :)
}).catch(function(err) {
    // Error :(
});

18. Cache API
Cache API is a cache object where request objects act as keys to their responses
CacheStorage - collection of named caches
Cache - storage for request/response
caches.open('v1').then(function(cache) {
return cache.addAll([
'/content/style.css',
'/content/favicon.ico',
]);
});

20. Service Workers
scripts that intercept network requests uses separate thread from web page one service worker works on all tabs with same page works still when tabs are closed no DOM access no global state HTTPS required

22. Demo #01

23. Browser API

24. Manifest.JSON <link rel="manifest" href="manifest.json" /> {
"name": "meet.JS Białystok #15",
"short_name": "js.bia.15",
"theme_color": "#f1edee",
"background_color": "#f1edee",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [{ "src":"icon.png","sizes":"72x72", "type":"image/png"} }

25. Demo #02

26. Steps to create Progressive Web App
enable HTTPS create Service Worker create useful offline page create Web App Manifest

27. A Progressive Web App is a web app but better
progressive & responsive connectivity independant app like easily installable fast & fresh data safe

28. Tools
PWA checklist / lighthouse extension sw-toolbox app-manifest.firebaseapp.com

29. Chrome status Firefox platform status The Billings Gazette Google I/O
Code.nasa.gov Snapdrop AliExpress Telegram
Dev.Opera Flipkart Financial Times Flipboard

30. Questions ?

31. Make your website (a bit) offline
Paweł Łukaszuk
meet.js Białystok #