# Progressive Web Apps (PWA)
# Intro
Progressive Web Apps provide an installable, App-like experience on desktop and mobile. They're web apps that are fast and reliable that work in any browser.
# Manifest
The web app manifest is a simple JSON file that configures how your app appears to the user. Using the web app manifest, your web app can:
- Tell the browser you want your app to open in a standalone window (display).
- Define what page will open when the app is first launched (start_url).
- Define what the app should look like on the dock or app launcher (short_name, icons).
- Create a splash screen (name, icons, colors).
- Tell the browser to open the window in landscape, or portrait mode (orientation).
Just create a file named public/manifest.json in your project.
{
"short_name": "Weather",
"name": "Weather: Do I need an umbrella?",
"description": "Weather forecast information",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "maskable"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6"
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Icons
Icons for the home screen. app launcher, task switcher, splash screen, should be properly configured.
The icons property is an array of image objects. Each object must include the src, a sizes property, and the type of image. To use maskable icons, sometimes referred to as adaptive icons on Android, you'll also need to add "purpose": "any maskable" | "maskable" to the icon property.
to make those Icons here are 2 websites to make it
You need an image size of at least 512x512
# Installation
When a Progressive Web App installed, it should look and behaves like all the other installed apps. There is a Guide with best practices for it.
Example:
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
});
2
3
4
5
6
7
8
9
10
# Promote Install
If your PWA has use cases where it’s helpful for a user to install your app.
Check out Patterns for Promoting PWA Installation, a series of recommended patterns and best practices that you can use to promote the installation of your Progressive Web App.
It includes patterns for notifying users within the core UI of your app, within your app's content, or letting the browser notify the user. And, it includes recommendations on how to place the notification for different types of apps.
# Notification (new Updates)
Have you ever been on a website and noticed a popup notification that suggests that there is a new version of the site available?
We can hook into updated function on the registered Service Worker. Even though you can cache tons of files, the Service Worker only checks the hash of your registered service-worker.js. If that file has only 1 little change in it, it will treated as a new version.
Example:
updated (registration) {
console.log('New content is available; please refresh.');
document.dispatchEvent(
new CustomEvent('swUpdated', { detail: registration })
);
},
2
3
4
5
6
# Safe and secure (HTTPS, SSL)
To work progressive web app (add to home screen prompt), you need a secure connection. With https labelled website, it does not interpret it has a secure connection. Until and Unless it’s written secure(or green colored) in the URL bar, the connection is not secure. It shouldn’t be https with minor errors.
Also, the PWA won’t work if there is any mixed content error. Mixed content error occurs if you request some resource kept on http servers.
# SSL under development environment
- First you need install this package: http-server
- You need Create some Certs: cert.cer | cert.key
- Add it to root directory in a folder call certs (remember add it to .gitignore)
- Make build of your project
- Run the following command in the project folder: "http-server (path of your build folder) -S -C (route of your certs folder)/cert.cer -K (route of your certs folder)/cert.key"
- The previous command will give you a URL 127.0.0.1:8080 Change it by https://Name of your local device.sc0.plusteam.tech:8080
Now you can open the URL on any devices and see installation or new updates.
# Offline
Your app can now work just like a native app, provided you “install” it, that is visit the website first before going offline. The result? Once you download the PWA to your device, you can consume content within the app without an Internet connection.
# Push Notification (not available on iOS for now)
A notification is a message that pops up on the user’s device. Notifications can be triggered locally by an open application or they can be “pushed” in real-time from the server to the user, even when the app is not running. The main idea behind push notifications is to engage users and keep everyone up to date with the latest content or features. For instance, you might get daily notifications from any mobile app, those are push notifications!
# Check for Permission
Once you’ve registered the service worker, you’ll have global access to the Notification API. First, we need to ask the user permission to show notifications:
Notification.requestPermission(result => {
console.log(result)
if (result === 'granted') {
alert('thanks for giving me permissions')
}
});
2
3
4
5
6
The requestPermission promise returns one of three values: granted, denied, or default.
Note:Safari Version 12.0.3 still uses callback to get the permission.
Unregister, then register the new service worker. A notification prompt will pop up. Grant the service worker the access it needs.
Upon pressing allow, the browser will save the choice under your settings. At any given time we can revoke the notifications through the settings. Be sure not to abuse the notifications, otherwise, users will revoke permissions and never grant it again.
# What Can We Do With the Notifications?
Anything we want… well almost. There’s no limit on how often we can send push notifications. Let’s try it out and send one:
Notification.requestPermission(result => {
if (result === 'granted') {
navigator.serviceWorker.ready.then(registration => {
registration.showNotification('Vibration Sample', {
body: 'Buzz! Buzz!',
tag: 'vibration-sample'
});
});
}
});
2
3
4
5
6
7
8
9
10
The .ready read-only property of the ServiceWorkerContainer interface provides a way of delaying code execution until a service worker is active.
# Performance: (Lighthouse)
Lighthouse is an easy to use tool to help improve the quality of your sites and pages. Lighthouse runs audits for performance, accessibility, progressive web apps, and more. Each audit has a reference doc explaining why the audit is important and how to fix problems.
# Other guides
- Native app Installed check whether your native app is installed on a user's device, and vice versa