...
 
Commits (3)
This diff is collapsed.
{
"applications": {
"gecko": {
"id": "addon@example.com",
"strict_min_version": "42.0"
}
},
"background": {
"scripts": ["jquery.js", "my-background.js"],
"page": "my-background.html"
},
"browser_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/geo.html"
},
"commands": {
"toggle-feature": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"linux": "Ctrl+Shift+U"
},
"description": "Send a 'toggle-feature' event"
}
},
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
"content_scripts": [
{
"exclude_matches": ["*://developer.mozilla.org/*"],
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
],
"default_locale": "en",
"description": "...",
"icons": {
"48": "icon.png",
"96": "icon@2x.png"
},
"manifest_version": 2,
"name": "...",
"page_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/geo.html"
},
"permissions": ["webNavigation"],
"version": "0.1",
"web_accessible_resources": ["images/my-image.png"]
}
# What is a PWA?
Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen and loads as a top-level, full screen experience.
- Fast loading
- Native mobile feeling (Home screen, Push notification )
- Offline experience
## SUPPORT BROWSERS
- Chrome Supports (40)
- Safari Supports (11.1)
- Firefox Supports (44)
- Edge Supports (17)
## SUPPORT MOBILE
- IOS 11.3
- Android 4.4
## PWA BODY
- Service Worker (Offline Experience)
- App Shell (Fast Loading)
- Manifest.json (Home Screen)
## SERVICE WORKER
- Must have: HTTPS
- How does SW work? Is shown in the PDF on images.
## Pros and cons of the Progressive Web App
- Progressive — They work for every user, regardless of the browser chosen because they are built at the base with progressive improvement principles.
- Responsive — They adapt to the various screen sizes: desktop, mobile, tablet, or dimensions that can later become available.
- App-like — They behave with the user as if they were native apps, in terms of interaction and navigation.
- Updated — Information is always up-to-date thanks to the data update process offered by service workers.
- Secure — Exposed over HTTPS protocol to prevent the connection from displaying information or altering the contents.
- Searchable — They are identified as “applications” and are indexed by search engines.
- Reactivable — Make it easy to reactivate the application thanks to capabilities such as web notifications.
- Installable — They allow the user to “save” the apps that he considers most useful with the corresponding icon on the screen of his mobile terminal (home screen) without having to face all the steps and problems related to the use of the app store.
- Linkable — Easily shared via URL without complex installations.
- Offline — Once more it is about putting the user before everything, avoiding the usual error message in case of weak or no connection. The PWA are based on two - - particularities: first of all the ‘skeleton’ of the app, which recalls the page structure, even if its contents do not respond and its elements include the header,the page layout, as well as an illustration that signals that the page is loading.
## Weaknesses refer to:
- iOS support from version 11.3 onwards;
- greater use of the device battery;
- not all devices support the full range of PWA features (same speech for iOS and Android operating systems);
- it is not possible to establish a strong re-engagement for iOS users (URL scheme, standard web notifications);
- support for offline execution is however limited;
- lack of presence on the stores (there is no possibility to acquire traffic from that channel);
- there is no “body” of control (like the stores) and an approval process;
- limited access to some hardware components of the devices;
- little flexibility regarding “special” content for users (eg loyalty programs, loyalty, etc.).
## Why PWA?
https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/?utm_source=Responsive+Design+Weekly&utm_campaign=27cfd941fd-RWD_Newsletter_254_pwa&utm_medium=email&utm_term=0_df65b6d7c8-27cfd941fd-59131445
## PWA For nuxt
- You need add a `@nuxtjs/pwa` module
- In `nuxt-config` add a object `Manifest` instead of new file
- Add file sw.js in static (service worker) for caching app
https://pwa.nuxtjs.org/
### example manifest for nuxt
```
manifest: {
name: 'name app',
short_name: 'name',
theme_color: '#ffe100',
lang: 'pl'
}
```