App can be accessed and installed from: https://nosy-flower.surge.sh/
***NOTE: Make sure to check Offline in Developer Tools for it to work***
-
Tutorials/Resources Used
Follow these links to create your portfolio
https://www.youtube.com/watch?v=9AboneIxeM8&list=PL3KAvm6JMiowqFTXj3oPQkhP7aCgRHFTm
https://appdividend.com/2018/03/14/how-to-build-progressive-web-application-using-react-js/
https://medium.com/front-end-weekly/build-a-realtime-pwa-with-react-99e7b0fd3270
-
Create App
In the project directory, you can run:
then
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.The page will reload if you make edits.
You will also see any lint errors in the console.Launches the test runner in the interactive watch mode.
See the section about running tests for more information.Builds the app for production to the
build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.The build is minified and the filenames include the hashes.
Your app is ready to be deployed! -
Create a service-worker.js file and modify manifest.json file in public folder
Enter the following contents to service-worker.js:
`
// Flag for enabling cache in production var doCache = false; var CACHE_NAME = 'myportfoliosite-cache'; // Code to handle install prompt on desktop let deferredPrompt; const addBtn = document.querySelector('.add-button'); addBtn.style.display = 'none'; // Delete old caches self.addEventListener('activate', event => { const currentCachelist = [CACHE_NAME]; event.waitUntil( caches.keys() .then(keyList => Promise.all(keyList.map(key => { if (!currentCachelist.includes(key)) { return caches.delete(key); } })) ) ); }); // This triggers when user starts the app self.addEventListener('install', function(event) { if (doCache) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { fetch('asset-manifest.json') .then(response => { response.json(); }) .then(assets => { // We will cache initial page and the main.js // We could also cache assets like CSS and images const urlsToCache = [ '/', assets['main.js'] ]; cache.addAll(urlsToCache); }) }) ); } }); // Here we intercept request and serve up the matching files self.addEventListener('fetch', function(event) { if (doCache) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); } }) `
-
Add the following script in index.html file in public folder `<script>
if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('service-worker.js').then(function(registration) { console.log('Worker registration successful', registration.scope); }, function(err) { console.log('Worker registration failed', err); }).catch(function(err) { console.log(err); }); }); } else { console.log('Service Worker is not supported by browser.'); } </script> `
-
File Structure
`
my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg `
-
Edit your app by adding componenents in src folder
-
Install Http-server to run the pwa app
-
Deploy to Surge `
npm install --global surge surge npm run build` ls build surge build/
`
-
Learn More
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify