Blog

PWA: Progressive Web App

No game this time ! Over the last few weeks I tried to make that website a “PWA”. Curious what it is, or how to do it ?

What’s a PWA ?

PWA aim to make a website look and behave like an application. As vague as it is it generally means:

  • Have an icon user can click on to launch the app
  • Work offline
  • Access the same features as an app:
    • Notification to tell you about new stuff going on in the PWA.
    • In App Purchases
    • Access to hardware features: GPS, camera, accelerometer, …
    • Integration with other app (Sharing through system intent on Android & iOS for instance)

None all of it is figured out yet, but some already works surprisingly well. Let’s check how to get an icon, offline support and push notification.

Icon

It’s easy at least for chrome, read that blog post. In short it’s 5 steps:

  • Create a file like “manifest.json” (see content below)
  • Put a <link> tag in the <head> of every page of your website pointing to the manifest:
    <linkrel="manifest"href="/manifest.json">
  • Have a service worker registered for your website
  • Be served over HTTPS
  • Visitors must visit your website at least twice with 5 minutes or more between the visits.

Et voila !

Screenshot display bannerScreenshot icon homescreen

Offline support

Offline support is super easy to implement thx to the “service worker”. It’s just a javascript file in your root directory of your website. When someone visit your website, the service worker is downloaded by the browser, and the browser will trigger some event on it. You can register on this event and execute code. The most important event for offline support are :

  • install: When ther service worker is first install in your user’s browser.
  • fetch: When your website try to fetch anything (html file, javascript, image, etc) it’ll trigger that event, and you can choose to either fetch the ressource from the cache and fall back on the network or the opposite (network then cache) or …

Jake Archibald wrote a lifesaver blogpost about that. Read it ! It’s dense but super easy to read.

Push notification

Notifications let you warn your user proactively about new content on your website. There are 4 (ideally 5) steps to display a notification:

  1. Register your user: blog post
  2. Send them a push from your server: same blog post
  3. In your service worker: a. Receiving the push b. Cache the url and content the push will display if the user click on it c. Finally display the notification from that service worker

For step 1 the blog post doesn’t really explain how to register the token in your backend. In my case I choosed to store it in Firebase. Why ? Because all it takes is:

<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script><script>varmyRegistration=newFirebase('https://luminous-inferno-9971.firebaseio.com/pntokens/'+pushNotifToken);myRegistration.set({platform:"chrome",time_offset:timeOffset,token:pushNotifToken});</script>

And that’s it ! Really, no lies, no hidden error catch, no anything … So now that you have a token store server side let’s see how to send a push.

For step 3a, in your service worker you just register to that event:

    self.addEventListener('push',function(event){console.log('Received a push message',event);// Now fetch the payload of the push from your server (title, body, url, ...)}

And that’s it !

For step 3b, caching the url it’s also super easy:

    caches.open(CACHE_NAME).then(function(cache){returnfetch(notifurl).then(function(response){cache.put(notifurl,response.clone());returnresponse.json();});});

And finally for step 3c, displaying the notification:

    returnself.registration.showNotification(title,{body:body,icon:icon,tag:tag,requireInteraction:true});

You can see these 3 steps put together here. And that’s it ! Now go make a PWA of your blog / website !