This is used when prompting the user to install the app. Create a file named main.js in the js folder and enter the following code:įor our app we set the title, its background and theme colors, and tell the browser it should be treated as a standalone app without the browser chrome. Now that the service worker script is created we need to register it with our app. (Please note that while this code works for demonstration purposes it is not intended for production as it will stop if it fails to load even one of the files.)įinally, we add a function to load in the cached files when the browser is offline. Once the cache is created it adds all of the files listed in the filesToCache array. Next, we add a function to install the service worker and create the browser cache using cacheName. This is so the browser caches index.html even if the user doesn’t directly type in that file name. Notice that the first one is simply “/”, the base URL.
These files should be written in the form of URLs. filesToCache is an array containing a list of all of the files that need to be cached. cacheName is used to create an offline cache in the browser and give us access to it from Javascript.
The first lines of the script declares two variables: cacheName and filesToCache. Open your project folder in Brackets to get started. It should look like this when you’re finished: /Hello-PWA # Project Folder /css # Stylesheets /js # Javascript /images # Image files. The SetupĬreate a directory for the app and add js, css, and images subdirectories. I’ve used Adobe’s Brackets in this tutorial, because it has a built in web server, but you can use any text editor and server combo you’re comfortable with. To build this app you’ll need a text editor, the latest version of Chrome and a local web server. If you can code a web page and use plain-vanilla JavaScript to add some interactivity you should be able to follow along. To get the most out of this tutorial you should be familiar with HTML, CSS and JavaScript. In this tutorial I’ll show you how to use a manifest and service workers to create just about the simplest app possible, one that works without an internet connection, and can be added to your home screen. If you’re not familiar with Progressive Web Apps the basic idea is to use browser technologies to build a web application that works offline and has the look and feel of a native application.
0 kommentar(er)
