added notes for PWA
This commit is contained in:
imcmjha
parent
2c9ff796fa
commit
16db35a14a
|
|
@ -12,4 +12,9 @@ This will contain all my notes.
|
||||||
- Although practicality beats purity.
|
- Although practicality beats purity.
|
||||||
- Errors should never pass silently, unless explicitly silenced.
|
- Errors should never pass silently, unless explicitly silenced.
|
||||||
- Now is better than never. But never is often better than right now.
|
- Now is better than never. But never is often better than right now.
|
||||||
- If the implementation is hard to explain, it is bad idea.
|
- If the implementation is hard to explain, it is bad idea.
|
||||||
|
|
||||||
|
## Some notes
|
||||||
|
- [Git](git.md)
|
||||||
|
- [mongo](mongo.md)
|
||||||
|
- [PWA](pwa.md)
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
# PWA (Progressive Web app)
|
||||||
|
|
||||||
|
## The manifest file
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"name": "Full app name",
|
||||||
|
"short_name": "app short name",
|
||||||
|
"theme_color": "#",
|
||||||
|
"background_color": "#",
|
||||||
|
"description": "description about app",
|
||||||
|
"dir": "ltr",
|
||||||
|
"display": "standalone",
|
||||||
|
"scope": "/",
|
||||||
|
"start_url": "/",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-72x72.png",
|
||||||
|
"sizes": "72x72",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-96x96.png",
|
||||||
|
"sizes": "96x96",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-128x128.png",
|
||||||
|
"sizes": "128x128",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-144x144.png",
|
||||||
|
"sizes": "144x144",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-152x152.png",
|
||||||
|
"sizes": "152x152",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-384x384.png",
|
||||||
|
"sizes": "384x384",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "assets/icons/icon-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## For Apple devices
|
||||||
|
```
|
||||||
|
<meta name="Title" content="Title of app" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="application-name" content="name of application" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="#007db2" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="title of app" />
|
||||||
|
<meta name="msapplication-starturl" content="/" />
|
||||||
|
<meta name="theme-color" content="#1976d2" />
|
||||||
|
<meta
|
||||||
|
name="Description"
|
||||||
|
content="Description of the app"
|
||||||
|
/>
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
sizes="96x96"
|
||||||
|
href="assets/icons/icon-96x96.png"
|
||||||
|
type="image/png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="192x192"
|
||||||
|
href="assets/icons/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Strategy
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"$schema": "path to schema.json",
|
||||||
|
"index": "/index.html",
|
||||||
|
"assetGroups": [
|
||||||
|
{
|
||||||
|
"name": "app",
|
||||||
|
"installMode": "prefetch",
|
||||||
|
"resources": {
|
||||||
|
"files": [
|
||||||
|
"/favicon.ico",
|
||||||
|
"/index.html",
|
||||||
|
"/manifest.json",
|
||||||
|
"/*.css",
|
||||||
|
"/*.js"
|
||||||
|
],
|
||||||
|
"urls": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "assets",
|
||||||
|
"installMode": "lazy",
|
||||||
|
"updateMode": "prefetch",
|
||||||
|
"resources": {
|
||||||
|
"files": [
|
||||||
|
"/assets/**",
|
||||||
|
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dataGroups": [
|
||||||
|
{
|
||||||
|
"name": "apis",
|
||||||
|
"urls": [
|
||||||
|
"urls to be stored to imporve performance of the app"
|
||||||
|
],
|
||||||
|
"cacheConfig": {
|
||||||
|
"maxSize": 3,
|
||||||
|
"maxAge": "1d",
|
||||||
|
"timeout": "5s",
|
||||||
|
"strategy": "performance"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "quick-load",
|
||||||
|
"urls": [
|
||||||
|
"urls to be stored to get the latest value"
|
||||||
|
],
|
||||||
|
"cacheConfig": {
|
||||||
|
"maxSize": 2,
|
||||||
|
"maxAge": "5m",
|
||||||
|
"timeout": "1m",
|
||||||
|
"strategy": "performance"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Service Worker Registration
|
||||||
|
```
|
||||||
|
ServiceWorkerModule.register('path to service worker file', {
|
||||||
|
enabled: <true/false/condition to return truthy>,
|
||||||
|
registrationStrategy: 'registerImmediately',
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Show app version (for user and debug process)
|
||||||
|
```
|
||||||
|
import { version } from 'path to package.json';
|
||||||
|
```
|
||||||
|
|
||||||
|
## Custom installation
|
||||||
|
|
||||||
|
### Javascript
|
||||||
|
```
|
||||||
|
let promptEvent;
|
||||||
|
window.addEventListener('beforeinstallprompt', (event) => {
|
||||||
|
this.promptEvent = event;
|
||||||
|
});
|
||||||
|
|
||||||
|
// On User Click to install
|
||||||
|
this.promptEvent.prompt();
|
||||||
|
this.promptEvent.userChoice.then((choiceResult) => {
|
||||||
|
if (choiceResult.outcome === 'accepted') {
|
||||||
|
this.promptEvent = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Force app update
|
||||||
|
```
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker
|
||||||
|
.getRegistrations()
|
||||||
|
.then((registrations: ServiceWorkerRegistration[]) => {
|
||||||
|
for (const registration of registrations) {
|
||||||
|
registration.update();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Show user if app is online
|
||||||
|
```
|
||||||
|
navigator.onLine
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue