🗊Презентация Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №1Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №2Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №3Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №4Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №5Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №6Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №7Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №8Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №9Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №10Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №11Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №12Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №13Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №14Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №15Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №16Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №17Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №18Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №19Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №20Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №21Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №22Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №23Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №24Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №25Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №26Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №27Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №28Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №29Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №30Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №31Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №32Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №33
Скачать
Вы можете ознакомиться и скачать презентацию на тему Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC. Доклад-сообщение содержит 33 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Инсталлируемые Веб приложения Service Workers, Cache API, WebRTC
Описание слайда:
Инсталлируемые Веб приложения Service Workers, Cache API, WebRTC

Слайд 2


Краткая история одного стартапа
Описание слайда:
Краткая история одного стартапа

Слайд 3


Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №3
Описание слайда:

Слайд 4


Инсталляция
Описание слайда:
Инсталляция

Слайд 5


Инсталляция iOS <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-startup-image" href="/splash-startup.png">
Описание слайда:
Инсталляция iOS <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-startup-image" href="/splash-startup.png">

Слайд 6


Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №6
Описание слайда:

Слайд 7


Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №7
Описание слайда:

Слайд 8


Проблемы приложений Нет поискового трафика Нет трафика с емейл рассылок Нет кроссплатформенности
Описание слайда:
Проблемы приложений Нет поискового трафика Нет трафика с емейл рассылок Нет кроссплатформенности

Слайд 9


Инсталлируемые веб-приложения Service Workers, Cache API, WebRTC, слайд №9
Описание слайда:

Слайд 10


Progressive Web Apps Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low quality networks. App-like - Feel like an app to the user with app-style interactions and navigation because it's built on the app shell model. Fresh - Always up-to-date thanks to the service worker update process.
Описание слайда:
Progressive Web Apps Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low quality networks. App-like - Feel like an app to the user with app-style interactions and navigation because it's built on the app shell model. Fresh - Always up-to-date thanks to the service worker update process.

Слайд 11


Progressive Web Apps Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them. Re-engageable - Make re-engagement easy through features like push notifications. Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. Linkable - Easily share via URL and not require complex installation.
Описание слайда:
Progressive Web Apps Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them. Re-engageable - Make re-engagement easy through features like push notifications. Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. Linkable - Easily share via URL and not require complex installation.

Слайд 12


Инсталляция https://www.w3.org/TR/appmanifest/ Working Draft 26 April 2016 Chrome + Mozilla + Opera + Edge Under Consideration Safari -
Описание слайда:
Инсталляция https://www.w3.org/TR/appmanifest/ Working Draft 26 April 2016 Chrome + Mozilla + Opera + Edge Under Consideration Safari -

Слайд 13


Инсталляция <link rel="manifest" href="/manifest.json">
Описание слайда:
Инсталляция <link rel="manifest" href="/manifest.json">

Слайд 14


Инсталляция Название приложения { name: “My totally awesome photo app” short_name: “Photos” }
Описание слайда:
Инсталляция Название приложения { name: “My totally awesome photo app” short_name: “Photos” }

Слайд 15


Инсталляция Иконки { "icons": [{ "src": "icon/lowres", "sizes": "64x64", "type": "image/webp" }] }
Описание слайда:
Инсталляция Иконки { "icons": [{ "src": "icon/lowres", "sizes": "64x64", "type": "image/webp" }] }

Слайд 16


Инсталляция Режим отображения и ориентация { "display": "fullscreen", "orientation": "landscape" } fullscreen, standalone, minimal-ui, browser
Описание слайда:
Инсталляция Режим отображения и ориентация { "display": "fullscreen", "orientation": "landscape" } fullscreen, standalone, minimal-ui, browser

Слайд 17


Инсталляция Стартовая страница { start_url: “/start_screen.html” }
Описание слайда:
Инсталляция Стартовая страница { start_url: “/start_screen.html” }

Слайд 18


Инсталляция Scope { “scope”: “/myapp” }
Описание слайда:
Инсталляция Scope { “scope”: “/myapp” }

Слайд 19


Инсталляция Обнаружение инсталляции @media all and (display-mode: standalone){ …} if (window.matchMedia("(display-mode: standalone)").matches) { /* Приложение установлено */ } else { /* Вывести пользователю надоедающий баннер */ }
Описание слайда:
Инсталляция Обнаружение инсталляции @media all and (display-mode: standalone){ …} if (window.matchMedia("(display-mode: standalone)").matches) { /* Приложение установлено */ } else { /* Вывести пользователю надоедающий баннер */ }

Слайд 20


Инсталляция Момент инсталляции function handleInstall(ev){ const date = new Date(ev.timeStamp / 1000); console.log(`Yay! Our app got installed at ${date.toTimeString()}`); } window.oninstall = handleInstall; // Using .addEventListener() window.addEventListener("install", handleInstall);
Описание слайда:
Инсталляция Момент инсталляции function handleInstall(ev){ const date = new Date(ev.timeStamp / 1000); console.log(`Yay! Our app got installed at ${date.toTimeString()}`); } window.oninstall = handleInstall; // Using .addEventListener() window.addEventListener("install", handleInstall);

Слайд 21


Инсталляция
Описание слайда:
Инсталляция

Слайд 22


Camera
Описание слайда:
Camera

Слайд 23


Camera https://webqr.com/ https://github.com/gasolin/qrcode_scanner https://github.com/LazarSoft/jsqrcode https://davidwalsh.name/demo/iphone-camera.php
Описание слайда:
Camera https://webqr.com/ https://github.com/gasolin/qrcode_scanner https://github.com/LazarSoft/jsqrcode https://davidwalsh.name/demo/iphone-camera.php

Слайд 24


Camera
Описание слайда:
Camera

Слайд 25


Camera
Описание слайда:
Camera

Слайд 26


Camera https://github.com/LazarSoft/jsqrcode/blob/master/src/qrcode.js
Описание слайда:
Camera https://github.com/LazarSoft/jsqrcode/blob/master/src/qrcode.js

Слайд 27


Camera <form action="upload.htm" method="post" enctype="multipart/form-data"> <input type="file" accept="image/*" capture> <input type="submit" value="Upload"> </form>
Описание слайда:
Camera <form action="upload.htm" method="post" enctype="multipart/form-data"> <input type="file" accept="image/*" capture> <input type="submit" value="Upload"> </form>

Слайд 28


Service Workers
Описание слайда:
Service Workers

Слайд 29


Service Workers
Описание слайда:
Service Workers

Слайд 30


Кеширование файлов var CACHE_NAME = 'app_serviceworker_v_1', cacheUrls = [ '/test_serviceworker/', '/test_serviceworker/index.html', '/test_serviceworker/css/custom.css', '/test_serviceworker/images/icon.png', '/test_serviceworker/js/main.js' ];
Описание слайда:
Кеширование файлов var CACHE_NAME = 'app_serviceworker_v_1', cacheUrls = [ '/test_serviceworker/', '/test_serviceworker/index.html', '/test_serviceworker/css/custom.css', '/test_serviceworker/images/icon.png', '/test_serviceworker/js/main.js' ];

Слайд 31


Кеширование файлов self.addEventListener('install', function(event) { event.waitUntil( // находим в глобальном хранилище Cache-объект с нашим //именем. если такого не существует, то он будет создан caches.open(CACHE_NAME).then(function(cache) { // загружаем в наш cache необходимые файлы return cache.addAll(cacheUrls); }) ); });
Описание слайда:
Кеширование файлов self.addEventListener('install', function(event) { event.waitUntil( // находим в глобальном хранилище Cache-объект с нашим //именем. если такого не существует, то он будет создан caches.open(CACHE_NAME).then(function(cache) { // загружаем в наш cache необходимые файлы return cache.addAll(cacheUrls); }) ); });

Слайд 32


Кеширование файлов
Описание слайда:
Кеширование файлов

Слайд 33


Спасибо за внимание! Дмитрий Тинитилов
Описание слайда:
Спасибо за внимание! Дмитрий Тинитилов

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию