Difference between revisions of "PWA"
| (One intermediate revision by the same user not shown) | |||
| 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 | ||
Latest revision as of 14:53, 31 January 2018
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
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.
PWA created by DooWon Kim: https://www.doowonkim.com
Written by DooWon Kim and Arjen Suijker
