PWA - Revision history

Donow: /* How to create a Progressive Web App */

2018-01-31T14:53:08Z

How to create a Progressive Web App

← Older revision		Revision as of 14:53, 31 January 2018
Line 71:		Line 71:
	In order for the progressive web app to be downloadable after finishing the previous step, the files must be all uploaded into a domain with an https, not http.		In order for the progressive web app to be downloadable after finishing the previous step, the files must be all uploaded into a domain with an https, not http.
	Without the https ssl certificate, the app will not function. In versio, after getting a domain for the app, the ssl certificate can be easily purchased. Once the domain has the https, open up the link in chrome on the mobile device. A message will appear asking if the user wishes to download the app, click yes and the app will be downloaded onto the mobile device.		Without the https ssl certificate, the app will not function. In versio, after getting a domain for the app, the ssl certificate can be easily purchased. Once the domain has the https, open up the link in chrome on the mobile device. A message will appear asking if the user wishes to download the app, click yes and the app will be downloaded onto the mobile device.


	PWA created by DooWon Kim: https://www.doowonkim.com		PWA created by DooWon Kim: https://www.doowonkim.com

	Written by DooWon Kim and Arjen Suijker		Written by DooWon Kim and Arjen Suijker

Donow: /* How to create a Progressive Web App */

2018-01-31T14:52:47Z

How to create a Progressive Web App

← Older revision		Revision as of 14:52, 31 January 2018
Line 72:		Line 72:
	Without the https ssl certificate, the app will not function. In versio, after getting a domain for the app, the ssl certificate can be easily purchased. Once the domain has the https, open up the link in chrome on the mobile device. A message will appear asking if the user wishes to download the app, click yes and the app will be downloaded onto the mobile device.		Without the https ssl certificate, the app will not function. In versio, after getting a domain for the app, the ssl certificate can be easily purchased. Once the domain has the https, open up the link in chrome on the mobile device. A message will appear asking if the user wishes to download the app, click yes and the app will be downloaded onto the mobile device.

			PWA created by DooWon Kim: https://www.doowonkim.com
	Written by DooWon Kim and Arjen Suijker		Written by DooWon Kim and Arjen Suijker

Donow: /* How to create a Progressive Web App */

2018-01-31T14:48:10Z

How to create a Progressive Web App

← Older revision		Revision as of 14:48, 31 January 2018
Line 71:		Line 71:
	In order for the progressive web app to be downloadable after finishing the previous step, the files must be all uploaded into a domain with an https, not http.		In order for the progressive web app to be downloadable after finishing the previous step, the files must be all uploaded into a domain with an https, not http.
	Without the https ssl certificate, the app will not function. In versio, after getting a domain for the app, the ssl certificate can be easily purchased. Once the domain has the https, open up the link in chrome on the mobile device. A message will appear asking if the user wishes to download the app, click yes and the app will be downloaded onto the mobile device.		Without the https ssl certificate, the app will not function. In versio, after getting a domain for the app, the ssl certificate can be easily purchased. Once the domain has the https, open up the link in chrome on the mobile device. A message will appear asking if the user wishes to download the app, click yes and the app will be downloaded onto the mobile device.


			Written by DooWon Kim and Arjen Suijker

Arjensuijker at 14:45, 31 January 2018

2018-01-31T14:45:40Z

← Older revision		Revision as of 14:45, 31 January 2018
Line 1:		Line 1:
			== How to create a Progressive Web App ==
			Porgressive Web Apps are basically websites that act like apps on mobile devices. Google and Microsoft might even list them in their app store!

	'''Manifest.json'''		'''Manifest.json'''

Donow: Created page with "'''Manifest.json''' After making sure the design of the web app is set and works on mobile devices, to get the app to be downloadable via chrome and function as a progressive..."

2018-01-31T13:51:24Z

Created page with "'''Manifest.json''' After making sure the design of the web app is set and works on mobile devices, to get the app to be downloadable via chrome and function as a progressive..."

New page

'''Manifest.json'''

After making sure the design of the web app is set and works on mobile devices, to get the app to be downloadable via chrome and function as a progressive web app, a manifest.json file is necessary. The manifest.json file will give specifications of the web app such as the display view, color, name and also the icon of the app. The manifest file should be located in the same directory as the homepage file or the index.html. The content of the file should look as following:

{
"short_name": "name of app",
"name": "name of app",
"background_color": "#212163",
"theme_color": "#141236",
"display": "standalone",
"orientation": "portrait",
"icons": [
{
"src": "css/48Artboard.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "css/96Artboard.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "css/192Artboard.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html"
}

In addition, make sure to have the line below pasted within the <head></head> in the html file.

<link rel="manifest" href="manifest.json">

(''display: standalone'') means that the view of the app will not allow the navigation bar to show as if it was being viewed in a browser.

(''orientation: portrait'') the orientation can also be landscape if the app that is being developed requires a landscape view.

For more information visit: https://developers.google.com/web/fundamentals/web-app-manifest/

'''ServiceWorker'''

Within the <body></body> of the html file make sure to create at the last line of the body <script></script> and then paste the following code below within the <script></script>,

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}

Create a new file named '''sw.js''' and paste the code below inside

self.addEventListener('fetch', function(event) {console.log('test')
});

'''https'''

In order for the progressive web app to be downloadable after finishing the previous step, the files must be all uploaded into a domain with an https, not http.
Without the https ssl certificate, the app will not function. In versio, after getting a domain for the app, the ssl certificate can be easily purchased. Once the domain has the https, open up the link in chrome on the mobile device. A message will appear asking if the user wishes to download the app, click yes and the app will be downloaded onto the mobile device.