Adding technologies. Relating features with technologies.
This commit is contained in:
Salvador de la Puente González
Родитель
1c02a3073b
Коммит
4dbcb1cfe8
|
|
@ -16,12 +16,20 @@ collections:
|
|||
features:
|
||||
output: true
|
||||
permalink: /features/:path/
|
||||
technologies:
|
||||
output: true
|
||||
permalink: /technologies/:path/
|
||||
defaults:
|
||||
- scope:
|
||||
path: ""
|
||||
type: features
|
||||
values:
|
||||
layout: feature
|
||||
- scope:
|
||||
path: ""
|
||||
type: technologies
|
||||
values:
|
||||
layout: technology
|
||||
twitter_username: mozilla
|
||||
github_username: mozilla
|
||||
|
||||
|
|
|
|||
|
|
@ -2,35 +2,13 @@
|
|||
title: Network independent
|
||||
slug: network-independent
|
||||
description: Work offline or on low quality networks.
|
||||
usecases:
|
||||
- As a user, I want to revisit a site and get its contents even if no network is available.
|
||||
- As a user, I want to browse any kind of content I visited at least once, even under situations of poor connectivity.
|
||||
- As a developer, in situations with no connectivity, I want to control what is shown to the user.
|
||||
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>
|
||||
-->
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
<body class="{{ page.layout }}">
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
|
|
@ -11,15 +11,23 @@
|
|||
<div class="wrapper">
|
||||
<h2>{{ page.title }}</h2>
|
||||
{{ content }}
|
||||
<h2>Use cases</h2>
|
||||
<ul class="use-cases">
|
||||
{% for usecase in page.usecases %}
|
||||
<li>{{ usecase }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<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>
|
||||
{% for technology in site.technologies %}
|
||||
{% if page.technologies contains technology.slug %}
|
||||
<li>
|
||||
<a id="{{ technology.id }}" href="{{ technology.url | prepend: site.baseurl }}">
|
||||
<h3 id="{{ technology.title }}">{{ technology.title }}</h3>
|
||||
<p>{{ technology.description }}</p>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
<section class="content">
|
||||
<div class="wrapper">
|
||||
<h2>{{ page.title }}</h2>
|
||||
{{ content }}
|
||||
<ul class="status-doc">
|
||||
<li class="status">{{ page.title }} implementation <a href="{{ page.status }}" target="_blank">status</a>.</li>
|
||||
<li class="doc">Look at the <a href="{{ page.spec }}" target="_blank">official specification</a>.</li>
|
||||
</ul>
|
||||
<h2>Resources</h2>
|
||||
<ul class="resources">
|
||||
{% for resource in page.resources %}
|
||||
<li class="{{ resource.type }}">{{ resource.description }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Add to homescreen
|
||||
slug: add-to-homescreen
|
||||
description: Allow the web application to become a first-class citizen in your device.
|
||||
---
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: App Shell
|
||||
slug: app-shell
|
||||
description: Use app shell architecture to reach almost instant first draw.
|
||||
---
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Background Sync
|
||||
slug: background-sync
|
||||
description: Perform tasks on regaining connection.
|
||||
---
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Media query
|
||||
slug: media-query
|
||||
description: Adapt your design to bring the best user experience.
|
||||
---
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Push API
|
||||
slug: push-api
|
||||
description: Stand your application out and draw the user attention.
|
||||
---
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Service Workers
|
||||
slug: service-workers
|
||||
description: "Cache network resources and enable <strong>super fast</strong> access to them."
|
||||
status: 'https://platform-status.mozilla.org/#service-worke'
|
||||
spec: 'https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.htm'
|
||||
resources:
|
||||
- type: doc
|
||||
description: '<a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Workers</a> in the MDN.'
|
||||
- type: demo
|
||||
description: '<a href="https://serviceworke.rs" target="_blank">Service Workers Cookbook</a> is a compendium of practical Service Worker examples.'
|
||||
- type: tool
|
||||
description: '<a href="https://github.com/fxos-components/serviceworkerware" target="_blank">Service Worker Ware</a> is an <em>Express-like</em> microframework for easy Service Workers development.'
|
||||
---
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Web Application Manifest
|
||||
slug: web-manifest
|
||||
description: 'Distribute your applications through the ultimate platform: the Web.'
|
||||
---
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
32
index.html
32
index.html
|
|
@ -18,34 +18,12 @@ layout: default
|
|||
<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">
|
||||
{% for technology in site.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 href="{{ technology.url | prepend: site.baseurl }}">
|
||||
<h3 id="{{ technology.title }}">{{ technology.title }}</h3>
|
||||
<p>{{ technology.description }}</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>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,74 +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>Service Workers - 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="technology">
|
||||
<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>Service Workers</h2>
|
||||
<p>Service Workers are pieces of JavaScript that are run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events.</p>
|
||||
<ul class="status-doc">
|
||||
<li class="status"><a href="https://platform-status.mozilla.org/#service-worker" target="_blank">Service Workers</a> implementation status.</li>
|
||||
<li class="doc">Look at the <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html" target="_blank">official specification</a>.</li>
|
||||
</ul>
|
||||
<h2>Resources</h2>
|
||||
<ul class="resources">
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Workers</a> in the MDN.
|
||||
<li><a href="https://serviceworke.rs" target="_blank">Service Workers Cookbook</a> is a compendium of practical Service Worker examples.</li>
|
||||
<li><a href="https://github.com/fxos-components/serviceworkerware" target="_blank">Service Worker Ware</a> is an <em>Express-like</em> microframework for easy Service Workers development.</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>
|
||||
Загрузка…
Ссылка в новой задаче