Progressive Web App tutorial – learn to build a PWA from scratch
Why Stack Overflow recommends it
Stack Overflow users cite it as the starting point their PWA code was based on, and link it when asking why caching, offline mode or install behavior is not working.
Recommended by 0 people across 0 different months, 2018 to 2019.
What it is
A 39-minute hands-on tutorial from Vaadin that builds a simple offline-capable news reader as a Progressive Web App from scratch. It covers the Web App Manifest, service workers, Workbox and Chrome DevTools, plus a production Webpack build.
What people said
Cites Simon Shaw · 2018-06 · Stack Overflow · on “pwa workbox not finding response in cache”
I have configured the following workbox route to cache all articles taken from the news service newsapi.org. I can see that articles are being stored in the cache, however when I go offline mode in chrome, then try to access the cached url, workbox tells me that no response is found in the cache (even though I can see it there). What am I missing here? Original code based on Vaadin Progressive Web App tutorial [this video] workbox.routing.registerRoute( // Cache news articles new RegExp('^https?:\/\/newsapi.org/(.*)'), args => { return workbox.strategies.networkFirst({ cacheName: 'news-cache', plugins: [ new workbox.expiration.Plugin({ maxEntries: 20, maxAgeSeconds: 7 * 24 * 60 * 60, }) ], }).han
Cites narengs7 · 2018-07 · Stack Overflow · on “Creating Progressive Web application”
I followed the video in this link [this video] and built a simple application. But when I accessed the application it doesn't seem like pwa, It shows with chrome icon above application icon after save, ask for the dimension of an icon when saving. So I am bit confused am I missing something. It doesn't look like Flipkart lite works. It works as Flipkart light when it is deployed to firebase but not on local servers like tomcat or nginx. Need some help in identifying what I am missing... manifest.json { "name": "Progressive Web Application", "short_name": "PWA", "theme_color": "#000000", "background_color": "#80bde4", "display": "standalone", "start_url": "/", "icons": [ { "src": "images/icons/ico
Cites fifn2 · 2018-11 · Stack Overflow · on “How do I use service workers in parcel?”
I have a service worker that comes from my js/index.js : import '../scss/app.scss'; // Detect if service workers enabled if ('serviceWorker' in navigator) { try { navigator.serviceWorker.register('../sw.js'); console.log('Service Worker Registered'); } catch (error) { console.log('Service Worker Register Failed'); } } and my sw.js in my root directory: const staticAssets = ['./', 'scss/app.scss', 'js/index.js']; self.addEventListener('install', async (event) => { const cache = await caches.open('min-static'); cache.addAll(staticAssets); }); self.addEventListener('fetch', (event) => { console.log('fetch'); }); Is babelized and put into the dist folder by parcel. When it's built and I go to lo
Cites maxischl · 2019-05 · Stack Overflow · on “PWA offline mode not loading from cache on mobile browsers”
I wrote a simple PWA ( current version [LINK] ) based on this tutorial [this video] by Vaadin [LINK] . It works fine, tested in Chrome, also in offline mode. By using it on a mobile device, issues occur: After saving the PWA, starting it once, it runs fine. then after closing, turning on flight mode and restarting the PWA, I get a system message, saying I have no internet connection -> no problem, I can ignore that after ignoring, the app does not load the static assets as I expected it, but shows a blank page, saying the browser could not load the page, since I don't have internet connection. I thought that is, what the PWA is good for? Why does it not load the static assets? I think my service-