Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
33 слайда
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
2.96 MB
Просмотров:
63
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Инсталлируемые Веб приложения](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img0.jpg)
Содержание слайда: Инсталлируемые Веб
приложения
Service Workers, Cache API, WebRTC
№2 слайд![Краткая история одного](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img1.jpg)
Содержание слайда: Краткая история одного стартапа
№3 слайд![](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img2.jpg)
№4 слайд![Инсталляция](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img3.jpg)
Содержание слайда: Инсталляция
№5 слайд![Инсталляция iOS lt meta name](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img4.jpg)
Содержание слайда: Инсталляция
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 слайд![](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img5.jpg)
№7 слайд![](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img6.jpg)
№8 слайд![Проблемы приложений Нет](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img7.jpg)
Содержание слайда: Проблемы приложений
Нет поискового трафика
Нет трафика с емейл рассылок
Нет кроссплатформенности
№9 слайд![](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img8.jpg)
№10 слайд![Progressive Web Apps](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img9.jpg)
Содержание слайда: 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 -](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img10.jpg)
Содержание слайда: 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.w .org](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img11.jpg)
Содержание слайда: Инсталляция
https://www.w3.org/TR/appmanifest/ Working Draft 26 April 2016
Chrome +
Mozilla +
Opera +
Edge Under Consideration
Safari -
№13 слайд![Инсталляция lt link rel quot](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img12.jpg)
Содержание слайда: Инсталляция
<link rel="manifest" href="/manifest.json">
№14 слайд![Инсталляция Название](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img13.jpg)
Содержание слайда: Инсталляция
Название приложения
{
name: “My totally awesome photo app”
short_name: “Photos”
}
№15 слайд![Инсталляция Иконки quot icons](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img14.jpg)
Содержание слайда: Инсталляция
Иконки
{
"icons": [{
"src": "icon/lowres",
"sizes": "64x64",
"type": "image/webp"
}]
}
№16 слайд![Инсталляция Режим отображения](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img15.jpg)
Содержание слайда: Инсталляция
Режим отображения и ориентация
{
"display": "fullscreen",
"orientation": "landscape"
}
fullscreen, standalone, minimal-ui, browser
№17 слайд![Инсталляция Стартовая](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img16.jpg)
Содержание слайда: Инсталляция
Стартовая страница
{
start_url: “/start_screen.html”
}
№18 слайд![Инсталляция Scope scope myapp](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img17.jpg)
Содержание слайда: Инсталляция
Scope
{
“scope”: “/myapp”
}
№19 слайд![Инсталляция Обнаружение](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img18.jpg)
Содержание слайда: Инсталляция
Обнаружение инсталляции
@media all and (display-mode: standalone){ …}
if (window.matchMedia("(display-mode: standalone)").matches) {
/* Приложение установлено */
} else {
/* Вывести пользователю надоедающий баннер */
}
№20 слайд![Инсталляция Момент](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img19.jpg)
Содержание слайда: Инсталляция
Момент инсталляции
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 слайд![Инсталляция](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img20.jpg)
Содержание слайда: Инсталляция
№22 слайд![Camera](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img21.jpg)
Содержание слайда: Camera
№23 слайд![Camera https webqr.com https](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img22.jpg)
Содержание слайда: Camera
https://webqr.com/
https://github.com/gasolin/qrcode_scanner
https://github.com/LazarSoft/jsqrcode
https://davidwalsh.name/demo/iphone-camera.php
№24 слайд![Camera](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img23.jpg)
Содержание слайда: Camera
№25 слайд![Camera](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img24.jpg)
Содержание слайда: Camera
№26 слайд![Camera https github.com](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img25.jpg)
Содержание слайда: Camera
https://github.com/LazarSoft/jsqrcode/blob/master/src/qrcode.js
№27 слайд![Camera lt form action quot](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img26.jpg)
Содержание слайда: 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](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img27.jpg)
Содержание слайда: Service Workers
№29 слайд![Service Workers](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img28.jpg)
Содержание слайда: Service Workers
№30 слайд![Кеширование файлов var CACHE](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img29.jpg)
Содержание слайда: Кеширование файлов
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 слайд![Кеширование файлов](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img30.jpg)
Содержание слайда: Кеширование файлов
self.addEventListener('install', function(event) {
event.waitUntil(
// находим в глобальном хранилище Cache-объект с нашим //именем. если такого не существует, то он будет создан
caches.open(CACHE_NAME).then(function(cache) {
// загружаем в наш cache необходимые файлы
return cache.addAll(cacheUrls);
})
);
});
№32 слайд![Кеширование файлов](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img31.jpg)
Содержание слайда: Кеширование файлов
№33 слайд![Спасибо за внимание! Дмитрий](/documents_6/8efbb8f42e5244cbabfe4e0f1191b19b/img32.jpg)
Содержание слайда: Спасибо за внимание!
Дмитрий Тинитилов