Basic layouts for pages and features and feature collection added.
This commit is contained in:
Salvador de la Puente González
Родитель
54c6738892
Коммит
1c02a3073b
|
|
@ -0,0 +1 @@
|
|||
_site
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
До Ширина: | Высота: | Размер: 2.6 KiB После Ширина: | Высота: | Размер: 2.6 KiB |
199
index.html
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–powers</strong> and become…</p>
|
||||
<ul class="grid">
|
||||
<li>
|
||||
<a href="features/network-independent.html">
|
||||
<div class="icon network-independent"></div>
|
||||
<h3 id="network-independent">Network 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…</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–powers</strong> and become…</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…</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>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче