This content originally appeared on DEV Community and was authored by TheYoungestCoder
This is part 3 of "Getting a 100% score in lighthouse". In this article I'll show you how to create PWA.
Get started
To create a PWA (progressive web app) you need to use a webmanifest. The first thing you need to do is create a file called manifest.json and include this snippet inside the head of index.html.
<link rel="manifest" href="manifest.json" />
Since manifest.json has many required properties to get your PWA working. I'll explain every one in-depth and how to implement them
name, short_name, and description
-
short_nameis what the user sees on their home screen. -
nameanddescriptionis what the user sees when installing the PWA
icons
When a user installs your PWA, it uses an array of icons to display on the home screen. Each icon is an object in which you need to specify the type, src, and sizes of each icon
start_url
This is the URL that is used when the user opens your app. It's typically / or index.html
theme_color and background_color
This is pretty self-explanatory. It is worth noting that you have to use the HEX format.
display
It describes how it's shown when your app is launched
- fullscreen — the app runs in a fullscreen window
- standalone — the app runs in it's own window but still has a URL bar
- browser — the app runs in the browser
splash_screen
The splash screen is the image that appears when your app is launched. It is just in image so it requires type, src and sizes similar to an icon.
Now that you know all the properties, here's an example for a news app webmanifest.
{
"name": "Newsella",
"short_name": "News",
"start_url": "/",
"theme_color": "#fff",
"background_color": "#fff",
"display": "standalone",
"description": "One place for all of your news",
"icons": [
{
"src": "logo.png",
"sizes": "560xx560",
"type": "image/png"
}
],
"splash_screen": [
{
"src": "splash_screen.png",
"sizes": "800x100",
"type": "image/png"
}
]
}
Note: iOS does not use the icons property and instead uses <link rel="apple-touch-icon" href="your icon">.
Service workers
Service workers enable applications to control network requests, cache those requests to improve performance, and provide offline access to cached content.
To get a service worker setup you first need to create a file called service-worker.js. Then, insert this snippet in your <script> tag inside index.html to register the service worker.
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("service-worker.js", { scope: "." })
}
This next snippet creates an array of files and caches them once it's installed. This allows your PWA to be usable offline. Include it in service-worker.js
const cacheName = ["app"]
const filesToCache = ["somefile", "anotherfile"]
self.addEventListener("install", (e) => {
e.waitUntil(
(async () => {
const cache = await caches.open(cacheName)
await cache.addAll(filesToCache)
console.log("files cached")
})()
)
})
Next, what you need to do is intercept any requests. If it's cached, simply return the already-cached value. Otherwise, fetch the file, then cache it. It's expressed with this code:
self.addEventListener("fetch", (e) => {
e.respondWith((async () => {
// check if it's already cached
const cachedFile = await caches.match(e.request)
console.log("requesting resource:", e.request.url)
if (cachedFile) return cachedFile
// if not, fetch then cache
const response = await fetch(e.request)
const cache = await caches.open(cacheName)
console.log("caching resource:", e.request.url)
cache.put(e.request, response.clone())
return response
})())
})
You're done!
You've successfully made a PWA! If you need help, I included some debugging tips below. If that didn't solve the issue, post the error in the comments. Thanks for reading, I hope this helped you.
Debugging
Failed to execute 'Cache' on 'addAll'
This occurs when a file attempts to be cached that doesn't exist. Make sure that the files have the correct path in the filesToCache array.
Service Worker Registration Failed
This happens when service-worker.js doesn't exist.
Manifest property 'start_url' ignored, url is invalid
Make sure that it points to the location of the actual HTML file for your app.
This content originally appeared on DEV Community and was authored by TheYoungestCoder
TheYoungestCoder | Sciencx (2021-06-25T21:56:31+00:00) How to make a PWA. Retrieved from https://www.scien.cx/2021/06/25/how-to-make-a-pwa/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.