In the site headers, in the section between the <head> and </head> tags, the viewport tag must be present.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If all this is already in place, there is very little left for your site to turn into a simple PWA application.
1. Create a Webmanifest file
2. Create Service Worker file
3. Add PWA support code to site pages.
4. You can also add a special button to install the application (optional)
By the way, if you have any difficulties with the first and second steps of the instructions, you can use this code generator for PWA, which will help simplify the first and second steps.
1. Create a Webmanifest file.
In a text editor (I recommend using Notepad) create a new file "mymanifest.webmanifest". In this case, webmanifest is not the file name, but its extension, so it is written after the dot.A working example of such a file is: webmanifest (you can save, rename and correct the values).
Paste the following code into this file.
{
"name": "UNILA.RU",
"short_name": "UNILA.RU",
"description": "UNILA.RU",
"icons": [
{"src":"/images/icons/512.png","sizes":"512x512","type":"image/png"},
{"src":"/images/icons/256.png","sizes":"256x256","type":"image/png"},
{"src":"/images/icons/128.png","sizes":"128x128","type":"image/png"}
],
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#333333"
}
"name": "UNILA.RU",
"short_name": "UNILA.RU",
"description": "UNILA.RU",
"icons": [
{"src":"/images/icons/512.png","sizes":"512x512","type":"image/png"},
{"src":"/images/icons/256.png","sizes":"256x256","type":"image/png"},
{"src":"/images/icons/128.png","sizes":"128x128","type":"image/png"}
],
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#333333"
}
Replace the content in the code as described below.
name - enter the name of your application. It will be displayed on the screen when the application is launched.
short_name - short name of your application. It will be displayed on the desktop under the application icon.
descriptrion - description of your application. When working with the application, it is usually not visible.
Upload three images with the icon (logo) of your application to any folder on your site, in three different sizes:
512 pixels by 512 pixels,
256x256
128x128.
In the code above, in the icons section, replace the links to images with your own - specify the addresses of your icons on your server. The path is specified in relative format without the domain name at the beginning.
Further....
start_url - specify a page or section on your site that should open immediately after the application starts. If this is the main page, then just leave the single slash: /
scope - the scope of your application. Within the specified scope, links within an application open within that application, outside of the specified scope, internal links can open in the browser. You can specify a specific directory (example: "/catalog") or the entire site. If you leave out the single slash / then your entire site will be considered the scope of the application.
display - here you can specify the display mode of your site in the application.
"display": "standalone" = full screen like normal mobile apps.
"display": "browser" = like in a regular browser, with address bar and other browser elements.
theme_color = main theme color (#ffffff = white)
background_color = background color on first screen when app starts #333333 (dark grey)
The color is specified in HEX format, which consists of the # character followed by six characters.
Save the webmanifest file and upload it to the start, root folder of your site.
2. Create a Service Worker
Now create a file called serviceworker.js (here the file extension is .js).Working example: Service Worker, you can save, rename and change the values to your own.
Paste the following code into this file
self.addEventListener('install', function(e) {e.waitUntil(caches.open('5f341b54b5b8d6f39fb39a4343d4f215').then(function(cache){return cache.addAll([
'/images/icons/128.png',
'/images/icons/256.png',
'/images/icons/512.png'
])}))})
self.addEventListener('fetch',function(e) {
e.respondWith(caches.match(e.request).then(function(response){return response || fetch(e.request)}))})
'/images/icons/128.png',
'/images/icons/256.png',
'/images/icons/512.png'
])}))})
self.addEventListener('fetch',function(e) {
e.respondWith(caches.match(e.request).then(function(response){return response || fetch(e.request)}))})
Now change some details.
Instead of this value: 5f341b54b5b8d6f39fb39a4343d4f215 - you can insert any identifier for your application, it must consist of Latin letters or numbers.
The following is a list of those files that you want to cache (save) in the application so that they are not downloaded from your server every time the application is launched. This will help save traffic and speed up the application.
It can be some kind of images, style files or font files or pdf files. It can also be the pages of your site themselves along with the content.
You should think carefully before adding any page to the application cache. After all, even after changing the page on the site, the cached page in the application can be displayed in the same way as at the time of caching.
So, list the main files and pages that you definitely want to cache. Specify each file in single quotes and on a new line, specify a comma at the end of each line, and you do not need to specify a comma at the end of the last line of the list of files.
Save the serviceworker.js file and upload it to the root directory of your site.
3. Calling the PWA installation on the site pages.
There is very little left. Now you need to connect the created files and the code for calling the PWA installation of the page of your site.In the source code of your site, in the file that is responsible for generating the page, add a few lines between the <head> and </head> tags:
<link rel="manifest" href="/mymanifest.webmanifest" />
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
Now, if you did everything right and your site meets the minimum requirements for PWA, when visiting your site from mobile devices, users will see an invitation to install your site on the home screen as an application.
Keep in mind that such an offer may not appear immediately, depending on the browser, it will take more or less time to spend on the site before the browser shows a notification about the ability to install the application.
4. Button to install the application
If you wish, you can install a special button on the site, by clicking on which, the user himself will start the process of installing your application, without waiting for the browser to offer.In this case, you can not install the code for automatic application installation on all pages of the site, but create a special application installation page and use the required code only on this page.
So, to create a button for installing the application, on any page of your site, between the <head> and <head> tags, insert the code as indicated above:
<link rel="manifest" href="/mymanifest.webmanifest" />
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
Insert a link anywhere on the page - a button, by clicking on which the user can start the installation of the application:
<a href="javascript:void(0);" id="appInstall">INSTALL APP</a>
Also, anywhere on the page (preferably at the bottom before the </body> tag, paste the code:
<script>
let installButton = document.getElementById('appInstall');
let prompt;
window.addEventListener('beforeinstallprompt', function(e){
e.preventDefault();
prompt = e;
});
installButton.addEventListener('click', function(){
prompt.prompt();
})
</script>
let installButton = document.getElementById('appInstall');
let prompt;
window.addEventListener('beforeinstallprompt', function(e){
e.preventDefault();
prompt = e;
});
installButton.addEventListener('click', function(){
prompt.prompt();
})
</script>
Now users do not have to wait for the browser to prompt them to install your application, they can start the installation process themselves.
As an example, look at the page for installing the application of this site
However, not all browsers support this feature, Opera may not work in a mobile browser, but it should work in other popular browsers.