mozilla
/
progressive-apps-hq
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Basic layouts for pages and features and feature collection added.

This commit is contained in:
Salvador de la Puente González 2016-01-02 11:11:17 +01:00
Родитель 54c6738892
Коммит 1c02a3073b
28 изменённых файлов: 588 добавлений и 314 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
.gitignore поставляемый
Просмотреть файл

@ -0,0 +1 @@
_site

29
_config.yml Normal file
Просмотреть файл

@ -0,0 +1,29 @@
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Progressive Web Applications HQ
description: >
Discover what makes a great web site more great, becoming a Progressive Web
Application, their main features and technologies. Rediscover the Web as the ultimate platform.
baseurl: "/progressive-apps-hq" # the subpath of your site, e.g. /blog
url: "http://github.io" # the base hostname & protocol for your site
collections:
features:
output: true
permalink: /features/:path/
defaults:
- scope:
path: ""
type: features
values:
layout: feature
twitter_username: mozilla
github_username: mozilla
# Build settings
markdown: kramdown

35
_features/discoverable.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
---
title: Discoverable
slug: discoverable
description: Are identifiable as applications and search engines can find them.
technologies:
- web-manifest
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

35
_features/fresh.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
---
title: Fresh
slug: fresh
description: Always up-to-date.
technologies:
- media-queries
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

35
_features/installable.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
---
title: Installable
slug: installable
description: Keep user's most useful app on their home screen without the hassle of an app store.
technologies:
- media-queries
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

34
_features/linkable.html Normal file
Просмотреть файл

@ -0,0 +1,34 @@
---
title: Linkable
slug: linkable
description: Easily share via URL and not require complex installation.
technologies:
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

36
_features/network-independent.html Normal file
Просмотреть файл

@ -0,0 +1,36 @@
---
title: Network independent
slug: network-independent
description: Work offline or on low quality networks.
technologies:
- service-workers
- app-shell
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

36
_features/progressive.html Normal file
Просмотреть файл

@ -0,0 +1,36 @@
---
title: Progressive
slug: progressive
description: Work for every user, regardless of browser choice.
technologies:
- service-workers
- web-manifest
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

36
_features/re-engageable.html Normal file
Просмотреть файл

@ -0,0 +1,36 @@
---
title: Re-engageable
slug: re-engageable
description: Make engagement easy by drawing user attention.
technologies:
- push-api
- web-notifications
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

35
_features/responsive.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
---
title: Responsive
slug: responsive
description: 'Fit any form factor: desktop, mobile, tablet, or whatever is next.'
technologies:
- media-queries
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

35
_features/safe.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
---
title: Safe
slug: safe
description: Served to prevent snooping and ensure content hasn’t been tampered with.
technologies:
- https
---
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<!--
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
-->

11
_includes/footer.html Normal file
Просмотреть файл

@ -0,0 +1,11 @@
<footer>
<div class="wrapper">
<p class="license">
Content available under a <a href="http://mozilla.org/en-US/foundation/licensing/website-content/" target="_blank">Creative Commons license</a>.
</p>
<ul>
<li><a id="link-repo" href="https://github.com/mozilla/progressive-apps-hq/">View source</a></li>
<li><a id="link-issue" href="https://github.com/mozilla/progressive-apps-hq/issues/new">Submit feedback</a></li>
</ul>
</div>
</footer>

30
_includes/head.html Normal file
Просмотреть файл

@ -0,0 +1,30 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ site.title }} - {{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
<link rel="apple-touch-icon" sizes="57x57" href="{{ "/apple-icon-57x57.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ "/apple-icon-60x60.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ "/apple-icon-72x72.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ "/apple-icon-76x76.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ "/apple-icon-114x114.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ "/apple-icon-120x120.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ "apple-icon-144x144.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ "/apple-icon-152x152.png" | prepend: site.baseurl }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-icon-180x180.png" | prepend: site.baseurl }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ "/android-icon-192x192.png" | prepend: site.baseurl }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/favicon-32x32.png" | prepend: site.baseurl }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ "/favicon-96x96.png" | prepend: site.baseurl }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/favicon-16x16.png" | prepend: site.baseurl }}">
<link rel="manifest" href="{{ "/manifest.json" | prepend: site.baseurl }}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{ "/ms-icon-144x144.png" | prepend: site.baseurl }}">
<meta name="theme-color" content="#ffffff">
</head>

22
_includes/header.html Normal file
Просмотреть файл

@ -0,0 +1,22 @@
<header class="blueprint">
<div class="wrapper">
<section class="titles">
<a href="{{ "/" | prepend: site.baseurl }}">
<h1>Progressive Web Apps <strong>HQ</strong></h1>
<h2>The <strong>Web</strong> is the platform</h2>
</a>
</section>
<nav>
<ul>
{% for page in site.html_pages %}
{% if page.title %}
<li><a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div>
<form>
<input type="search" placeholder="Search HQ" />
</form>
</header>

1
_includes/icon-github.html Normal file
Просмотреть файл

@ -0,0 +1 @@
<a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>

1
_includes/icon-github.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg viewBox="0 0 16 16"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 926 B

1
_includes/icon-twitter.html Normal file
Просмотреть файл

@ -0,0 +1 @@
<a href="https://twitter.com/{{ include.username }}"><span class="icon icon--twitter">{% include icon-twitter.svg %}</span><span class="username">{{ include.username }}</span></a>

1
_includes/icon-twitter.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg viewBox="0 0 16 16"><path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 787 B

20
_layouts/default.html Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<section class="content">
<div class="wrapper">
{{ content }}
</div>
</section>
{% include footer.html %}
</body>
</html>

32
_layouts/feature.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<section class="content">
<div class="wrapper">
<h2>{{ page.title }}</h2>
{{ content }}
<h2>Technologies</h2>
<ul class="grid">
{% for technology in page.technologies %}
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
{% endfor %}
</ul>
</div>
</section>
{% include footer.html %}
</body>
</html>

14
_layouts/page.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<div class="post-content">
{{ content }}
</div>
</article>

15
_layouts/post.html Normal file
Просмотреть файл

@ -0,0 +1,15 @@
---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
</header>
<div class="post-content" itemprop="articleBody">
{{ content }}
</div>
</article>

25
_posts/2015-12-31-welcome-to-jekyll.markdown Normal file
Просмотреть файл

@ -0,0 +1,25 @@
---
layout: post
title: "Welcome to Jekyll!"
date: 2015-12-31 18:49:21 +0100
categories: jekyll update
---
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
Jekyll also offers powerful support for code snippets:
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
[jekyll-docs]: http://jekyllrb.com/docs/home
[jekyll-gh]: https://github.com/jekyll/jekyll
[jekyll-talk]: https://talk.jekyllrb.com/

90
about.html
Просмотреть файл

@ -1,74 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,500,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/style.css" />
<title>About - Progressive Web Apps HQ</title>
<meta name="description" content="Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" sizes="57x57" href="../apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="../android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
<link rel="manifest" href="../manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="../ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body class="page">
<header class="blueprint">
<div class="wrapper">
<section class="titles">
<a href="index.html">
<h1>Progressive Web Apps <strong>HQ</strong></h1>
<h2>The <strong>Web</strong> is the platform</h2>
</a>
</section>
<nav>
<ul>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</header>
<section class="content">
<div class="wrapper">
<p>Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you.</p>
<h2>F.A.Q.</h2>
<ul class="faq">
<li>
<h3>What is Progressive Web Application HQ?</h3>
<p>Progressive Web Application HQ is a web site to explain the main characteristics of progressive web apps at the same time it serves as a hub for gathering documentation and resources. Progressive Application HQ is maintained by Mozilla <a href="https://wiki.mozilla.org/Apps">WADI</a> initiative.</p>
</li>
<li>
<h3>What is a Progressive Web Application?</h3>
<p>It is a regular website using certain technologies that enable it to behave like a native application under certain platforms such as Android or Firefox OS.</p>
</li>
</ul>
</div>
</section>
<footer>
<div class="wrapper">
<p class="license">
Content available under a <a href="http://mozilla.org/en-US/foundation/licensing/website-content/" target="_blank">Creative Commons license</a>.
</p>
<ul>
<li><a href="https://github.com/mozilla/progressive-apps-hq/">View source</a></li>
<li><a href="https://github.com/mozilla/progressive-apps-hq/issues/new">Submit feedback</a></li>
</ul>
</div>
</footer>
</body>
</html>
---
layout: default
title: About
---
<p>Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you.</p>
<h2>F.A.Q.</h2>
<ul class="faq">
<li>
<h3>What is Progressive Web Application HQ?</h3>
<p>Progressive Web Application HQ is a web site to explain the main characteristics of progressive web apps at the same time it serves as a hub for gathering documentation and resources. Progressive Application HQ is maintained by Mozilla <a href="https://wiki.mozilla.org/Apps">WADI</a> initiative.</p>
</li>
<li>
<h3>What is a Progressive Web Application?</h3>
<p>It is a regular website using certain technologies that enable it to behave like a native application under certain platforms such as Android or Firefox OS.</p>
</li>
</ul>

4
css/style.css
Просмотреть файл

@ -246,8 +246,8 @@ footer a:hover {
background-image: url('../icons/network-independent.svg');
}
.re-engagement {
background-image: url('../icons/re-engagement.svg');
.re-engageable {
background-image: url('../icons/re-engageable.svg');
}
.discoverable {

89
features/network-independent.html
Просмотреть файл

@ -1,89 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,500,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/style.css" />
<title>Network Independent - Progressive Web Apps HQ</title>
<meta name="description" content="Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" sizes="57x57" href="../apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="../android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
<link rel="manifest" href="../manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="../ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body class="feature">
<header class="blueprint">
<div class="wrapper">
<section class="titles">
<a href="../index.html">
<h1>Progressive Web Apps <strong>HQ</strong></h1>
<h2>The <strong>Web</strong> is the platform</h2>
</a>
</section>
<nav>
<ul>
<li><a href="../about.html">About</a></li>
</ul>
</nav>
</div>
</header>
<section class="content">
<div class="wrapper">
<h2>Network independent</h2>
<p>Progressive Web Apps can work even on lack of network or unreliable connectivity. No more blank connectivity error pages nor dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application layout for future use.</p>
<h2>Use cases</h2>
<ul class="use-cases">
<li>As a user, I want to revisit a site and get its contents even if no network is available.</li>
<li>As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.</li>
<li>As a developer, in situations with no connectivity, I want to control what is shown to the user.</li>
</ul>
<h2>Technologies</h2>
<ul class="grid">
<li>
<a href="../technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
</ul>
<h2>Resources</h2>
<ul class="resources">
<li><a href="https://github.com/GoogleChrome/sw-precache" target="_blank">sw-precache</a> is a node module to generate service worker code that will precache specific resources.</li>
<li><a href="https://github.com/mozilla/oghliner" target="_blank">oghliner</a> is not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
<li><a href="https://www.talater.com/upup/" target="_blank">UpUp</a>is a tiny script that makes sure your site is always there for your users.</li>
</ul>
</div>
</section>
<footer>
<div class="wrapper">
<p class="license">
Content available under a <a href="http://mozilla.org/en-US/foundation/licensing/website-content/" target="_blank">Creative Commons license</a>.
</p>
<ul>
<li><a href="https://github.com/mozilla/progressive-apps-hq/">View source</a></li>
<li><a href="https://github.com/mozilla/progressive-apps-hq/issues/new">Submit feedback</a></li>
</ul>
</div>
</footer>
</body>
</html>

0
icons/re-engagement.svg → icons/re-engageable.svg
Просмотреть файл

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 2.6 KiB

После

Ширина:  |  Высота:  |  Размер: 2.6 KiB

199
index.html
Просмотреть файл

@ -1,150 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,500,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
<title>Progressive Web Apps HQ</title>
<meta name="description" content="Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
---
layout: default
---
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body class="main">
<header class="blueprint">
<div class="wrapper">
<section class="titles">
<a href="index.html">
<h1>Progressive Web Apps <strong>HQ</strong></h1>
<h2>The <strong>Web</strong> is the platform</h2>
</a>
</section>
<nav>
<ul>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<form>
<input type="search" placeholder="Search HQ" />
</form>
</header>
<section class="content">
<div class="wrapper">
<h2>Features</h2>
<p>Progressive Web Applications are like good old web sites but <strong>better</strong>. In a modern browser they exhibit <strong>super&ndash;powers</strong> and become&hellip;</p>
<ul class="grid">
<li>
<a href="features/network-independent.html">
<div class="icon network-independent"></div>
<h3 id="network-independent">Network&nbsp;Independent</h3>
<p>Work offline or on low quality networks.</p>
</a>
</li>
<li>
<div class="icon re-engagement"></div>
<h3 id="re-engageable">Re-engageable</h3>
<p>Make engagement easy by drawing user attention.</p>
</li>
<li>
<div class="icon discoverable"></div>
<h3 id="discoverable">Discoverable</h3>
<p>Are identifiable as <em>applications</em> and search engines can find them.</p>
</li>
<li>
<div class="icon progressive"></div>
<h3 id="progressive">Progressive</h3>
<p>Work for every user, regardless of browser choice.</p>
</li>
<li>
<div class="icon responsive"></div>
<h3 id="responsive">Responsive</h3>
<p>Fit any form factor: desktop, mobile, tablet, or whatever is next.</p>
</li>
<li>
<div class="icon fresh"></div>
<h3 id="fresh">Fresh</h3>
<p>Always up-to-date.</p>
</li>
<li>
<div class="icon safe"></div>
<h3 id="safe">Safe</h3>
<p>Served to prevent snooping and ensure content hasn’t been tampered with.</p>
</li>
<li>
<div class="icon installable"></div>
<h3 id="installable">Installable</h3>
<p>Keep user's most useful app on their home screen without the hassle of an app store.</p>
</li>
<li>
<div class="icon linkable"></div>
<h3 id="linkable">Linkable</h3>
<p>Easily share via URL and not require complex installation.</p>
</li>
</ul>
<h2>Technologies</h2>
<p>Progressive Web Applications use the correct set of <strong>technologies</strong> to leverage UX in the Web&hellip;</p>
<ul class="grid">
<li>
<a href="technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="Web Application Manifest">Web Application Manifest</h3>
<p>Distribute your applications through the ultimate platform: the Web.</p>
</li>
<li>
<h3 id="Push API">Push API</h3>
<p>Stand your application out and draw the user attention.</p>
</li>
<li>
<h3 id="Add to homescreen">Add to homescreen</h3>
<p>Allow the web application to become a first-class citizen in your device.</p>
</li>
<li>
<h3 id="Background Sync">Background Sync</h3>
<p>Perform tasks on regaining connection.</p>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
<li>
<h3 id="Media Query">Media Query</h3>
<p>Adapt your design to bring the best user experience.</p>
</li>
</ul>
</div>
</section>
<footer>
<div class="wrapper">
<p class="license">
Content available under a <a href="http://mozilla.org/en-US/foundation/licensing/website-content/" target="_blank">Creative Commons license</a>.
</p>
<ul>
<li><a id="link-repo" href="https://github.com/mozilla/progressive-apps-hq/">View source</a></li>
<li><a id="link-issue" href="https://github.com/mozilla/progressive-apps-hq/issues/new">Submit feedback</a></li>
</ul>
</div>
</footer>
</body>
</html>
<h2>Features</h2>
<p>Progressive Web Applications are like good old web sites but <strong>better</strong>. In a modern browser they exhibit <strong>super&ndash;powers</strong> and become&hellip;</p>
<ul class="grid">
{% for feature in site.features %}
<li>
<a href="{{ feature.url | prepend: site.baseurl }}">
<div class="icon {{ feature.slug }}"></div>
<h3 id="{{ feature.slug }}">{{ feature.title }}</h3>
<p>{{ feature.description }}</p>
</a>
</li>
{% endfor %}
</ul>
<h2>Technologies</h2>
<p>Progressive Web Applications use the correct set of <strong>technologies</strong> to leverage UX in the Web&hellip;</p>
<ul class="grid">
<li>
<a href="technologies/service-workers.html">
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</a>
</li>
<li>
<h3 id="Web Application Manifest">Web Application Manifest</h3>
<p>Distribute your applications through the ultimate platform: the Web.</p>
</li>
<li>
<h3 id="Push API">Push API</h3>
<p>Stand your application out and draw the user attention.</p>
</li>
<li>
<h3 id="Add to homescreen">Add to homescreen</h3>
<p>Allow the web application to become a first-class citizen in your device.</p>
</li>
<li>
<h3 id="Background Sync">Background Sync</h3>
<p>Perform tasks on regaining connection.</p>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
<li>
<h3 id="Media Query">Media Query</h3>
<p>Adapt your design to bring the best user experience.</p>
</li>
</ul>