We are going to create a progressive web app with our html5 template. Unzip the downloaded file to your prefered location after download. If you have Github Desktop installed, simply fork and/or clone it.
Make sure you have all this checked before we start.
In our template's work folder; go to the app/ folder and add two empty files namely
service-worker.js
and app.webmanifest respectively and save.
This is the first step to making our web app work offline. Copy and paste this code to the
index.html in our app/ folder just before the end of the body tag or in the head
tag.
N/B : YOU NEED HTTPS : We are going to use Firebase Hosting later which shall have HTTPS already provisioned for our project.
./service-worker.js is registered once the page is loaded.
<!-- register service worker -->
<script>
if ('serviceWorker' in navigator)
{
window.addEventListener('load', () => {
navigator.serviceWorker.register('./service-worker.js')
.then(() => { console.log("[ PWA Fire Bundle ] Service Worker Registered"); });
} );
}
</script>We are going to add a link tag to all the pages that encompass our web app inside the head tag, as follows; For our case, we only have one page, the index.html. Add the following code to it.
<!-- start of web manifest -->
<link rel="manifest" href="./app.webmanifest">
<!-- end of web manifest -->NOTE : The important thing to understand about the Service Worker is that you are in control of the network. You get to decide what is cached, how it is cached and how it should be returned to the user.
// Fetch events, on registration of Service Worker...
self.addEventListener('fetch', (event) => {
event.respondWith(caches.open('cache').then((cache) => {
return cache.match(event.request).then((response) => {
console.log("cache request: " + event.request.url);
var fetchPromise = fetch(event.request).then((networkResponse) => {
// Update the cache...
console.log("fetch completed: " + event.request.url, networkResponse);
if (networkResponse) {
console.debug("updated cached page: " + event.request.url, networkResponse);
cache.put(event.request, networkResponse.clone());}
return networkResponse;
}, event => {
// Rejected promise - just ignore it, we're offline...
console.log("Error in fetch()", event);
event.waitUntil(
// Name the *cache* in the caches.open()...
caches.open('cache').then((cache) => {
// Take a list of URLs, then fetch them from the server and add the response to the cache...
return cache.addAll([
'./index.html',
'./App.css',
'./App.js',
'./images/*'
]);
})
);
});
// Respond from the cache, or the network...
return response || fetchPromise;
});
}));
});
// Always updating i.e latest version available...
self.addEventListener('install', (event) => {
self.skipWaiting();
console.log("Latest version installed!");
});
Configure/edit the background and theme colors, display type, the PWA short name (any name), the Web App name, icons size (icons in the icons folder are already in the required sizes) and your icon/logo paths.
We have to state the img type eg image/ico or image/png. This is already done for you. You could use your own icons or logos and update later after this codelab.
Leave the start url as it is though this can be any page or source directory in your web app; the value we’re using has the advantage of being meaningful to Google Analytics.
app.webmanifest file helps you to specify how you want your web app to
look like when launched on the device.
app.webmanifest file as directed above in order to fit your web app
needs.
{
"background_color": "#fff",
"display": "standalone",
"orientation":"portrait",
"theme_color": "#fff",
"short_name": "PWA Name",
"name": "PWA Name",
"description": "Description or purpose of your PWA",
"lang": "en-US",
"icons": [
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "index.html?launcher=true"
}
In the head tag, add theme color to all your pages as shown in the code below; You could use the same
theme colour as in the ./app.webmanifest file.
<!-- theme-color -->
<meta name="theme-color" content="#fff" />
<!-- end-theme-color -->Use your favourite web server to view your Progressive Web App in Google Chrome. You should be able to have your PWA work offline and insallable on desktop and on mobile device if you host it somewhere or deploy to firebase hosting as shown below.
If you're new to Firebase, you'll need to create your account and install some tools first. Install latest version of node.js first
1. Create a Firebase account at https://firebase.google.com/console/. Once your account has been created and you've signed in, you're ready to deploy!
2. Create a new Firebase app at https://firebase.google.com/console/
3. Install the Firebase tools via npm (run this in your command line).The Firebase Command Line Interface (CLI) will allow you to serve the web app locally and deploy.
npm -g install firebase-tools4. To verify that the CLI has been installed correctly, open a console and run:
firebase --version5. If you haven't recently signed in to the Firebase tools, update your credentials:
firebase login6. Make sure you are in the /app folder (which is our project root folder i.e where our
index.html is) then Initialize your app to use Firebase. Select your Project ID and follow
the instructions.
When prompted, you can choose any Alias, such as pwafire for instance. Select Firebase
Hosting as the Firebase CLI feature. Provide the default directory as /. To the other
prompts, reply NO; N
firebase init7. Let's serve and test the firebase project locally. Run the following command from the root of your local project directory.
firebase serve8. Finally, deploy the app to Firebase:
firebase deploy9. Celebrate. You're done! Your app will be deployed to the domain:
https://YOUR-FIREBASE-APP.firebaseapp.com10. Visit your web app on your phone now. You should see an "install to homescreen" banner prompt! Welcome to PWAs World! Further reading: Firebase Hosting Guide.
