gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
guide/english/progressive-web-apps/add-to-homescreen/index.md Normal file
View File

@ -0,0 +1,144 @@
---
title: Add To Homescreen
---
## Add To Homescreen
* Another important file after service worker in PWA is manifest.json, Which helps your webapp to get installed on the users homescreen like a native mobile app. This file contains the informations of your web app to work standalone similar to native mobile apps. The manifest is explained in detail below.
### Browser Support for Add To Homescreen
Add to Homescreen functionality is currently supported by:
* Chrome
* iOS Safari
You can see the latest status of browser support of this feature [here](https://caniuse.com/#feat=web-app-manifest).
### On Android
On Android, the "add to homescreen" banner comes up automatically if you meet the following requirements given below.
This is what it should look like on Android:
| Add to homescreen prompt | When app launched |
| :----------------------: | :---------------: |
| ![prompt][add1] | ![launch][add2] |
[add1]: https://user-images.githubusercontent.com/15358452/31663686-860779f0-b375-11e7-85c9-1387d9b3bfcf.png "Add to homescreen prompt on android"
[add2]: https://user-images.githubusercontent.com/15358452/31663690-89b0d998-b375-11e7-8a84-f3e33be9a2c2.png "Launch from Homescreen"
#### Requirements
* A `manifest.json` file should contain the following properties:
* `short name`
* `name`
* `192x192` size of `png` icon
* `start_url`
* include a service worker that is both registered and activated
* the website served over HTTPS (you can still try this with localhost without HTTPS)
* the website meets engagement heuristics defined by Chrome
#### manifest.json
```json
{
"name": "FreeCodeCamp",
"short_name": "FCC",
"theme_color": "#00FF00",
"background_color": "#00FF00",
"display": "standalone",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
```
* `name` is the name of the web app. (It will be shown in the launch screen)
* `short name` is the short name of the web app. (It will be shown below the icon of your application)
* `theme_color` is the color of the top of the browser.
* `background_color` is the background color of the launch screen.
* `display` is the way the web app should display once launched on the phone.Right now there of 4 different options available now. They are,
* `fullscreen` - Tkes the whole space of your mobile screen.
* `standalone` - This option will make your app to work like a native mobile application. this makes the application to open on a new window, and place your application icon launcher on the mobile.
* `minimal-ui` - This option is similar to standalone but with less UI Options
* `browser` - This is the default one. This will open the link in your browser as a new window
* `start_url` define the starting url of the website.
* `icons` is an array that store all the images location, sizes and type.
### On other devices
Although this method does not work on iOS and Windows, there is a fallback method.
**iOS**
On iOS, the "add to homescreen" button must be added manually. Add the following meta tags to the head section of your HTML to support iOS web app icon.
```html
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="green">
<meta name="apple-mobile-web-app-title" content="FreeCodeCamp">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-72x72.png" sizes="72x72">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-128x128.png" sizes="128x128">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-384x384.png" sizes="384x384">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-512x512.png" sizes="512x512">
```
**Windows**
On windows phone, add the following meta tags to the head section of your HTML:
```html
<meta name="msapplication-TileImage" content="/assets/images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="green">
```
### References
1. [superoo7, "A High Level View of Progressive Web App" Posted: December 18, 2017.](https://steemit.com/web/@superoo7/a-high-level-view-of-progressive-web-app)
2. [Matt Gaunt & Paul Kinlan, "Web App Install Banners" Posted: November 14, 2017.](https://developers.google.com/web/fundamentals/app-install-banners/)

19
guide/english/progressive-web-apps/app-shell/index.md Normal file
View File

@ -0,0 +1,19 @@
---
title: App Shell
---
## App Shell
This is a stub.
<a href='https://github.com/freecodecamp/guides/tree/master/src/pages/progressive-web-apps/app-shell/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. -->
<!-- Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information
<!-- Please add any articles you think might be helpful to read before writing the article -->

58
guide/english/progressive-web-apps/index.md Normal file
View File

@ -0,0 +1,58 @@
---
title: Progressive Web Apps
---
## Progressive Web Apps
Progressive Web Apps or "PWAs" appear to be more than just a fad, but a fundamentally different way of approaching what a website can and should be on whatever platform you are viewing it from.
PWAs can install portions of themselves onto devices for offline viewing, use service workers to deliver content as needed when a connection is available and best of all standardize certain functionality between mobile and desktop devices.
### Features
Specific features of PWAs include:
* **Responsive**
* fits any form factor
* **Offline Capabilities**
* progressively-enhanced with Service Workers to let them work offline
* **Native App Feel**
* adopts a Shell & Content application model to create app navigation & interactions
* **Fresh**
* always up-to-date thanks to service workers
* **Safe**
* served via TLS (a Service Worker requirement) to prevent snooping
* **Discoverable**
* identifiable as "applications" thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
* **Engaging**
* can access the re-engagement UIs of the OS through Push Notifications
* **Easy Installation**
* can be added to the home screen through browser-provided prompts, allowing users to "keep" apps they find most useful without the hassle of an app store
* **Linkable**
* meaning they're zero-friction, zero-install, and easy to share
* the social power of URLs matters
> These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.<sup>1</sup>
### Progressive Enhancement
Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience. [- Lighthouse](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced-b5ad7cf7a447)<sup>2</sup>
A great analogy from [Aaron Gustafson](http://alistapart.com/article/understandingprogressiveenhancement) is that progressive enhancement (PE) is like a peanut M&M.
> "The Peanut is your content, the chocolate coating is your presentation layer and your JavaScript is the hard candy shell."
This implies that depending on the browser, the experience can change.
### Demo
<iframe width="560" height="315" src="https://www.youtube.com/embed/esfi7ZLibmk" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
### References
1. [Russell, Alex. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul" "Infrequently Noted" Posted: June 15, 2015.](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/)
2. [Progressive Web Apps - Google Developers](https://developers.google.com/web/progressive-web-apps/)
3. [Introduction to Progressive Web Apps - MDN Web Docs] (https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Introduction)
4. [Hume, Dean. Alan. "Progressive Web Apps: Live book](https://livebook.manning.com/#!/book/progressive-web-apps/about-this-book/)
5. [Hofmann, Simon. "The Road to PWA - Part 1"] (https://blog.simon-hofmann.org/pwa/js/2018/05/07/road-to-pwa01.html)

84
guide/english/progressive-web-apps/service-workers/index.md Normal file
View File

@ -0,0 +1,84 @@
---
title: Service Workers
---
## Service Workers
Service Worker is a script that works on browser background without user interaction independently. Also, It resembles a proxy that works on the user side. With this script, you can track network traffic of the page, manage push notifications and develop “offline first” web applications with Cache API.
### What can we do with Service Worker?
You can dominate Network Traffic!
You can manage all network traffic of the page and do any manipulations.
You can “Cache”!
You can cache any request/response pair with Service Worker and Cache API and you can access these offline content anytime.
You can manage Push Notifications!
You can manage push notifications with Service Worker and show any information message to the user.
Although Internet connection is broken, you can start any process with Background Sync of Service Worker.
### What can’t we do with Service Worker?
You can’t access the window!
You can’t access the window, therefore, You can’t any manipulation DOM elements.
But, you can communicate to the window through postMessage and manage processes that you want.
You can’t work it on 80 Port!
Service Worker just can work on HTTPS protocol. But you can work on localhost during development.
### Service Worker Lifecycle
Service Worker lifecycle has 3 step; Registration, Installation, and Activation.
### Registering a Service Worker
Before installing a Service Worker, you need to register one from your main JavaScript file. This can be done thanks to the method navigator.serviceWorker.register like this:
```javascript
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceWorkerArticles.js', { scope: '/' }):
}
```
This method takes two parameters:
The name of the javascript file, relative to the root of your domain
(Optional) The scope to give a specific perimeter where your ServiceWorker has power to work. Basically it is the folder where it has control for assets, the default value is the root of the domain.
### Installing, and using a Service Worker
Now that we registered a Service Worker from ‘serviceWorker.js’, lets fill this file so your website about political article can have its article read offline if you user has already visited the needed article before.
For most of the actions, you just need to do some addEventListener, as Service Workers already have a plenty of useful Events to listen to!
```javascript
self.addEventListener('install', cach => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/',
'/style.css',
'/app.js',
'/favicon.ico',
'/frontPageCover.jpg',
]);
})
);
});
```
We have 3 interesting methods here! Lets take a quick look to all of them:
event.waitUntil: This method is used in an event to make it wait for a Promise to be resolved, in our case we have to compute things from cache before the Service Worker is considered installed
caches.open: This method comes form the CacheStorage API, it returns a Promise that containing the cache you asked in given parameter.
cache.addAll: This method comes form the Cache API (do not confuse with the CacheStorage, the Cache API is an object that is returned by the caches.open ). This method takes an array of URLs, and for each of them try to retrieve them and store it in the Cache object.
So with this code, your Service Worker is now registered, installed, and active. If you go to the home page of your website, and reload it while being in offline mode, you should be able to see your page just as before!
#### More Information
[A beginner’s guide to Service Workers](https://medium.com/samsung-internet-dev/a-beginners-guide-to-service-workers-f76abf1960f6)
[Service Workers in JS and offline reading](https://medium.com/quick-code/service-workers-in-js-and-offline-reading-7bac9d4980ea)
[What is service worker?](https://medium.com/commencis/what-is-service-worker-4f8dc478f0b9)