Ещё лучше, чем настоящие!

Ещё лучше,
чем настоящие!

Установка веб-приложений

350 млн всего
277 млн на мобильных
50 млн на компьютерах

Офлайн API устройства Пуш-уведомления На домашний экран

Safari

			<head>
				<link rel="apple-touch-icon" href="icon.png">
				<link rel="apple-touch-startup-image" href="startup.png">
				<meta name="apple-mobile-web-app-capable" content="yes">
				<meta name="apple-mobile-web-app-status-bar-style" content="black">
			</head>

Configuring Web Applications

Dev.Opera

Код на GitHub

Service Worker

'use strict';

const PREFIX = 'devopera';
const HASH = '1523903b';
const OFFLINE_CACHE = `${PREFIX}-${HASH}`;
const OFFLINE_URL = 'offline.html';

importScripts('sw-cache-polyfill.js');

Service Worker

self.addEventListener('install', function(event) {
	event.waitUntil(
		caches.open(OFFLINE_CACHE).then(function(cache) {
			return cache.addAll([
				OFFLINE_URL,
				'/styles/1523903b.css',
				'/images/github.svg', …

Service Worker

self.addEventListener('fetch', function(event) {
	if (
		event.request.method == 'GET' &&
		event.request.headers.get('accept')
			.includes('text/html')
	) {
		event.respondWith({ …

Service Worker

fetch(event.request).catch(function(exception) {
	console.error(
		'Запрос не прошёл, берём офлайн', exception);
	return caches.open(OFFLINE_CACHE).then(
		function(cache) {
			return cache.match(OFFLINE_URL);
		});

Service Worker

} else {
	event.respondWith(
		caches.match(event.request).then(
			function(response) {
				return response || fetch(event.request);
			}

dev.opera.com/service-worker.js

Иконки

			<link rel="apple-touch-icon" sizes="72x72" href="…">
			<link rel="apple-touch-icon" sizes="76x76" href="…">
			<link rel="apple-touch-icon" sizes="114x114" href="…">
			<link rel="apple-touch-icon" sizes="120x120" href="…">
			<link rel="apple-touch-icon" sizes="144x144" href="…">
			<link rel="apple-touch-icon" sizes="152x152" href="…">
			<link rel="apple-touch-icon" sizes="180x180" href="…">

Web Manifest

{
	"short_name": "Dev.O",
	"name": "Dev.Opera",
	"icons": [
		{
			"src": "apple-touch-icon.png",
			"sizes": "180x180",
			"type": "image/png"
		}
	],
	"start_url": "/",
	"display": "standalone",
		// fullscreen,
		// browser,
		// minimal-ui
	"orientation": "any"
		// portrait,
		// landscape
}

dev.opera.com/devopera.webmanifest

Медиавыражения

@media (display-mode:fullscreen)
	and (orientation:landscape) {
	/* fullscreen + landscape */
	}
@media (display-mode:standalone) {
	/* standalone */
	}

Guitar Tuner

Код на GitHub

Voice Memos

Код на GitHub

The Air Horner

Код на GitHub

Цвет приложения

<meta name="theme-color"
	content="#4885c4">

theme-color и background_color

Как спрашивать пользователя?

Магазин веб-приложений?

Полноценная установка?

Ещё? Ещё!

sokr.me/wap

@pepelsbey

Shower

Вопросы?