Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
/30
Веб без интернет
соединения
1
Дунаев Михаил
Rambler&Co
2016
/302
/303
Progressive
Web App
Progressive
Responsive
Connectivity
Independent
App-like
Fresh
Safe
Re-engageable
Installable
Lin...
/304
Service
Worker
/3013
network fetch
response
/3013
self.fetch(request)
e.respondWith
response
fetch event
then
/307
Safari: Under consideration, Brief positive signals in five year plan.
Edge: In development.
/30
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
};
8
Registration
/309
Offline mode
/3013
fetch event
self.fetch(request)
e.respondWith
reject
self.caches.match(url)
catch
/30
this.addEventListener('install', function(event) {
caches.open("1").then(function(cache) {
cache.add("offline.html");
...
/30
this.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).then(function(response) {
ret...
/3013
App shell
/3014
/3013
fetch event
self.fetch(request)
e.respondWith
self.caches.match(url)
catch
cache.put
/30
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).catch(function() {
ret...
/3017
Sync
/3013
fetch event
self.fetch(request)
e.respondWith
sync
/30
navigator.serviceWorker.ready.then(function(swRegistration) {
return swRegistration.sync.register('myFirstSync');
});
...
/3020
manifest.json
/3021
/30
{
"short_name": "Lenta.ru",
"name": "Lenta.ru",
"icons": [
{
"src": "icon-3x.png",
"sizes": "144x144",
"type": "image/...
/3023
Native App install banner
/30
You have a web app manifest file, which defines how
your app appears on the user’s system and how it
should be launche...
/30
Developer tools
25
/3026
https://webmanife.st/
http://realfavicongenerator.net/
/3027
webpack-dev-server --https
Chrome --ignore-certificate-errors
/3028
/30
fin
29
https://goo.gl/PSAjsM
Михаил Дунаев
https://mdunaev.github.io/
Prochain SlideShare
Chargement dans…5
×

Веб без интернет соединения, Михаил Дунаев, MoscowJS 31

Что такое Progressive Web App и зачем вашему сайту Service Worker и App Manifest.

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Веб без интернет соединения, Михаил Дунаев, MoscowJS 31

  1. 1. /30 Веб без интернет соединения 1 Дунаев Михаил Rambler&Co 2016
  2. 2. /302
  3. 3. /303 Progressive Web App Progressive Responsive Connectivity Independent App-like Fresh Safe Re-engageable Installable Linkable
  4. 4. /304 Service Worker
  5. 5. /3013 network fetch response
  6. 6. /3013 self.fetch(request) e.respondWith response fetch event then
  7. 7. /307 Safari: Under consideration, Brief positive signals in five year plan. Edge: In development.
  8. 8. /30 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); }; 8 Registration
  9. 9. /309 Offline mode
  10. 10. /3013 fetch event self.fetch(request) e.respondWith reject self.caches.match(url) catch
  11. 11. /30 this.addEventListener('install', function(event) { caches.open("1").then(function(cache) { cache.add("offline.html"); }); }); 11
  12. 12. /30 this.addEventListener('fetch', function(event) { event.respondWith( fetch(event.request).then(function(response) { return response; }).catch(function() { return caches.match("offline.html"); }) ); }); 12
  13. 13. /3013 App shell
  14. 14. /3014
  15. 15. /3013 fetch event self.fetch(request) e.respondWith self.caches.match(url) catch cache.put
  16. 16. /30 this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).catch(function() { return fetch(event.request); }) ); }); 16
  17. 17. /3017 Sync
  18. 18. /3013 fetch event self.fetch(request) e.respondWith sync
  19. 19. /30 navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('myFirstSync'); }); 19 self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } });
  20. 20. /3020 manifest.json
  21. 21. /3021
  22. 22. /30 { "short_name": "Lenta.ru", "name": "Lenta.ru", "icons": [ { "src": "icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" } 22 <link rel="manifest" href="/manifest.json">
  23. 23. /3023 Native App install banner
  24. 24. /30 You have a web app manifest file, which defines how your app appears on the user’s system and how it should be launched You have a service worker registered on your site. We recommend a simple custom offline page service worker Your site is served over HTTPS (service worker requires HTTPS for security) The user has visited your site at least twice, with at least five minutes between visits. 24
  25. 25. /30 Developer tools 25
  26. 26. /3026 https://webmanife.st/ http://realfavicongenerator.net/
  27. 27. /3027 webpack-dev-server --https Chrome --ignore-certificate-errors
  28. 28. /3028
  29. 29. /30 fin 29 https://goo.gl/PSAjsM Михаил Дунаев https://mdunaev.github.io/

×