A PWA that sounds more App than Web

A Progressive Web App is a set of rules that comply with the display of a WebApp in a standalone or minimalist view.

Pick up your web application, remove the bar address and the menu (optionally), and try to figure out how the user can interact with your application as if the client was not a browser.

What if the network connection drops ?
What if the screen width is as small as a smartphone ?
What if your user wants to touch the screen instead of clicking ?

These are the questions that lighthouse (chrome > chrome dev tools > Audits) is going to ask you before certifying a PWA (Progressive WebApp)

First of all, think mobile first :
1°) shrink the window resizing
Fix the display bugs that only appear on middle and small size screens.
Either find a workaround or define another layout.

Define the offline experience :
2°) Write a service worker like this one :
(« network or cache » strategy is most obvious one : use cache when possible instead of network)

const cacheName = btoa(self.location.toString())

self.addEventListener('fetch', event => {
const {request: {url}} = event
event.respondWith(
caches.open(cacheName)
.then(cache => cache.match(url, {ignoreSearch: true}))
.then(response => response || fetch(event.request))
)
})
self.addEventListener('install', event =>
event.waitUntil(
caches.open(cacheName).then(cache =>
self.fetch('asset-manifest.json')
.then(http => http.json())
.then(response => cache.addAll(Object.values(response)))
.then(() => cache.add('service-worker.js'))
.then(() => cache.add('index.html')))
.then(() => self.skipWaiting())))

Invoke the service worker from a script as follow :
navigator.serviceWorker.register("service-worker.js",{scope:"/theApplication/"})
Now, you should be able to render your app even without network : (notice the plane mode)
notice the plane mode. Yes, it still works.

Declare the whole as an application :
3°) Write a manifest.json file :

{
"short_name": "Infogare",
"name": "SNCF infogare",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},{
"src": "logo.png",
"sizes": "144x144 192x192 512x512 1024x1024",
"type": "image/png"
}
],
"start_url": "/infogare/",
"display": "standalone",
"theme_color": "#ddc15d",
"background_color": "#0d5da6",
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=org.toilelibre.libe.trains",
"id": "org.toilelibre.libe.trains"
}
]
}

Refer to it using this markup : <link rel= »manifest » href= »/infogare/manifest.json »/>

4°) Bonus step : add an install button :
follow this guide : https://developers.google.com/web/fundamentals/app-install-banners/
This is how it can look like on your app :
Sans titre

Here you are. No need to hire an Android specialist nor an Apple fashionista. Write once, deploy everywhere.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*