Progressive Web App – “Hello World” App on iOS 11.3 in 5 Min ๐Ÿ“ด

1. Overview

Progressive Web Apps (PWAs) might be replacing standards apps since they are so easy to set up and do not require App Store approval (for now).

In this article we want to build a quick PWAs as fast as possible to get our hands on this technology.

This is how our end result will look like on an iPhone 6s Plus:

Quite basic but it’s a start!

What we need:

  • An http server. We use Nginx, apache2 is also just fine
  • An apple device with iOS 11.3+ and Safari to download the PWA

Note: we are not bothering with fancy icons and android devices (just yet) in order to keep it simple.

2. PWA files and structure

We will deploy our files under the Nginx web directory /var/www/html/pwa2 , a folder we will create.

There will be four files composing our PWA:

  • index.html
  • sw.js
  • manifest.json
  • hello-world.css

2.1 Our index.html

In our html file we declare the manifest.json and our stylesheet css file. Also, the viewport meta tag helps with portable devices.

There is an inline script that registers our service worker sw.js file for bootstrap loading.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>First hello world PWA</title>
    <link rel="stylesheet" type="text/css" href="hello-world.css" media="all">
    <link rel="manifest" href="manifest.json">
    <script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js')
          .then(function() {
                console.log('Service Worker Registered');
          });
      }
    </script>
  </head>
  <body>
    <h1 class="vertical-container">Hello World!</h1>
  </body>
</html>

2.2 The heart of our PWA manifest.json

The heart of our progressive web app is the manifest.json file where we declare the name and our start_url. The gcm_sender_id is the same for all PWAs.

{
"name": "My Hello World PWA",
"short_name": "HW",
"start_url": "index.html",
"gcm_sender_id": "103953800507",
"display": "standalone",
"background_color": "#AF1000",
"theme_color": "#AF1000"
}

2.3 Our stylesheet hello-world.css

This stylesheet is just to make our app look fancy and can be kept to a minimal version for now. Note that we greatly enhance our font-size.

body {
  background-color: #AF1000;
  color: black;
}
.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
h1.vertical-container {
  font-size: 200%;
}

2.4 The service worker and caching with sw.js

This additional javascript file adds event listeners that detects when the app is installed, activated or fetched.

Also the files that need to be cached are defined.

var cacheName = 'hello-world-page';
var filesToCache = [
'/html/pwa2/',
  'index.html',
  'hello-world.css'
];
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});
self.addEventListener('activate',  event => {
  event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request, {ignoreSearch:true}).then(response => {
      return response || fetch(event.request);
    })
  );
});

3. Install the App on our device

Since our PWA is now internet-accessible we only need to open our Safari Browser on our device and enter the address.

Next we press the share button and add to homescreen.

We enter a name and we are done.

4. Conclusion and Improvements

This short example was intended to get our feet wet and to see the very basic structure of a PWA. Next will be a more sophisticated version that serveres a useful purpose.

You can also download the complete example here:
>Download pwa2.tar<

Leave a Reply

Your email address will not be published. Required fields are marked *