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

Краткая история одного стартапа

2007

Инсталляция

Инсталляция iOS

2008

2010

Проблемы приложений

Нет поискового трафика
Нет трафика с емейл рассылок
Нет кроссплатформенности

Progressive Web Apps

Progressive - Work for every user, regardless of

Progressive Web Apps

Safe - Served via HTTPS to prevent snooping

Инсталляция

https://www.w3.org/TR/appmanifest/ Working Draft 26 April 2016
Chrome +
Mozilla +
Opera +
Edge Under

Инсталляция

Инсталляция Название приложения

{
name: “My totally awesome photo app”
short_name: “Photos”
}

Инсталляция Иконки

{
"icons": [{
"src": "icon/lowres",
"sizes": "64x64",
"type": "image/webp"
}]
}

Инсталляция Режим отображения и ориентация

{
"display": "fullscreen",
"orientation": "landscape"
}
fullscreen, standalone, minimal-ui, browser

Инсталляция Стартовая страница

{
start_url: “/start_screen.html”
}

Инсталляция Scope

{
“scope”: “/myapp”
}

Инсталляция Обнаружение инсталляции

@media all and (display-mode: standalone){ …}
if (window.matchMedia("(display-mode: standalone)").matches) {
/*

Инсталляция Момент инсталляции

function handleInstall(ev){
const date = new Date(ev.timeStamp / 1000);
console.log(`Yay!

Инсталляция

Camera

Camera

https://webqr.com/
https://github.com/gasolin/qrcode_scanner
https://github.com/LazarSoft/jsqrcode
https://davidwalsh.name/demo/iphone-camera.php

Camera

Camera

Camera https://github.com/LazarSoft/jsqrcode/blob/master/src/qrcode.js

Camera

Service Workers

Service Workers

Кеширование файлов

var CACHE_NAME = 'app_serviceworker_v_1',
cacheUrls = [
'/test_serviceworker/',
'/test_serviceworker/index.html',
'/test_serviceworker/css/custom.css',

Кеширование файлов

self.addEventListener('install', function(event) {
event.waitUntil(
// находим в глобальном хранилище Cache-объект

Кеширование файлов